css+div导航的制作


<html xmlns="http://www.cnblogs.com/">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航条 - 经典导航 - W3C.cn</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="nav">
<ul>
      <li><a href="http://www.w3cfuns.com">W3C</a></li>
        <li><a href="http://www.w3cstudy.com">厘米学院</a></li>
        <li><a href="http://www.w3cstudy.com/course.aspx">培训课程</a></li>
        <li><a href="http://www.w3cstudy.com/apply.aspx">我要充电</a></li>
        <li><a href="http://www.w3cstudy.com/career.aspx">前端生涯</a></li>
<li><a href="http://www.w3cstudy.com/faq.aspx">课程答疑</a></li>
    </ul>
</div>
</body>
</html>

 
块状元素排斥其他元素与其位于同一行
加上属性 float:left使其在同一行
内联元素允许其他内联元素与其位于同一行
内联元素加上一个属性 display:block
可以把内联元素转化成块状元素,实现不在一行显示
在css.css中:
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#nav{
width:960px;
height:35px;
background:#CCC;/*为了便于查看区域范围大小,故而加个背景色*/
margin:0 auto;/*水平居中*/
margin-top:30px;/*距离顶部30px*/
}
#nav ul{
width:960px;
height:35px;
list-style:none;/*清楚列表前面的大黑圆点*/
}
#nav ul li{
float:left;          /*li是块状元素,这里用于消除块状*/
line-height:35px;
text-align:center;
/*padding:0 10px;*/
}
#nav ul li a
{
    display:block; /*--将内置元素转换成块状元素,使height可以使用*/
    height:35px;
font-size:12px; 
color:#333; 
text-decoration:none;
float:left;/*使块状元素在有的浏览器中横向排列*/
padding:0 10px;

 
}
#nav ul li a:hover
{/*鼠标移动到元素的效果*/
color:#fff; 
/*text-decoration:underline;/*有下划线*/
background-color:#000;
 
}

 

你可能感兴趣的:(导航,css+div)