css--布局实例

特征布局实例讲习

经过对前面知识点的巩固和加深，我们可以使用前面学习到的知识来制作实际开发中碰到的一些典型的布局，以此来达到综合应用知识的目的。

1、特征布局：翻页（所需知识点：盒模型、内联元素）

2、特征布局：导航条01（所需知识点：盒模型、行内元素布局）

3、特征布局：导航条02（所需知识点：盒模型、浮动、定位、字体对齐）

4、特征布局：图片列表（所需知识点：盒模型、浮动）

5、特征布局：新闻列表（所需知识点：盒模型、浮动）

课后练习

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>布局实例</title>
  9 
 10     <style type="text/css">
 11 
 12     /* 1、特征布局：翻页（所需知识点：盒模型、内联元素） */
 13         .pagenation{
 14             width:958px;
 15             height:40px;
 16             border:1px solid #000;
 17             margin:50px auto 0;
 18             text-align:center;  /* 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式*/
 19             line-height:8px; /* 8px=height:40px-padding:20px-font-size:12px */
 20             font-size:0px;  /* 和.pagenation a里的font-size:12px结合使用，去掉连接处空白 */
 21         }
 22 
 23         .pagenation a{
 24             display:inline-block;  /* 行内块元素*/
 25             background-color:gold;
 26             font-size:12px;
 27             font-family:'微软雅黑';
 28             text-decoration:none; /* 去掉下划线*/
 29             margin:5px 5px;
 30             padding:10px 10px;
 31         }
 32 
 33         .pagenation span{
 34             display:inline-block; /* 行内块元素*/
 35             font-size:12px; /* 必须要设置，不然看不到...*/
 36         }
 37 
 38         .pagenation a:hover{
 39             background-color:red;
 40             color:#fff
 41         }
 42 
 43 
 44     /* 2、特征布局：导航条01（所需知识点：盒模型、行内元素布局） */
 45         .menu{
 46             width:958px;
 47             height:40px;
 48             border:1px solid #000;
 49             margin:50px auto 0;
 50             padding:0px;
 51             text-align:center;
 52             line-height:40px;
 53             font-size:0px;
 54             list-style:none; /* 去掉li格式*/
 55         }
 56         .menu li{
 57            display:inline-block; /* 行内块元素*/
 58            margin:0 20px;
 59         }
 60 
 61         .menu li a{
 62             font-size:12px;
 63             text-decoration:none;
 64         }
 65 
 66         .menu li a:hover{
 67             background-color:gold;
 68             color:red;
 69         }
 70 
 71         .menu .line{
 72             font-size:12px; /* 必须要设置，不然看不到| */
 73         }
 74 
 75 /* 3、特征布局：导航条02（所需知识点：盒模型、浮动、定位、字体对齐） */
 76         .menu1{
 77             width:958px;
 78             height:40px;
 79             border:1px solid #000;
 80             margin:50px auto 0;
 81             padding:0px;
 82             background-color:#55a8ea;
 83             list-style:none; /* 去掉li格式*/
 84             position:relative;
 85         }
 86 
 87         .menu1 li{
 88             float:left;  /* 浮动*/
 89             width:100px;
 90             height:40px;
 91             text-align:center;
 92             line-height:40px;
 93         }
 94 
 95         .menu1 li a{
 96             /* font-size:14px;
 97             font-familiy:'微软雅黑'; */
 98             font:14px/40px '微软雅黑'; /* 用font写成一句*/
 99             color:#fff;
100             text-decoration:none;
101         }
102 
103         .menu1 .active{
104             background-color:#00619f; /*该元素颜色固定*/
105         }
106 
107         .menu1 li:hover{
108             background-color:#00619f;
109         }
110 
111         .menu1 .new{
112             width:33px;
113             height:20px;
114             background:url(../images/bg.jpg) -30px -30px no-repeat; /*装饰性图片使用背景图方法，而不应使用插入图片*/
115             position:absolute;
116             left:436px;
117             top:-13px;
118         }
119 
120         .menu1 .new:hover{
121             background:url(../images/bg.jpg) -30px -30px no-repeat; /*鼠标移动到.menu背景图还是这个不变*/
122         }
123 
124 /* 4、特征布局：新闻列表（所需知识点：盒模型、浮动） */
125         .news_list_con{
126             width:600px;
127             height:290px;
128             border:1px solid #ddd;
129             margin:50px auto 0;
130             overflow:hidden; /* 将.news_list_con ul里设置的margin:8px auto冒出来的最后一条线隐藏 */
131         }
132 
133         .news_list_con h3{
134             width:560px;
135             height:50px;
136             color:#000;   /* “新闻标题”颜色 */
137             border-bottom:1px solid #ddd; /* 只用块元素下方才有线条 */
138             margin:0px auto; /* 块元素相对于父级元素自动水平居中 */
139         }
140 
141         .news_list_con h3 span{  /* 设置“新闻标题”字体样式及下方红线 */
142             display:inline-block; /* 行内块元素 */
143             border-bottom:2px solid red;  /* “新闻标题”块元素只有下方有红线 */
144             padding:0 15px;  /* “新闻标题”左右两边有空白 */
145             font:18px/50px '微软雅黑'; / *“新闻标题”居中 */
146             position:relative;   /* 为了兼容性考虑 */
147         }
148 
149         .news_list_con ul{
150             list-style:none;
151             /* border:1px solid #ddd; */
152             width:560px;
153             height:238px;
154             padding:0px;
155             margin:8px auto; /* 块元素相对于父级元素自动水平居中，写成margin:6px auto可以将两条线完全重合成一条 */
156         }
157 
158         .news_list_con ul li{
159             height:38px;
160             border-bottom:1px solid #ddd;
161         }
162 
163         .news_list_con ul a{
164             float:left;
165             font:14px/38px '微软雅黑';
166             color:#000;
167             text-decoration:none;
168         }
169 
170         .news_list_con ul a:before{  /* 在a标签整体字体前面加上· */
171             content:'· ';
172         }
173 
174         .news_list_con ul a:hover{  /* 鼠标移动至a标签，字体变红 */
175             color:red;
176         }
177 
178         .news_list_con ul span{
179             float:right;  /* 日期向右浮动*/
180             font:14px/38px '微软雅黑';
181             color:#000;
182         }
183     </style>
184 </head>
185 <body>
186 
187 <div class="pagenation">
188     <a href="">第一页</a>
189     <a href="">1</a>
190     <a href="">2</a>
191     <a href="">3</a>
192     <a href="">4</a>
193     <span>...</span>
194     <a href="">17</a>
195     <a href="">18</a>
196     <a href="">19</a>
197     <a href="">20</a>
198     <a href="">下一页</a>
199 </div>
200 
201 <div>
202     <ul class="menu">
203         <li><a href="">首页</a></li>
204         <li class="line">|</li>
205         <li><a href="">网站建设</a></li>
206         <li class="line">|</li>
207         <li><a href="">网站建设</a></li>
208         <li class="line">|</li>
209         <li><a href="">网站建设</a></li>
210         <li class="line">|</li>
211         <li><a href="">网站建设</a></li>
212         <li class="line">|</li>
213         <li><a href="">网站建设</a></li>
214         <li class="line">|</li>
215         <li><a href="">网站建设</a></li>
216     </ul>
217 </div>
218 
219 <div>
220     <ul  class="menu1">
221         <li class="active"><a href="">首页</a></li>
222         <li><a href="">网站建设</a></li>
223         <li><a href="">程序开发</a></li>
224         <li><a href="">网络营销</a></li>
225         <li><a href="">企业VI</a></li>
226         <li><a href="">案例展示</a></li>
227         <li><a href="">联系我们</a></li>
228         <li class="new"></li>
229     </ul>
230 </div>
231 
232 <div class="news_list_con">
233     <h3><span>新闻列表</span></h3>
234     <ul>  <!--快捷键 ul>(li>a+span)*7 -->
235         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
236         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
237         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
238         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
239         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
240         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
241     </ul>
242 </div>
243 </body>
244 </html>

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>布局实例二</title>
  9 
 10     <style type="text/css">
 11         body,h3,ul{      /*清除所有相关标签的样式*/
 12             padding:0;
 13             margin:0;
 14         }
 15 
 16         li{
 17             list-style:none;
 18         }
 19 
 20 /* 1、特征布局：图片列表（所需知识点：盒模型、浮动） */
 21         .pic_list_con{
 22             width:960px;
 23             margin:50px auto 0;  /*居中*/
 24             border:1px solid #000;
 25             overflow:hidden;  /*隐藏.pic_list_con ul设置的width:1000px超出来的部分;*/
 26         }
 27 
 28         .pic_list_con h3{
 29             width:920px;
 30             height:50px;
 31             border-bottom:1px solid #000;
 32             margin:0px auto 0; /*居中*/
 33         }
 34         .pic_list_con h3 span{
 35             display:inline-block;
 36             font:18px/50px '微软雅黑';
 37             color:black;
 38             border-bottom:2px solid red;
 39             padding:0 15px;   /*为了撑大下划线*/
 40         }
 41 
 42         .pic_list_con ul{
 43             width:1000px;
 44             /* background-color:gold; */
 45             margin:20px auto 18px; /*左右居中，下方撑大20px,下方撑大18px */
 46         }
 47 
 48         .pic_list_con ul li{
 49             float:left;     /* 这里子元素无法撑开父元素，需要清除浮动*/
 50             margin:0px 8px 20px 20px;
 51         }
 52 
 53         /*清除浮动*/
 54         .clearfix:before,.clearfix:after{
 55             content:'';
 56             display:table;
 57         }
 58         .clearfix:after{
 59             clear:both
 60         }
 61         .clearfix{zoom:1}
 62 
 63 
 64 /* 2、特征布局：新闻列表（所需知识点：盒模型、浮动） */
 65         .news_list_con1{
 66             width:600px;
 67             height:290px;
 68             border:1px solid #ddd;
 69             margin:50px auto 0;
 70         }
 71 
 72         .news_list_con1 h3{
 73             width:560px;
 74             height:50px;
 75             color:#000;
 76             border-bottom:1px solid #ddd;
 77             margin:0px auto;
 78         }
 79 
 80         .news_list_con1 h3 span{
 81             display:inline-block;
 82             float:left;
 83             border-bottom:2px solid red;
 84             padding:0 15px;  /* “新闻标题”左右两边有空白 */
 85             font:18px/50px '微软雅黑'; / *“新闻标题”居中 */
 86             position:relative;   /* 为了兼容性考虑 */
 87         }
 88 
 89         .news_list_con1 h3 a{
 90             float:right;
 91             font:12px/30px '微软雅黑';  /* 和margin-top:20px 结合使用，使字体向下靠*/
 92             margin-top:20px;
 93         }
 94 
 95         .news_list_con1 ul{
 96             list-style:none;
 97             /* border:1px solid #ddd; */
 98             width:560px;
 99             height:238px;
100             padding:0px;
101             margin:6px auto; /* 写成margin:6px auto可以将两条线完全重合成一条 */
102         }
103 
104         .news_list_con1 ul li{
105             height:38px;
106             border-bottom:1px solid #ddd;
107             background:url(../images/p3.PNG) left center no-repeat; /*加 背景图，做图标用*/
108         }
109 
110         .news_list_con1 ul a{
111             float:left;
112             font:14px/38px '微软雅黑';
113             color:#000;
114             text-decoration:none;
115             text-indent:60px;   /* 和背景图结合使用，为了让背景图显示出来。不然的话文字会遮盖掉背景图 */
116             background:url(../images/p2.PNG) 20px center no-repeat; /* 再加一个背景图，做图标用*/
117         }
118 
119         .news_list_con ul a:hover{  /* 鼠标移动至a标签，字体变红 */
120             color:red;
121         }
122 
123         .news_list_con1 ul span{
124             float:right;  /* 日期向右浮动*/
125             font:14px/38px '微软雅黑';
126             color:#000;
127         }
128 
129     </style>
130 </head>
131 <body>
132 
133 <div class="pic_list_con">
134     <h3><span>图片展示</span></h3>
135     <ul class="clearfix">
136         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
137         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
138         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
139         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
140         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
141         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
142         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
143         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
144         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
145         <li><a href=""><img src="../images/p1.PNG" alt="商品图片"></a></li>
146     </ul>
147 </div>
148 
149 <div class="news_list_con1">
150     <h3><span>新闻列表</span><a>更多&gt;&gt;</a></h3>
151     <ul>  <!--快捷键 ul>(li>a+span)*7 -->
152         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
153         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
154         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
155         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
156         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
157         <li><a href="">特征布局：新闻列表（所需知识点：盒模型、浮动）</a><span>2019-11-09</span></li>
158     </ul>
159 </div>
160 </body>
161 </html>

posted on 2019-11-10 12:02 cherry_ning 阅读(141) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning

css--布局实例

导航

公告