例1-导航菜单：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>导航菜单</title> 6 <link rel="stylesheet" type="text/css" href="css/zixuereset.css" /> 7 <!-- <link rel="stylesheet" type="text/css" href="css/reset.css"/> --> 8 <link rel="stylesheet" type="text/css" href="css/nav.css" /> 9 </head> 10 <body> 11 <ul> 12 <div> 13 <li><a href="#">首页</a></li> 14 <li><a href="#">知识库</a></li> 15 <li><a href="#">论坛</a></li> 16 <li><a href="#">学员问答</a></li> 17 <li><a href="#">圈子</a></li> 18 <li><a href="#">实时课堂</a></li> 19 <li><a href="#">客户端下载</a></li> 20 <li><a href="#">帮助中心</a></li> 21 </div> 22 </ul> 23 </body> 24 </html>
两个css：一个去除默认样式，一个更改需要的样式
1 /* 并集选择器，去除默认样式 */ 2 html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,div{ 3 margin: 0; 4 /* 去掉外边距 */ 5 padding: 0; 6 /* 去掉内边距 */ 7 } 8 ul{ 9 list-style: none; 10 /* 去掉无序列表左边的点 */ 11 } 12 a{ 13 font-size: 12px; 14 /* 设置超链接默认字号 */ 15 text-decoration: none; 16 /* 去掉超链接的下划线 */ 17 color: black; 18 /* 设置默认字体颜色 */ 19 }
1 *{ 2 /* *代表所有标签 */ 3 /* border: 1px solid red; */ 4 } 5 div{ 6 text-align: center; 7 } 8 li{ 9 display: inline-block; 10 margin: 0 -3px; 11 /* 回怼两个横着的li之间的外边距 */ 12 } 13 ul{ 14 width: 610px; 15 /* 设置ul的宽度 */ 16 margin: 10px auto ; 17 /* 设置ul上下外边距 */ 18 background-color: #000000; 19 } 20 a{ 21 font-size: 14px; 22 padding: 0 14px; 23 /* 设置a的内边距 */ 24 /* background-color: black; */ 25 /* 给ul设置背景色即可,a和li不需要再设置 */ 26 color: white; 27 font-weight: bolder; 28 /* 字体设置:加粗 */ 29 display: inline-block; 30 height: 34px; 31 line-height: 34px; 32 } 33 a:hover{ 34 /* 设置当光标移至超链接标签时的状态 */ 35 background-color: red; 36 color: #efefef; 37 }
(以后zixuereset.css代码就不放上去了)
2.相对定位与绝对定位：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="css/abs.css"/> 7 </head> 8 <body> 9 <div id="outter"> 10 <div id="inner"> 11 12 </div> 13 </div> 14 </body> 15 </html>
css：
1 #outter{ 2 border: 5px solid red; 3 width: 200px; 4 height: 200px; 5 position: relative; 6 /* 相对定位 */ 7 top: 100px; 8 } 9 #inner{ 10 border: 5px solid green; 11 width: 100px; 12 height: 100px; 13 position: absolute; 14 /* 绝对定位-相对于static默认定位以外的第一个父元素进行定位 */ 15 /* 在这里如果取消outter的相对定位,则相对于body进行定位 */ 16 left: 30px; 17 /* 里层div距离外层div左边界的距离 */ 18 top: 30px; 19 /* 里层div距离waicengdiv上边界的距离 */ 20 }
2.1另一个绝对定位：
1 position: fixed; 2 /* 绝对定位-相对于浏览器窗口的位置 */ 3 top: 100px; 4 /* 与浏览器窗口上边界距离 */ 5 left: 100px; 6 /* 与浏览器窗口左边界距离 */ 7 }
*3.购买商品
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购买商品</title> <link rel="stylesheet" type="text/css" href="css/zixuereset.css" /> <link rel="stylesheet" type="text/css" href="css/goumaishangpin.css" /> </head> <body> <!-- 外层div --> <div id="main"> <!-- 底层图片 --> <div id="product"> <img src="img/pic1.jpg"> </div> <!-- 中间遮罩div --> <div id="middle"> </div> <!-- 上层ul(包含li) --> <ul id="buy"> <!-- 顶层a --> <li><a href="#"></a>立即购买</li> <li><a href="#"></a>加入购物车</li> <li><a href="#"></a>收藏</li> </ul> </div> </body> </html>
css
1 * { 2 /* border: 1px solid red; */ 3 } 4 5 /* 底层图片的设置 */ 6 #product { 7 height: 320px; 8 width: 320px; 9 position: relative; 10 /* 设置相对定位 */ 11 z-index: -1; 12 /* 设置层：底层 */ 13 } 14 15 /* 中间遮罩层的设置 */ 16 #middle { 17 height: 320px; 18 width: 320px; 19 background-color: gray; 20 opacity: 0.5; 21 /* 设置透明度 */ 22 position: relative; 23 /* 相对定位 */ 24 z-index: 0; 25 /* 设置层：中间层 */ 26 top: -320px; 27 /* 将遮罩层移至底层图片所在位置 */ 28 display: none 29 /* none：此元素不会被显示 */ 30 } 31 32 ul { 33 position: relative; 34 /* 相对定位 */ 35 z-index: 1; 36 /* 设置层:上层 */ 37 padding: 50px 0 0 60px; 38 /* 320-(60*3-10*4)/2 */ 39 top: -640px; 40 display: none; 41 /* 此元素不被显示 */ 42 } 43 44 li { 45 width: 200px; 46 height: 60px; 47 text-align: center; 48 line-height: 60px; 49 font-size: 20px; 50 background-color: yellow; 51 margin: 10px 0; 52 } 53 54 #main:hover #middle, 55 #buy { 56 /* 为main的一些后代设置鼠标悬停样式 */ 57 /* 当鼠标悬停时,中间遮罩区和购买区显现 */ 58 display: block; 59 /* block:此元素显示为块级元素,元素前后带有换行符 */ 60 } 61 62 #main { 63 width: 320px; 64 height: 320px; 65 } 66 67 li:hover { 68 /* border: 1px solid black; */ 69 } 70 71 /* */ 72 li a { 73 /* border: 1px solid black; */ 74 display: inline-block; 75 width: 200px; 76 height: 60px; 77 position: absolute; 78 /* a在li中，li中显示文本内容且位置已设好，故使用绝对定位 */ 79 z-index: 2; 80 /* 设置为顶层 */ 81 left: 60px; 82 }