css 等宽导航栏栏设计方案技能

日期:2021-03-13 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

等宽导航栏栏(我不知道道这个名字合不符合适,了解的盆友指导1下)的设计方案1般要遵循下列两个要素:
1.导航栏栏的情况和网页页面的最大宽度相同;
2.导航栏的內容的部位在网页页面主架构之内(导航栏的內容在主架构之外的话不太好看,客户体验也不太好)。
文本看不懂的话,能够看下面这幅草图。

先看看导航栏栏的HTML编码。

拷贝编码
编码以下:

<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>

从这里看出构造和1般的导航栏栏是彻底1样的,了解的盆友应当猜出了,真实起功效的是CSS。
CSS这样写。

拷贝编码
编码以下:

#navigation {
width: 100%; /*宽度为100%,以填充全部显示屏的宽度*/
float: left; /*左波动*/
margin: 0 0 1px 0; /*设定margin的重要是上下的值都为零*/
padding: 0;
background-color: #F7F7F7;
}
#navigation ul {
list-style: none; /*无法显示目录项前面的斑点*/
width: 800px; /*宽度务必和主架构的宽度相同*/
margin: 0 auto; /*全部目录垂直居中*/
padding: 0;
}
#navigation li {
float: left; /*使导航栏栏程序编写水平导航栏栏*/
}
#navigation li a {
display: block; /*把导航栏栏里的连接设定为块元素*/
padding: 8px 15px;
text-decoration: none;
}

CSS的重要我早已再加了注解。
上一篇:CSS 首行缩进两个文本 返回下一篇:没有了