1浮动
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>浮动1</title>
6 <style type="text/css">
7 * {
8 border: 1px solid black;
9 }
10
11 ul {
12 /* 去掉无序列表默认格式 */
13 margin: 0;
14 padding: 0;
15 list-style: none;
16 /* 背景色 */
17 background-color: red;
18 /* 重新计算ul的高度，恢复塌陷的高度 */
19 overflow: hidden;
20 padding: 0 10px;
21 width: 300px;
22 }
23
24 li {
25 /* 标签使用浮动，脱离标准文档流，ul高度塌陷 */
26 float: left;
27 margin: 0 0px 0 ;
28 width: 50px;
29 height: 30px;
30 text-align: center;
31 line-height: 30px;
32 left: 50px;
33 margin: 0px;
34 }
35 </style>
36 </head>
37 <body>
38 <ul>
39 <li>项目1</li>
40 <li>项目2</li>
41 <li>项目3</li>
42 <li>项目4</li>
43 </ul>
44 </body>
45 </html>
2.浮动与非浮动元素混合
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>浮动2-浮动与非浮动混合</title>
6 <style type="text/css">
7 *{
8 border: 1px solid black;
9 }
10 #div1,#div2,#div3{
11 width: 200px;
12 height: 200px;
13 /* 设置浮动:左侧 */
14 float: left;
15 }
16 #div1{
17 background-color: yellow;
18 }
19 #div2{
20 background-color: red;
21 }
22 #div3{
23 background-color: blue;
24 }
25 p{
26 /* clear写在非浮动元素上;效果:非浮动元素转至浮动元素下方 */
27 /* 清除浮动带来的影响;可选清除左侧右侧和两侧等;并重新计算父类塌陷的高度 */
28 clear: both;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="outter">
34 <div id="div1">
35
36 </div>
37 <div id="div2">
38
39 </div>
40 <div id="div3">
41
42 </div>
43 <p>1111111111111111111112412412123123123123</p>
44 </body>
45 </html>
3.图书列表
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 主要应用了浮动样式 --> 6 <title>图书列表</title> 7 <link rel="stylesheet" type="text/css" href="css/zixuereset.css" /> 8 <link rel="stylesheet" type="text/css" href="css/blist.css" /> 9 </head> 10 <body> 11 <div id="con"> 12 <div id="recommend"> 13 <h2 id="biaoti">推荐图书</h2> 14 <div id="page"> 15 <span>1</span> 16 <span>/</span> 17 <span>4</span> 18 </div> 19 </div> 20 <div id="blist"> 21 <ul> 22 <li> 23 <div class="bimage"> 24 <img src="img/图书列表/上班族.jpg"> 25 </div> 26 <p class="bname">上班族</p> 27 <p class="author">张三</p> 28 <p class="price"> 29 <span class="nprice"> 30 ¥15.9 31 </span> 32 <span class="oprice"> 33 ¥39.8 34 </span> 35 </p> 36 </li> 37 <li> 38 <div class="bimage"> 39 <img src="img/图书列表/人类简史.jpg"> 40 </div> 41 <p class="bname">人类简史</p> 42 <p class="author">张三</p> 43 <p class="price"> 44 <span class="nprice"> 45 ¥15.9 46 </span> 47 <span class="oprice"> 48 ¥39.8 49 </span> 50 </p> 51 </li> 52 <li> 53 <div class="bimage"> 54 <img src="img/图书列表/偷影子的人.jpg"> 55 </div> 56 <p class="bname">偷影子的人</p> 57 <p class="author">张三</p> 58 <p class="price"> 59 <span class="nprice"> 60 ¥15.9 61 </span> 62 <span class="oprice"> 63 ¥39.8 64 </span> 65 </p> 66 </li> 67 <li> 68 <div class="bimage"> 69 <img src="img/图书列表/平凡的世界.jpg"> 70 </div> 71 <p class="bname">平凡的世界</p> 72 <p class="author">张三</p> 73 <p class="price"> 74 <span class="nprice"> 75 ¥15.9 76 </span> 77 <span class="oprice"> 78 ¥39.8 79 </span> 80 </p> 81 </li> 82 <li> 83 <div class="bimage"> 84 <img src="img/图书列表/摆渡人.jpg"> 85 </div> 86 <p class="bname">摆渡人</p> 87 <p class="author">张三</p> 88 <p class="price"> 89 <span class="nprice"> 90 ¥15.9 91 </span> 92 <span class="oprice"> 93 ¥39.8 94 </span> 95 </p> 96 </li> 97 <li> 98 <div class="bimage"> 99 <img src="img/图书列表/文化苦旅.jpg"> 100 </div> 101 <p class="bname">文化苦旅</p> 102 <p class="author">张三</p> 103 <p class="price"> 104 <span class="nprice"> 105 ¥15.9 106 </span> 107 <span class="oprice"> 108 ¥39.8 109 </span> 110 </p> 111 </li> 112 <li> 113 <div class="bimage"> 114 <img src="img/图书列表/狼图腾.jpg"> 115 </div> 116 <p class="bname">狼图腾</p> 117 <p class="author">张三</p> 118 <p class="price"> 119 <span class="nprice"> 120 ¥15.9 121 </span> 122 <span class="oprice"> 123 ¥39.8 124 </span> 125 </p> 126 </li> 127 <!-- <li> 128 <div class="bimage"> 129 <img src="img/图书列表/管理信息.jpg" > 130 </div> 131 <p class="bname">管理信息</p> 132 <p class="author">张三</p> 133 <p class="price"> 134 <span class="nprice"> 135 ¥15.9 136 </span> 137 <span class="oprice"> 138 ¥39.8 139 </span> 140 </p> 141 </li> 142 <li> 143 <div class="bimage"> 144 <img src="img/图书列表/细节决定美丽.jpg" > 145 </div> 146 <p class="bname">细节决定美丽</p> 147 <p class="author">张三</p> 148 <p class="price"> 149 <span class="nprice"> 150 ¥15.9 151 </span> 152 <span class="oprice"> 153 ¥39.8 154 </span> 155 </p> 156 </li> --> 157 <li> 158 <div class="bimage"> 159 <img src="img/图书列表/萤火虫小巷.jpg"> 160 </div> 161 <p class="bname">萤火虫小巷</p> 162 <p class="author">张三</p> 163 <p class="price"> 164 <span class="nprice"> 165 ¥15.9 166 </span> 167 <span class="oprice"> 168 ¥39.8 169 </span> 170 </p> 171 </li> 172 </ul> 173 </div> 174 </div> 175 </body> 176 </html>
blist.css
1 /* 图书列表区样式 */
2 li{
3 /* 浮动:左侧 */
4 float: left;
5 margin-right: 30px;
6 margin-top: 10px;
7 /* 固定宽度 */
8 width: 160px;
9 }
10 img{
11 /* 固定高度 */
12 height: 160px;
13 }
14 ul{
15 width: 800px;
16 /* 重新计算高度,恢复li塌陷的高度 */
17 overflow: hidden;
18 /* 设置左内边距,使视觉上水平剧中 */
19 padding-left: 36px;
20 }
21 #con{
22 /* 首先固定宽度,否则默认100% */
23 width: 850px;
24 /* 其次规定左右外边距为自适应:则自动居中 */
25 margin: 20px auto;
26 }
27 p{
28 padding: 2px 0 ;
29 }
30 .author,.bname{
31 font-size: 18px;
32 text-align: center;
33 }
34 .oprice{
35 /* 中划线 */
36 text-decoration: line-through;
37 color: gray;
38 font-size: 12px;
39 margin-left: 10px;
40 }
41 .nprice{
42 font-size: 18px;
43 color: red;
44 /* 字体加粗 */
45 font-weight: bolder;
46 }
47 .price{
48 text-align: center;
49 }
50 .bimage{
51 text-align: center;
52 }
53 /* 分页区样式 */
54 #page{
55 /* 浮动:右侧 */
56 float: right;
57 }
58 #recommend{
59 width: 850px;
60 /* 恢复page翻页页码塌陷的高度 */
61 overflow: hidden;
62 margin-bottom: 14px;
63 }
64 #biaoti{
65 /* 将元素转换为内联块 */
66 display: inline-block;
67 /* 直接设置宽度不行,浮动了的页码上不来 */
68 /* width: 300px; */
69 padding: 0 0 0 20px;
70 background: url(../img/图书列表/laba.jpg);
71 /* 不填充 */
72 background-repeat: no-repeat;
73 font-size: 20px;
74 /* 背景图片位置:左侧 */
75 background-position: left;
76 }
77 #page span{
78 margin: 0 0 0 -4px;
79 font-size: 20px;
80 }
81 *{
82 /* border: 1px solid red; */
83 }