16.CSS项目实战

1.代码

style.css

  1 * {
  2     margin: 0;
  3     padding: 0;
  4 }
  5 
  6 body {
  7     background-image: url("../images/bg.gif");
  8 }
  9 
 10 /*头部*/
 11 .header {
 12     width: 100%;
 13     height: 70px;
 14     background-color: #1B1C1D;
 15     position: fixed;
 16 }
 17 
 18 .header > .nav {
 19     width: 85%;
 20     margin: 0 auto;
 21     height: 100%;
 22 }
 23 
 24 /*标题*/
 25 .header > .nav > .title {
 26     height: 100%;
 27     line-height: 70px;
 28     float: left;
 29     width: 25%;
 30     color: #00B5AD;
 31     font-size: 30px;
 32     font-weight: bold;
 33 }
 34 
 35 /*标签*/
 36 .header > .nav > .label {
 37     float: left;
 38     height: 100%;
 39     width: 45%;
 40 }
 41 
 42 .header > .nav > .label > ul {
 43     list-style-type: none;
 44     color: #ABABAC;
 45 }
 46 
 47 .header > .nav > .label > ul > li {
 48     float: left;
 49     height: 36px;
 50     line-height: 36px;
 51     text-align: center;
 52     font-size: 18px;
 53     font-weight: bold;
 54     margin: 17px 15px 0 0;
 55     padding: 0 15px;
 56     border-radius: 10px;
 57 }
 58 
 59 .header > .nav > .label > ul > li:hover {
 60     background-color: #2D2E2F;
 61     color: #FFFFFF;
 62 }
 63 
 64 .header > .nav > .label > ul > .checked {
 65     background-color: #3D3E3F;
 66     color: #FFFFFF;
 67 }
 68 
 69 /*搜索*/
 70 .header > .nav > .search {
 71     height: 100%;
 72     width: 30%;
 73     float: left;
 74     cursor: pointer;
 75     position: relative;
 76 }
 77 
 78 .header > .nav > .search input {
 79     height: 36px;
 80     width: 70%;
 81     border-radius: 4px;
 82     border-width: 0;
 83     padding-left: 10px;
 84     outline: none;
 85     position: absolute;
 86     right: 0;
 87     top: 14px;
 88 }
 89 
 90 .header > .nav > .search img {
 91     height: 24px;
 92     position: absolute;
 93     right: 7px;
 94     top: 20px;
 95 }
 96 
 97 /*中间*/
 98 .main {
 99     width: 85%;
100     margin: 0 auto;
101     padding-top: 130px;
102 }
103 
104 /*左边*/
105 .main > .left {
106     width: 23%;
107     float: left;
108 }
109 
110 /*左边小窗口*/
111 .main > .left > .aside-box {
112     width: 100%;
113     background-color: #FFFFFF;
114     margin-bottom: 10px;
115 }
116 
117 .main > .left > .aside-box > .title {
118     width: 100%;
119     height: 38px;
120     color: #3D3D3D;
121     line-height: 38px;
122     padding: 0 16px;
123     font-weight: bold;
124 }
125 
126 .main > .left > .aside-box > .hr {
127     width: 100%;
128     height: 1px;
129     background-color: #DCDFE6;
130 }
131 
132 .main > .left > .aside-box > .content {
133     width: 100%;
134     padding: 8px 16px 16px 16px;
135 }
136 
137 /*最新文章*/
138 .main > .left > .aside-box > .content > ul {
139     width: 100%;
140     color: #333333;
141     list-style: none;
142     cursor: pointer;
143 }
144 
145 .main > .left > .aside-box > .content > ul > li {
146     margin-top: 8px;
147 }
148 
149 .main > .left > .aside-box > .content > ul > li:hover {
150     color: #CF3016;
151 }
152 
153 /*分类专栏*/
154 .main > .left > .aside-box > .class-content {
155     padding-bottom: 16px;
156     padding-top: 8px;
157 }
158 
159 .main > .left > .aside-box > .class-content > .class {
160     height: 20px;
161     line-height: 20px;
162     width: 100%;
163     margin-top: 8px;
164     cursor: pointer;
165 }
166 
167 .main > .left > .aside-box > .class-content > .class > .name {
168     float: left;
169     padding: 0 16px;
170     color: #333333;
171 }
172 
173 .main > .left > .aside-box > .class-content > .class > .name:hover {
174     float: left;
175     padding: 0 16px;
176     color: #CF3016;
177 }
178 
179 .main > .left > .aside-box > .class-content > .class > .number {
180     float: right;
181     padding: 0 16px;
182     font-size: 12px;
183     color: #858585;
184     height: 20px;
185     line-height: 20px;
186 }
187 
188 /*热门文章*/
189 .main > .left > .aside-box > .content > ul > li > .hot {
190     height: 20px;
191     line-height: 20px;
192     color: #333333;
193 }
194 
195 .main > .left > .aside-box > .content > ul > li > .hot:hover {
196     color: #CF3016;
197 }
198 
199 .main > .left > .aside-box > .content > ul > li > .red-number {
200     height: 12px;
201     line-height: 12px;
202     font-size: 12px;
203     color: #858585;
204     margin-top: 3px;
205 }
206 
207 /*联系博主*/
208 .main > .left > .aside-box > .img-content > img {
209     width: 90%;
210     margin: 16px 5%;
211 }
212 
213 /*右边*/
214 .main > .right {
215     width: 76%;
216     float: right;
217     background-color: #FFFFFF;
218 }
219 
220 /*筛选排序*/
221 .main > .right > .filter-soft-box {
222     width: 100%;
223     height: 47px;
224     border-bottom: 1px solid #000000;
225     font-size: 16px;
226 }
227 
228 /*筛选*/
229 .main > .right > .filter-soft-box > .filter {
230     height: 100%;
231     line-height: 47px;
232     width: 30%;
233     float: left;
234     margin-left: 24px;
235 }
236 
237 .main > .right > .filter-soft-box > .filter:hover {
238     color: #CF3016;
239 }
240 
241 .main > .right > .filter-soft-box > .filter input {
242     height: 18px;
243     width: 18px;
244     cursor: pointer;
245     vertical-align: middle;
246 }
247 
248 .main > .right > .filter-soft-box > .filter label {
249     cursor: pointer;
250 }
251 
252 /*排序*/
253 .main > .right > .filter-soft-box > .soft {
254     height: 100%;
255     line-height: 47px;
256     width: 60%;
257     float: right;
258 }
259 
260 .main > .right > .filter-soft-box > .soft > span {
261     float: right;
262     margin-right: 36px;
263 }
264 
265 .main > .right > .filter-soft-box > .soft > .soft:hover {
266     color: #CF3016;
267     cursor: pointer;
268 }
269 
270 .main > .right > .filter-soft-box > .soft > .name {
271     color: #858585;
272 }
273 
274 .color-red {
275     color: #CF3016;
276 }
277 
278 /*文章*/
279 .main > .right > .article {
280     width: 100%;
281     height: 112px;
282     cursor: pointer;
283     border-bottom: 1px solid #000000;
284     padding-top: 10px;
285 }
286 
287 .main > .right > .article:hover {
288     background-color: #F5F5F5;
289 }
290 
291 /*标题*/
292 .main > .right > .article > .title {
293     padding: 0 20px;
294     font-size: 18px;
295     font-weight: bold;
296     color: #3D3D3D;
297 }
298 
299 .main > .right > .article > .title:hover {
300     color: #CF3016;
301 }
302 
303 /*内容*/
304 .main > .right > .article > .content {
305     height: 39px;
306     overflow: hidden;
307     font-size: 14px;
308     color: #6B6B6B;
309     margin-top: 8px;
310     padding: 0 20px;
311 }
312 
313 /*文章底部*/
314 .main > .right > .article > .bottom {
315     padding: 0 20px;
316     margin-top: 8px;
317     font-size: 13px;
318     color: #6B6B6B;
319 }
320 
321 .main > .right > .article > .bottom .num {
322     color: #3399EA;
323     margin-left: 3px;
324 }
325 
326 .main > .right > .article > .bottom .point {
327     margin: 0 8px;
328 }
329 
330 /*分页*/
331 .main > .right > .page {
332     width: 100%;
333     height: 70px;
334     position: relative;
335 }
336 
337 .main > .right > .page > ul {
338     list-style-type: none;
339     position: absolute;
340     left: 50%;
341     margin-left: -140px;
342 }
343 
344 .main > .right > .page > ul > li {
345     float: left;
346     background-color: #EEEEEE;
347     color: #606266;
348     width: 30px;
349     height: 28px;
350     text-align: center;
351     line-height: 28px;
352     margin: 21px 0 0 10px;
353     font-size: 12px;
354     font-weight: bold;
355 }
356 
357 .main > .right > .page > ul > li:hover {
358     color: #CA0C16;
359     border: 1px solid #CA0C16;
360     cursor: pointer;
361 }
362 
363 /*选中*/
364 .main > .right > .page > ul > .checked {
365     background-color: #409EFF;
366     color: #FFFFFF;
367 }
368 
369 /*底部*/
370 .footer {
371     width: 100%;
372     height: 70px;
373     background-color: #1B1C1D;
374     clear: both;
375     line-height: 70px;
376     text-align: center;
377     color: #8C8C8D;
378     font-size: 15px;
379 }

