樂
喜
安
平

HTML5-06

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                                 &yen;15.9
 31                             </span>
 32                             <span class="oprice">
 33                                 &yen;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                                 &yen;15.9
 46                             </span>
 47                             <span class="oprice">
 48                                 &yen;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                                 &yen;15.9
 61                             </span>
 62                             <span class="oprice">
 63                                 &yen;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                                 &yen;15.9
 76                             </span>
 77                             <span class="oprice">
 78                                 &yen;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                                 &yen;15.9
 91                             </span>
 92                             <span class="oprice">
 93                                 &yen;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                                 &yen;15.9
106                             </span>
107                             <span class="oprice">
108                                 &yen;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                                 &yen;15.9
121                             </span>
122                             <span class="oprice">
123                                 &yen;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                             &yen;15.9
136                         </span>
137                         <span class="oprice">
138                             &yen;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                             &yen;15.9
151                         </span>
152                         <span class="oprice">
153                             &yen;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                                 &yen;15.9
166                             </span>
167                             <span class="oprice">
168                                 &yen;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 }

 

posted @ 2021-07-06 20:51  喵酱爱吃鱼  阅读(48)  评论(0)  编辑  收藏  举报