标签：浮动 06 yen 15.9 width HTML5 39.8 margin
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 }
标签：浮动,06,yen,15.9,width,HTML5,39.8,margin 来源： https://www.cnblogs.com/zhangyuanmingboke/p/14978872.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。