index.html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>博客首页</title>
  6     <link rel="stylesheet" href="css/style.css">
  7 </head>
  8 <body>
  9     <!--头部-->
 10     <div class="header">
 11         <div class="nav">
 12             <div class="title">
 13                 码海无际
 14             </div>
 15             <div class="label">
 16                 <ul>
 17                     <li class="checked">首页</li>
 18                     <li>分类</li>
 19                     <li>标签</li>
 20                     <li>关于我</li>
 21                 </ul>
 22             </div>
 23             <div class="search">
 24                 <form method="post" action="no">
 25                     <input type="text" name="name" placeholder="搜索...">
 26                     <img src="images/search.png">
 27                 </form>
 28             </div>
 29         </div>
 30     </div>
 31     <!--中间-->
 32     <div class="main">
 33         <!--左边-->
 34         <div class="left">
 35             <div class="aside-box">
 36                 <div class="title">
 37                     最新文章
 38                 </div>
 39                 <div class="hr"></div>
 40                 <div class="content">
 41                     <ul>
 42                         <li>CSS文本属性</li>
 43                         <li>CSS三大特性</li>
 44                         <li>CSS背景属性</li>
 45                         <li>CSS列表属性</li>
 46                         <li>CSS标签显示模式</li>
 47                     </ul>
 48                 </div>
 49             </div>
 50             <div class="aside-box">
 51                 <div class="title">
 52                     分类专栏
 53                 </div>
 54                 <div class="hr"></div>
 55                 <div class="class-content">
 56                     <div class="class">
 57                         <div class="name">HTML</div>
 58                         <div class="number">11篇</div>
 59                     </div>
 60                     <div class="class">
 61                         <div class="name">CSS</div>
 62                         <div class="number">15篇</div>
 63                     </div>
 64                     <div class="class">
 65                         <div class="name">JavaScript</div>
 66                         <div class="number">21篇</div>
 67                     </div>
 68                     <div class="class">
 69                         <div class="name">MySql</div>
 70                         <div class="number">26篇</div>
 71                     </div>
 72                     <div class="class">
 73                         <div class="name">Java</div>
 74                         <div class="number">23篇</div>
 75                     </div>
 76                 </div>
 77             </div>
 78             <div class="aside-box">
 79                 <div class="title">
 80                     热门文章
 81                 </div>
 82                 <div class="hr"></div>
 83                 <div class="content">
 84                     <ul>
 85                         <li>
 86                             <div class="hot">CSS文本属性</div>
 87                             <div class="red-number">阅读数 16</div>
 88                         </li>
 89                         <li>
 90                             <div class="hot">CSS三大特性</div>
 91                             <div class="red-number">阅读数 16</div>
 92                         </li>
 93                         <li>
 94                             <div class="hot">CSS背景属性</div>
 95                             <div class="red-number">阅读数 16</div>
 96                         </li>
 97                         <li>
 98                             <div class="hot">CSS列表属性</div>
 99                             <div class="red-number">阅读数 16</div>
