导航框:
<head>
<title>wangzhang</title>
<link type="text/css" rel="stylesheet" href="jp.css">
</head>
<body>
<ul class="nav" >
<li class="logo">LOGO</li>
<li class="xuanzhong">网站首页</li>
<li>关于我们</li>
<li>新闻中心</li>
<li>产品展示</li>
<li>客户案例</li>
<li>项目合作</li>
<li>给我留言</li>
<li>人才招聘</li>
<li>联系我们</li>
</ul>
</body>
Css中标签和属性值中内容的修改:
body{
margin:0 atuo;
padding:0;
}
.nav{
margin:0 auto;
width:1240px;
height:133px;
}
.nav li{
float:left;
list-style: none;
width:107px;
height:100%;
line-height:133px ;
text-align:center;
font-size: 18px;
}
.nav .logo{
width:363px;
height:100%;
color:blue;
font-size:64px;
font-family:microsoft yahei;
}
.nav .xuanzhong{
background-color: blue;
font-size: #ffffff;
}
结果:
注意:
Body{}一般修改浏览器默认值
属性值.nav{}定义属性值里的内容
属性值中的标签.nav li{}定义标签了的内容
属性值中的属性值.nav .logo{}和.nav .xuanzhong{}定义了logo属性值中的内容