為什么第一個li會在nav中居中了？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<script src="js/setHome.js"></script>
<style>
*{
margin:0;
padding:0;
font-size:12px;
font-family:"微軟雅黑";
}
body{
background-color:#f5f5f5;
}
a{
text-decoration:none;
}
.top{
background:url(../images/top_bg.jpg) repeat-x;
height:27px;
width:100%;
}
.public-center{
width:1000px;
margin:0 auto;
}
.top nav li{
float:right;
font:"微軟雅黑";
width:70px;
line-height:27px;
color:#8e8e8e;
}
.top nav li a:link,.top nav li a:visited{
color:#8e8e8e;
}
.top nav li a:hover,.top nav li a:active{
color:#F00;
}
.logo{
background-color:#FFF;
height:80px;
}
.logo-left{
width:200px;
float:left;
}
.logo-tel{
float:right;
height:28px;
width:270px;
margin-top:30px;
color:#8e8e8e;
}
.logo-tel img{
vertical-align:middle;
margin-right:10px;
}
.tel-num{
font-size:16px;
color:#F00;
font-weight:bold;
}
.nav{
background-color:#786f66;
height:40px;
border-radius:5px;?
}
.nav-left{
float:left;
}
.nav-left ul{
list-style:none;
}
.nav-left li{
height:40px;
float:left;
}
.nav-left a{
color:#FFF;
width:100px;
font-size:16px;
width:80px;
line-height:40px;
margin-right:50px;
}
</style>
</head>
<body>
<header>
<div class="top">
? ? <div class="public-center">
? ? ? ? ? ? <nav>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li class="top-nav-item"><a href="#" onclick="SetHome(window.location);">設為首頁</a></li>
? ? ? ? ? ? ? ? ? ? <li class="top-nav-item"><a href="#" onclick="AddFavorite(window.location, document.title)">收藏本站</a></li>
? ? ? ? ? ? ? ? ? ? <li class="top-nav-item"><a href="#">聯系我們</a></li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </nav>
? ? ? ? </div>
? ? </div><!--top結束-->
? ? <div class="public-center">
? ? <div class="logo">
? ? ? ? <div class="logo-left"><img alt="慕課網" src="images/logo.jpg"></div>
? ? ? ? ? ? <div class="logo-tel">
? ? ? ? ? ? <img alt="tel" src="images/tel.jpg">24小時服務熱線:<span class="tel-num"> 123-456-7890</span>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div><!--logo結束-->
? ? <nav class="nav public-center">
? ? ? ? <div class="nav-left">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><a href="#">首頁</a></li>
? ? ? ? ? ? ? ? <li><a href="#">關于慕課</a></li>
? ? ? ? ? ? ? ? <li><a href="#">新聞動態</a></li>
? ? ? ? ? ? ? ? <li><a href="#">課程中心</a></li>
? ? ? ? ? ? ? ? <li><a href="#">在線課程</a></li>
? ? ? ? ? ? ? ? <li><a href="#">人才招聘</a></li>
? ? ? ? ? ? </ul> ? ?
? ? ? ? </div><!--導航欄結束-->
? ? ? ? <div class="nav-right">
? ? ? ? ? ? <form method="post" action="#">
? ? ? ? ? ? ? ? <input type="text"/>
? ? ? ? ? ? </form>
? ? ? ? </div><!--搜索欄結束-->
? ? </nav><!--nav結束-->
</header>
</body>
</html>
2016-08-16
子元素繼承父元素屬性
.public-center{ ?????width?=?1000px; ?????margin?=?0?auto; }2016-08-24
繼承，子元素繼承父元素