<head>
<link rel="stylesheet" type="text/css" href="CSS-kuaidu.css"/>
<title>宽度的学习</title>
</head>
<body>
<div style="width:960pxheight:700pxmargin:0 autoborder:solid 1px #999999" >
<div style="width:960pxheight:25pxborder:solid 1px #CCCCCC">
导航条
</div>
<div style="width:960pxheight:80pxborder:solid 1px #CCCCCC">
店铺图片
</div>
<div style="width:200pxheight:400pxborder:solid 1px #CCCCCCfloat:left">
左侧目录
</div>
<div style="width:750pxheight:400pxborder:solid 1px #CCCCCCfloat:right">
右侧内容
</div>
<div style="width:960pxheight:17pxborder:solid 1px #CCCCCCfloat:left">
尾区
</div>
<div style="width:960pxheight:173px border:solid 1px #CCCCCCfloat:left">
尾招
</div>
</div>
</body>
</html>
这就是一个网页的布局框架，内容就只需要自己去添加就可以了。
简单谢了一个，主要涉及一个浮动，一个hover的隐藏，显示，不是很复杂，可以自己尝试写下，以下代码仅供参考
<!DOCTYPE html><html>
<head>
<style>
div.menu-bar{
margin:0 auto
width: 1024px
}
div.menu-bar ul {
margin: 0
padding: 0
height: 100%
width: 100%
list-style-type: none
background-color: #fffabf
}
div.menu-bar li > a, div.menu-bar li > a:link, div.menu-bar li > a:visited, div.menu-bar li > a:active {
display: block
padding: 0 0 0 10px
height: 100%
line-height: 30px
font-size: 24px
font-style: italic
text-decoration: none
background-color: #fffabf
color: #5d5636
cursor: pointer
}
div.menu-bar ul ul {
margin-top: 2px
display: none
}
div.menu-bar ul ul li {
margin: 0
padding: 0
float: none
display: block
height: 28px
width: 100%
border: none
}
div.menu-bar li:hover > ul {
display: block
}
div.menu-bar ul li {
display: block
float: left
width:170px
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">专业特色</a>
<ul>
<li>
<a href="#">培养方案</a>
</li>
</ul>
</li>
<li>
<a href="#">教学团队建设</a>
<ul>
<li>
<a href="#">教师</a>
</li>
<li>
<a href="#">培训</a>
</li>
<li>
<a href="#">研究项目</a>
</li>
<li>
<a href="#">建设成果</a>
</li>
</ul>
</li>
<li>
<a href="#">实训基地建设</a>
<ul>
<li>
<a href="#">校内实训</a>
</li>
<li>
<a href="#">校外实训</a>
</li>
<li>
<a href="#">工学交替</a>
</li>
</ul>
</li>
<li>
<a href="#">社会服务</a>
<ul>
<li>
<a href="#">合作企业</a>
</li>
<li>
<a href="#">社会服务</a>
</li>
</ul>
</li>
<li>
<a href="#">网络教学平台</a>
<ul>
<li>
<a href="#">教学资源库</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
