［HTML/CSS］布局学习笔记－企业网站导航部分

来源：互联网发布：中国国际地位知乎编辑：程序博客网时间：2024/05/16 12:36

跟着慕课网的老师练习

今天完成了导航部分的编写，预计明后两天完成整个页面

由于未使用html5 语言所以div 元素比较多，许多背景源自图片的使用

知识点：

先分析后下笔定义了一个wrap 包裹住要内容

浮动－其中logo部分添加的对父元素的浮动清除

使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

list-style:

-type:disc/none/circle/lower-latin....
-position:outside/inside
-img:url('/images/blueball.gif') -图像替换标记

background:

-color
-img:url()
-repeat:repeat|repeat-x|repeat-y
-position:left [center|bottom] -第二个值默认为center

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0;padding:0;font-size: 12px;}body{background-color:#f5f5f5;}.top{width:100%;height:27px;background: url(img/top_bg.jpg)  repeat-x;}.top_content{margin:0 auto;width:1000px;}.top_content li{line-height: 27px;float:right;width:70px;list-style-image:url(img/li_bg.gif);}.wrap{width:1000px;margin: 0 auto;}.logo{background-color:#fff;height:80px;overflow:hidden;/*网友指导指导 对父级清除浮动影响*/}.log_left{width:80px;float:left;}.log_right{float:right;width: 300px;height:28px;margin-top:30px;}.log_right img{vertical-align: middle;/*图片垂直居中*/margin-right:10px;}.tel{font-family: "微软雅黑";color:#c00;}/*导航部分制作*/.nav{height:40px;}.nav_left{float:left;height:40px;width:10px;background: url(img/nav_left.jpg) no-repeat;}.nav_mid{float:left;height:40px;width:980px;background: url(img/nav_bg.jpg) repeat-x;}.nav_right{float:left;height:40px;width: 10px;background: url(img/nav_right.jpg) no-repeat;}/*导航中间部分*/.nav_mid_left,.nav_mid_right{float:left;}.nav_mid_left{width:680px;}.nav_mid_left li{width:100px;font-size: 16px;float:left;line-height: 40px;text-align: center;list-style-type:none;/*去掉list前圆点*/}.nav_mid_left a:visited,.nav_mid_left a:link{text-decoration: none;font: 16px "微软雅黑" ;color:#fff;}.nav_mid_left a:hover,.nav_mid_left a:active{text-decoration: none;font: 16px "微软雅黑" ;color:#ff0;}.search_text{height:25px;width:190px;background: url(img/search.jpg) no-repeat right;background-color: #fff;padding-right:25px;/*防止书写文字溢出影响图片*/margin-top: 5px;}.nav_mid_right{right:300px;}</style></head><body><div class="top"><div class="top_content"><ul><li>设为首页</li><li>加入收藏</li><li>联系我们</li></ul></div></div><!--top结束--><div class="wrap"><div class="logo"><div class="log_left"><img src="img/logo.jpg" alt="慕课网"／></div><div class="log_right"><img src="img/tel.jpg" alt="联系电话"／><span class="tel">24小时服务热线：123-456-7900</span></div></div><!--logo结束--><div class="nav"><div class="nav_left"></div><div class="nav_mid"><div class="nav_mid_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_mid_right"><form action="" method="post"><input type="text" class="search_text"></form></div></div><!--nav_mid结束--><div class="nav_right"></div></div><!--nav结束--></div><!--wrap结束--></body></html>

0 0