HTML网页设计 教学课件 ppt 作者 翁高飞、王鹏chapter5.pptVIP

Learning HTMLCSS第五章 CSS布局和HTML列表 目标 掌握如何进行CSS布局 掌握如何使用HTMl列表 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title一列固定宽度/title style type=text/css .layout{ border:2px solid #a9c9e2; background-color:#e8f5fe; height:200px; width:300px; } /style /head body div class=layout一列固定宽度/div /body 一列固定宽度 宽度：300px 高度：200px head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title一列自适应宽度/title style type=text/css .layout{ border:2px solid #a9c9e2; background-color:#e8f5fe; height:200px; width:80%; } /style /head body div class=layout一列自适应宽度/div /body 一列自适应宽度 200px 宽度为浏览器的80% head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title一列固定宽度居中/title style type=text/css .layout{ border:2px solid #a9c9e2; background-color:#e8f5fe; height:200px; width:300px; margin:0px auto; } /style /head body div class=“layout”一列固定宽度居中/div /body 一列固定宽度居中 margin属性用于控制对象的上、右、下、左四个方向的外边距 总结（1） 设置一个div的宽度属性为固定值:(width：300px；) 设置div的宽度属性为自适应值：(width：80%;) 设置div居中的属性值为：（margin） 当margin有四个参数表示：上、右、下、左（例：margin:10px 5px 15px 20px; ） 当margin有三个参数表示：上、左右、下（例：margin:10px 5px 20px; ） 当margin有两个参数表示：上下、左右（例：margin:10px 20px; ） 当margin有一个参数表示：四个外边距相等（例：margin:10px; ） margin有个值叫auto，表示让浏览器自动判断边距 纵向图文导航 横向图文列表 无序列表ul和有序列表ol 改变项目符号样式 用图片定义项目符号 横向图文列表 a:hover { color:#f00; } #layout ul li { float: left; width: 72px; text-align: center; } #layout ul li a img { padding: 1px; margin-bottom: 3px; border: 1px solid #999999; } #layout ul a:hover img { padding: 0px; border: 2px solid #CC9900; } 浮动后父容器高度自适应 当一个容器内元素都浮动后，它的高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。 总结 通过CSS样式对HTML列表的高级运用 改变项目符号样式（ list-style: ） 图片自定义项目符号（ list-style-image: ） 横向图文列表 父容器高度自适应（overflow:auto）