今日主要学习了网页导航栏的制作。注意：引入外部CSS样式时，如果使用背景：url（../ images / 1.png），一定记得用..跳出当前文件夹，回到上级目录。
一，导航栏实现步骤：
如图1所示，网页整体分为头部，内容，尾部。网页中心内容部分为版心。版心是定宽的。
2，设定版心宽度。其余每部分内容只需要设置高度即可。
3，报头部分分为左，中，右三部分。分别用DIV包起来，可以设置填充。
4，NAV部分用UL实现，李中的一个标签为行内元素，要用显示转为块标签，给立设置宽高，行高，可以实现居中。
5，鼠标移上去的效果用一个：悬停实现。
导航栏代码如下：
<！DOCTYPE html>
<html lang =“en”>
<head>
<meta charset =“UTF-8”>
<title>文件</ title>
<风格>
* {
保证金：0;
填充：0;
}
body {
font-family：“微软雅黑”;
font-size：16px;
}
.header {
height：58px;
背景：＃191D3A;
}
.header .inner_c {
width：1000px ;
保证金：0自动;
}
.header .logo {
float：left;
padding-right：50px;
}
.header .nav {
float：left;
}
.header .nav li {
line-height：58px;
list-style：none;
向左飘浮;
text-align：center;
border-right：1px solid＃212542;
}
.header .nav .last {
border：none;
}
.header .nav li a {
display：block;
高度：58px;
宽度：100像素;
text-decoration：none;
颜色：＃6B6889;
}
.header .nav li .current {
color：#fff;
背景：＃252947;
}
.header .nav li a：hover {
color：#fff;
背景：＃252947;
};
.header .jrwm_box {
float：left;
}
.header .jrwm {
padding-left：48px;
padding-top：12px;
}
.banner {
身高：465px;
background：url（images / banner.jpg）无重复中心顶部;
}
</ style>
</ head>
<body>
<div class =“header”>
<div class =“inner_c”>
<div class =“logo”> <img src =“images / logo.png”alt =“” > </ div>
<div class =“nav”>
<ul>
<li> <a href="" class="current">首页</a> </ li>
<li> <a href="">博雅游戏</a> </ li>
<li> <a href="">博雅新闻</a> </ li>
<li> <a href="">关于我们</a> </ li>
<li> <a href="">客服中心</a> </ li>
<li class =“l”> <a href="">投资者关系</a> </ li>
</ ul>
</ div>
<div class =“jrwm”>
<a href=""> <img src =“images / jrwm.png”alt =“”> </a>
</ div>
</ div>
</ div >
</ body>
</ html>
运行效果：
二，！重要
提高权重，权重无穷大重要
font-size：24px！important;
提高的是一个属性权重，不是选择器。
！important无法提升继承的权重，该是0还是0
<div>
<p>哈哈哈哈哈哈</ p>
</ div>
div {color：red！important;}
p {color：blue;}
由于div是通过继承来影响文字颜色的，所以无法提高权重。
重要在建站中是不允许使用的，避免混乱，了解就好。
2901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