100                         </li>
101                         <li>
102                             <div class="hot">CSS标签显示模式</div>
103                             <div class="red-number">阅读数 16</div>
104                         </li>
105                     </ul>
106                 </div>
107             </div>
108             <div class="aside-box">
109                 <div class="title">
110                     联系博主
111                 </div>
112                 <div class="hr"></div>
113                 <div class="img-content">
114                     <img src="images/WeChat.jpg">
115                 </div>
116             </div>
117         </div>
118         <!--右边-->
119         <div class="right">
120             <!--筛选排序-->
121             <div class="filter-soft-box">
122                 <!--筛选-->
123                 <div class="filter">
124                     <form method="post" action="no">
125                         <input type="checkbox" name="original" value="original" id="original">
126                         <label for="original">只看原创</label>
127                     </form>
128                 </div>
129                 <!--排序-->
130                 <div class="soft">
131                     <span class="soft">按访问量</span>
132                     <span class="soft">按更新时间</span>
133                     <span class="soft color-red">默认</span>
134                     <span class="name">排序：</span>
135                 </div>
136             </div>
137             <!--文章-->
138             <div class="article">
139                 <div class="title">
140                     CSS浮动和清除浮动
141                 </div>
142                 <div class="content">
143                     1.普通流(normal flow)
144                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
145                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
146                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
147                     2.浮动(float)
148                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
149                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
150                     选择器{float:属性值;}
151                     属性值可选如下：
152                     left：元素向左浮动
153                     right：元素向右浮动
154                     none：元素不浮动（默认值）
155                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
156                 </div>
157                 <div class="bottom">
158                     <span class="data">2020-01-14 18:10:45</span>
159                     <span class="point">|</span>
160                     <span class="red-num">阅读数<span class="num">12</span></span>
161                     <span class="point">|</span>
162                     <span class="red-num">评论数<span class="num">12</span></span>
163                 </div>
164             </div>
165             <div class="article">
166                 <div class="title">
167                     CSS浮动和清除浮动
168                 </div>
169                 <div class="content">
170                     1.普通流(normal flow)
171                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
172                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
173                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
174                     2.浮动(float)
175                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
176                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
177                     选择器{float:属性值;}
178                     属性值可选如下：
179                     left：元素向左浮动
180                     right：元素向右浮动
181                     none：元素不浮动（默认值）
182                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
183                 </div>
184                 <div class="bottom">
185                     <span class="data">2020-01-14 18:10:45</span>
186                     <span class="point">|</span>
187                     <span class="red-num">阅读数<span class="num">12</span></span>
188                     <span class="point">|</span>
189                     <span class="red-num">评论数<span class="num">12</span></span>
190                 </div>
191             </div>
192             <div class="article">
193                 <div class="title">
194                     CSS浮动和清除浮动
195                 </div>
196                 <div class="content">
197                     1.普通流(normal flow)
198                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
199                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
200                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
201                     2.浮动(float)
202                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
203                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
204                     选择器{float:属性值;}
205                     属性值可选如下：
206                     left：元素向左浮动
207                     right：元素向右浮动
208                     none：元素不浮动（默认值）
209                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
210                 </div>
211                 <div class="bottom">
212                     <span class="data">2020-01-14 18:10:45</span>
213                     <span class="point">|</span>
214                     <span class="red-num">阅读数<span class="num">12</span></span>
215                     <span class="point">|</span>
216                     <span class="red-num">评论数<span class="num">12</span></span>
217                 </div>
218             </div>
219             <div class="article">
220                 <div class="title">
221                     CSS浮动和清除浮动
222                 </div>
223                 <div class="content">
224                     1.普通流(normal flow)
225                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
226                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
227                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
228                     2.浮动(float)
229                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
230                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
231                     选择器{float:属性值;}
232                     属性值可选如下：
233                     left：元素向左浮动
234                     right：元素向右浮动
235                     none：元素不浮动（默认值）
236                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
237                 </div>
238                 <div class="bottom">
239                     <span class="data">2020-01-14 18:10:45</span>
240                     <span class="point">|</span>
241                     <span class="red-num">阅读数<span class="num">12</span></span>
242                     <span class="point">|</span>
243                     <span class="red-num">评论数<span class="num">12</span></span>
244                 </div>
245             </div>
246             <div class="article">
247                 <div class="title">
248                     CSS浮动和清除浮动
249                 </div>
250                 <div class="content">
251                     1.普通流(normal flow)
252                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
253                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
254                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
255                     2.浮动(float)
256                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
257                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
258                     选择器{float:属性值;}
259                     属性值可选如下：
260                     left：元素向左浮动
261                     right：元素向右浮动
262                     none：元素不浮动（默认值）
263                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
264                 </div>
265                 <div class="bottom">
266                     <span class="data">2020-01-14 18:10:45</span>
267                     <span class="point">|</span>
268                     <span class="red-num">阅读数<span class="num">12</span></span>
269                     <span class="point">|</span>
270                     <span class="red-num">评论数<span class="num">12</span></span>
271                 </div>
272             </div>
273             <div class="article">
274                 <div class="title">
275                     CSS浮动和清除浮动
276                 </div>
277                 <div class="content">
278                     1.普通流(normal flow)
279                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
280                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
281                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
282                     2.浮动(float)
283                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
284                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
285                     选择器{float:属性值;}
286                     属性值可选如下：
287                     left：元素向左浮动
288                     right：元素向右浮动
289                     none：元素不浮动（默认值）
290                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
291                 </div>
292                 <div class="bottom">
293                     <span class="data">2020-01-14 18:10:45</span>
294                     <span class="point">|</span>
295                     <span class="red-num">阅读数<span class="num">12</span></span>
296                     <span class="point">|</span>
297                     <span class="red-num">评论数<span class="num">12</span></span>
298                 </div>
299             </div>
300             <div class="article">
301                 <div class="title">
302                     CSS浮动和清除浮动
303                 </div>
304                 <div class="content">
305                     1.普通流(normal flow)
306                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
307                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
308                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
309                     2.浮动(float)
310                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
311                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
312                     选择器{float:属性值;}
313                     属性值可选如下：
314                     left：元素向左浮动
315                     right：元素向右浮动
316                     none：元素不浮动（默认值）
317                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
318                 </div>
319                 <div class="bottom">
320                     <span class="data">2020-01-14 18:10:45</span>
321                     <span class="point">|</span>
322                     <span class="red-num">阅读数<span class="num">12</span></span>
323                     <span class="point">|</span>
324                     <span class="red-num">评论数<span class="num">12</span></span>
325                 </div>
326             </div>
327             <div class="article">
328                 <div class="title">
329                     CSS浮动和清除浮动
330                 </div>
331                 <div class="content">
332                     1.普通流(normal flow)
333                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
334                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
335                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
336                     2.浮动(float)
337                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
338                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
339                     选择器{float:属性值;}
340                     属性值可选如下：
341                     left：元素向左浮动
342                     right：元素向右浮动
343                     none：元素不浮动（默认值）
344                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
345                 </div>
346                 <div class="bottom">
347                     <span class="data">2020-01-14 18:10:45</span>
348                     <span class="point">|</span>
349                     <span class="red-num">阅读数<span class="num">12</span></span>
350                     <span class="point">|</span>
351                     <span class="red-num">评论数<span class="num">12</span></span>
352                 </div>
353             </div>
354             <div class="article">
355                 <div class="title">
356                     CSS浮动和清除浮动
357                 </div>
358                 <div class="content">
359                     1.普通流(normal flow)
360                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
361                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
362                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
363                     2.浮动(float)
364                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
365                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
366                     选择器{float:属性值;}
367                     属性值可选如下：
368                     left：元素向左浮动
369                     right：元素向右浮动
370                     none：元素不浮动（默认值）
371                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
372                 </div>
373                 <div class="bottom">
374                     <span class="data">2020-01-14 18:10:45</span>
375                     <span class="point">|</span>
376                     <span class="red-num">阅读数<span class="num">12</span></span>
377                     <span class="point">|</span>
378                     <span class="red-num">评论数<span class="num">12</span></span>
379                 </div>
380             </div>
381             <div class="article">
382                 <div class="title">
383                     CSS浮动和清除浮动
384                 </div>
385                 <div class="content">
386                     1.普通流(normal flow)
387                     这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
388                     CSS的定位机制有3种：普通流（标准流）、浮动和定位。
389                     普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
390                     2.浮动(float)
391                     元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
392                     在CSS中，通过float属性来定义浮动，其基本语法格式如下：
393                     选择器{float:属性值;}
394                     属性值可选如下：
395                     left：元素向左浮动
396                     right：元素向右浮动
397                     none：元素不浮动（默认值）
398                     浮动脱离标准流，俗称脱标，不占位置，会影响标准流，导致塌陷问题。浮动只有左右浮动。
399                 </div>
400                 <div class="bottom">
401                     <span class="data">2020-01-14 18:10:45</span>
402                     <span class="point">|</span>
403                     <span class="red-num">阅读数<span class="num">12</span></span>
404                     <span class="point">|</span>
405                     <span class="red-num">评论数<span class="num">12</span></span>
406                 </div>
407             </div>
408             <div class="page">
409                 <ul>
410                     <li>&lt;</li>
411                     <li class="checked">1</li>
412                     <li>2</li>
413                     <li>3</li>
414                     <li>4</li>
415                     <li>5</li>
416                     <li>&gt;</li>
417                 </ul>
418             </div>
419         </div>
420     </div>
421     <!--底部-->
422     <div class="footer">
423         Copyright &copy; 2020 - 2020 mahaiwuji.com 版权所有 冀ICP备20003140号-1
424     </div>
425 </body>
426 </html>

2.运行效果

posted @ 2020-03-15 23:11  码海无际  阅读(611)  评论(0)    收藏  举报