顶行菜单 CSS
[英]Top Row Menu CSS
问题描述
I'm very new to website development/design so I've been struggling with getting a top row menu to work on my site.
我对网站开发/设计非常陌生，所以我一直在努力让顶行菜单在我的网站上工作。 Here's the code I have so far.这是我到目前为止的代码。 Any suggestions for things that might fit with my theme?对可能适合我的主题的东西有什么建议吗？ I'm going for a dark green/blurry style, I've gotten one of the boxes to work however when I try to insert something to act as a background for a centered nav-bar, it doesn't even show up.我想要一种深绿色/模糊的风格，我已经让其中一个框可以工作，但是当我尝试插入一些东西作为居中导航栏的背景时，它甚至没有出现。
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Montserrat+Alternates:wght@500&display=swap'); @import url(https://fonts.googleapis.com/css?family=Lato); body { margin: 0; padding: 0; font-family: sans-serif; } section { position: relative; display: flex; justify-content: center; align-items: center; background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png); background-attachment: fixed; background-size: cover; display: grid; align-items: center; justify-content: center; height: 100vh; } section.box { position: relative; max-width: 700px; padding: 50px; box-shadow: 0 10px 20px rgba(0,0,0,1); overflow: hidden; color: #000; } section.box:before { content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png); backround-attachement: fixed; background-attachment: fixed; background-size: cover; display: grid; align-items: center; justify-content: center; height: 100vh; filter: blur(10px) } section.box h2 { position: relative; margin: 0 0 20px; padding: 0; font-size: 48px; z-index: 2; font-family: 'Montserrat', sans-serif; } section.box p { position: relative; margin: 0; padding: 0; font-size: 18px; z-index: 2; font-family: 'Montserrat', sans-serif; } section.box { width: 50rem; height: 10rem; border-radius: 5px; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lorem ipsum</title> <link rel="stylesheet" href="style:css"> </head> <body> <section> <div class="box"> <center> <h2 style="color;#ffffff":>Lorem ipsum</h2> <p style="color;#ffffff";>Lorem ipsum dolor sit amet</p> </center> </div> </section> </body>
1 个解决方案
解决方案1
0 2021-02-06 11:17:50
First of all, welcome to web development.首先，欢迎来到web开发。 Have fun and keep learning.玩得开心，继续学习。
A note in the beginning, try to use smaller images/background-images for the web (loading times for example).开头的注释，尝试为 web 使用较小的图像/背景图像（例如加载时间）。
For a navigation in your current layout, i would suggest something like this:对于当前布局中的导航，我建议如下：
I removed ur inline html styling, it's unnecessary if you are using a stylesheet file.我删除了您的内联 html 样式，如果您使用样式表文件，则没有必要。 I also removed the <center> html tag, it's deprecated我还删除了<center> html 标签，它已被弃用
Next steps i added/changed the color of all box elements .box * to position: relative;接下来的步骤我添加/更改了所有盒子元素的颜色.box *到position: relative; (for showing "above" your :before element) and set the color to white and centered it. （用于显示您的:before元素的“上方”）并将颜色设置为白色并将其居中。
Then i added a navigation (in your html a new box element with a list in it).然后我添加了一个导航（在您的 html 中添加了一个带有列表的新框元素）。 Set the list items to display: inline-block for a very simple navigation alignment.设置要display: inline-block用于非常简单的导航 alignment。
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Montserrat+Alternates:wght@500&display=swap'); @import url(https://fonts.googleapis.com/css?family=Lato); body { margin: 0; padding: 0; font-family: sans-serif; } section { position: relative; display: flex; justify-content: center; align-items: center; background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png); background-attachment: fixed; background-size: cover; display: grid; align-items: center; justify-content: center; height: 100vh; } section.box { position: relative; max-width: 700px; padding: 50px; box-shadow: 0 10px 20px rgba(0,0,0,1); overflow: hidden; color: #000; } section.box:before { content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png); background-attachment: fixed; background-size: cover; display: grid; align-items: center; justify-content: center; height: 100vh; filter: blur(10px); } section.box h2 { position: relative; margin: 0 0 20px; padding: 0; font-size: 48px; z-index: 2; font-family: 'Montserrat', sans-serif; } section.box p { position: relative; margin: 0; padding: 0; font-size: 18px; z-index: 2; font-family: 'Montserrat', sans-serif; } section.box { width: 50rem; height: 10rem; border-radius: 5px; } section.box.navigation { width: 50rem; height: 5rem; border-radius: 5px; margin-bottom: 1rem; } section.box * { color: #ffffff; position: relative; text-align: center; } section.box.navigation ul li { list-style-type: none; display: inline-block; } section.box.navigation ul li a { display: block; margin: 10px; } <section> <div class="box navigation"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> <div class="box"> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet</p> </div> </section>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.