读书编程笔记网页首页制作

㈠HTML部分代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>读书编程笔记</title>
  6     <link rel="stylesheet" href="reset.css">
  7     <link rel="stylesheet" href="index.css">
  8     <link rel="stylesheet" href="//at.alicdn.com/t/font_1645816_1nr1zte6d1j.css">
  9     <link rel="shortcut icon" type="image/x-icon" href="img/favicon1.ico">
 10 </head>
 11 <body>
 12     <!--头部区域-->
 13     <header class="header">
 14         <div class="container clearfix">
 15             <!--左边区域-->
 16             <div class="read left">
 17                 <a href=""><span>读书编程笔记</span></a>
 18             </div>
 19 
 20             <!--中间区域-->
 21             <div class="search left ">
 22                 <div>
 23                     <ul class="right-menu-list left clearfix">
 24                         <li class="left">
 25                             <a href="">
 26                                 <span>课程</span>
 27                             </a>
 28                         </li>
 29                         <li class="left">
 30                             <a href="">
 31                                 <span>个人中心</span>
 32                             </a>
 33                         </li>
 34                         <li class="left">
 35                             <a href="">
 36                                 <span>刷题</span>
 37                             </a>
 38                         </li>
 39                     </ul>
 40 
 41                     <form class="right">
 42                         <input type="text" class="txt" placeholder="找课程">
 43                         <button class="btn right">
 44                             <span>GO</span>
 45                         </button>
 46                     </form>
 47                 </div>
 48             </div>
 49 
 50             <!--右边区域-->
 51             <div class="denglu right">
 52                 <a href="">
 53                     <span>登录</span>
 54                     <span>/</span>
 55                     <span>注册</span>
 56                 </a>
 57             </div>
 58         </div>
 59     </header>
 60 
 61     <!--页头-->
 62     <nav class="nav">
 63         <h1>读书编程笔记-让学过的东西不再忘记！</h1>
 64         <h3>最短的学习时间，最高效的学习方法。</h3>
 65     </nav>
 66 
 67     <!--导航栏-->
 68     <div class="banner">
 69         <div class="banner-list">
 70             <ul class="clearfix">
 71                 <li>
 72                     <a href="" class="first iconfont icon-kechengguanli"></a>
 73                     <span>课程</span>
 74                 </li>
 75 
 76                 <li>
 77                     <a href="" class="second iconfont icon-gerenzhongxin-zhong"></a>
 78                     <span>个人中心</span>
 79                 </li>
 80 
 81                 <li>
 82                     <a href="" class="third iconfont icon-kaodianshuati"></a>
 83                     <span>刷题</span>
 84                 </li>
 85 
 86                 <li>
 87                     <a href="" class="fouth iconfont icon-ceshi"></a>
 88                     <span>复习测试</span>
 89                 </li>
 90             </ul>
 91         </div>
 92     </div>
 93 
 94     <!--主体内容-->
 95     <div class="content">
 96         <!--网站介绍-->
 97         <div class="section">
 98             <div class="main">
 99                 <!--标题-->
100                 <div class="title">
101                     <h2 class="wang">网站介绍</h2>
102                 </div>
103 
104                 <!--上半部分-->
105                 <div class="top">
106                     <p>读书编程笔记是一个<span class="stuty">让学过的东西不再忘记的视频学习网站。</span>主要先将课程知识进行总结，然后配合<span class="quxian">艾宾浩斯遗忘曲线等各种复习学习算法，</span>以及其它各种智能化的刷题算法，来最大化的提高学习效率、节约时间、降低学习难度，最终达到让学过的知识不再忘记的效果。<a href="">本网站使用教程（必看）</a></p>
107                 </div>
108 
109                 <!--中间部分-->
110                 <div class="middle">
111                     <ul class="clearfix">
112                         <li>
113                         <a href="" class="one iconfont icon-fangzi"></a>
114                         <div>课程</div>
115                         <p>大量前端、后端、算法、大数据、人工智能等精品课程</p>
116                     </li>
117                         <li>
118                             <a href="" class="two iconfont icon-xiti"></a>
119                             <div>习题</div>
120                             <p>每个视频都配备了习题，那些习题就是对视频知识最好的总结</p>
121                         </li>
122                         <li>
123                             <a href="" class="three iconfont icon-zhineng"></a>
124                             <div>智能</div>
125                             <p>艾宾浩斯遗忘曲线算法，以及其它各种智能化的刷题算法</p>
126                         </li>
127                         <li>
128                             <a href="" class="four iconfont icon-kuaijiefangbian"></a>
129                             <div>方便</div>
130                             <p>电脑、平板、手机等多种终端完美支持，随时随地学习</p>
131                         </li>
132                         <li>
133                             <a href="" class="five iconfont icon-shijian"></a>
134                             <div>时间</div>
135                             <p>最大化的节约时间</p>
136                         </li>
137                         <li>
138                             <a href="" class="six iconfont icon-xiaoshuai"></a>
139                             <div>效率</div>
140                             <p>让学过的知识不再忘记</p>
141                         </li>
142                     </ul>
143                 </div>
144 
145                 <!--下半部分-->
146                 <div class="bottom">
147                     <p>
148                         大家在本网站刷视频的过程中，最好配合各种算法刷题同时进行，方能真正领悟学过不忘的精髓。 本网站会陆续推出各种前端、后端、算法、大数据、人工智能等精品课程， 后续也会推出各种娱乐化的学习方式，让你在玩中就把知识学了。</p>
149                 </div>
150             </div>
151         </div>
152 
153         <!--站长介绍-->
154         <div class="pp section">
155             <div class="main">
156                 <!--标题-->
157                 <div class="title">
158                     <h2 class="z">站长介绍</h2>
159                 </div>
160 
161                 <!--中间内容-->
162                 <div class="jie clearfix">
163                     <div class="zzl left">
164                         <img src="img/fry.png" alt="">
165                     </div>
166 
167                     <div class="zzr left">
168                         <h4>范仁义</h4>
169                         <p>西南大学本科毕业，专业第一，每年国奖，加拿大留学交换，建模（美赛二等奖，国赛特等奖）。 喜欢挑战，酷爱难的东西。每日反思，已有7年。每天可工作学习15小时。可实现一切网站功能效果。 第一份工作：华东师大图书馆自动化部。第二份工作：香港教育大学MIT部门。 对各种前端后端、算法、大数据、人工智能等都比较精通。 后续会在本网站上依次推出这些课程。</p>
170                         <p>技术博客：<a href="">https://www.cnblogs.com/Renyi-Fan</a></p>
171                         <ul>
172                             <li>
173                                 <span class="dui iconfont icon-zhengque1"></span>
174                                 <span>效率奇高</span>
175                             </li>
176                             <li>
177                                 <span class="dui iconfont icon-zhengque1"></span>
178                                 <span>注重反思</span>
179                             </li>
180                             <li>
181                                 <span class="dui iconfont icon-zhengque1"></span>
182                                 <span>喜欢挑战</span>
183                             </li>
184                         </ul>
185                     </div>
186                 </div>
187 
188             </div>
189         </div>
190 
191         <!--热门课程推荐-->
192         <div class="section">
193             <div class="main">
194                 <!--标题-->
195                 <div class="title">
196                     <h2 class="k">热门课程推荐</h2>
197                 </div>
198 
199                 <div class="tpn clearfix">
200                     <div class="z1 left">
201                         <img src="img/cover1.png " alt="">
202                         <div class="f1">
203                             <span>范仁义</span>
204                         </div>
205                         <div class="f2">
206                             <span>1课时</span>
207                         </div>
208                         <div class="f3">
209                             <a href="">本网站使用教程</a>
210                         </div>
211                         <div class="f4">
212                             <span>
213                                 <a href="" class="iconfont icon-zan"> 31</a>
214                                 <a href="" class="iconfont icon-xihuan"> 25</a>
215                                 <a href="" class="iconfont icon-bofang"> 755</a>
216                             </span>
217                         </div>
218                     </div>
219 
220                     <div class="z1 left">
221                         <img src="img/cover2.png " alt="">
222                         <div class="f1">
223                             <span>范仁义</span>
224                         </div>
225                         <div class="f2">
226                             <span>2课时</span>
227                         </div>
228                         <div class="f3">
229                             <a href="">html5课程</a>
230                         </div>
231                         <div class="f4">
232                             <span>
233                                 <a href="" class="iconfont icon-zan"> 3</a>
234                                 <a href="" class="iconfont icon-xihuan"> 1</a>
235                                 <a href="" class="iconfont icon-bofang"> 1372</a>
236                             </span>
237                         </div>
238                     </div>
239 
240                     <div class="z1 left">
241                         <img src="img/cover3.png " alt="">
242                         <div class="f1">
243                             <span>范仁义</span>
244                         </div>
245                         <div class="f2">
246                             <span>3课时</span>
247                         </div>
248                         <div class="f3">
249                             <a href="">css3课程</a>
250                         </div>
251                         <div class="f4">
252                             <span>
253                                 <a href="" class="iconfont icon-zan"> 3</a>
254                                 <a href="" class="iconfont icon-xihuan"> 1</a>
255                                 <a href="" class="iconfont icon-bofang"> 1086</a>
256                             </span>
257                         </div>
258                     </div>
259 
260                     <div class="z1 left">
261                         <img src="img/cover4.png " alt="">
262                         <div class="f1">
263                             <span>范仁义</span>
264                         </div>
265                         <div class="f2">
266                             <span>4课时</span>
267                         </div>
268                         <div class="f3">
269                             <a href="">javascript课程</a>
270                         </div>
271                         <div class="f4">
272                             <span>
273                                 <a href="" class="iconfont icon-zan"> 1</a>
274                                 <a href="" class="iconfont icon-xihuan"> 1</a>
275                                 <a href="" class="iconfont icon-bofang"> 1053</a>
276                             </span>
277                         </div>
278                     </div>
279                 </div>
280 
281             </div>
282         </div>
283 
284         <!--联系我们-->
285         <div class="bb section">
286             <div class="main">
287                 <!--标题-->
288                 <div class="title">
289                     <h2 class="l">联系我们</h2>
290                 </div>
291 
292                 <div class="wm clearfix">
293                     <div class="yx left">
294                         <i class="f5 left iconfont icon-mail-copy"></i>
295                         <div class="zb1">
296                             <sapn>站长邮箱</sapn>
297                         </div>
298                         <div class="zb2">
299                             <a href="">404006308@qq.com</a>
300                         </div>
301                     </div>
302 
303                     <div class="jlq left">
304                         <i class="f5 left iconfont icon-QQ1"></i>
305                         <div class="zb1">
306                             <span>QQ交流群</span>
307                         </div>
308                         <div class="yb2">
309                             <span>942327638</span>
310                         </div>
311                     </div>
312                 </div>
313             </div>
314         </div>
315     </div>
316 
317     <!--页脚区域-->
318     <footer class="footer">
319         <div>
320             <p>Copyright © 2019 fanrenyi.com 鄂ICP备 19019547号-1 读书编程笔记</p>
321         </div>
322     </footer>
323 </body>
324 </html>

View Code

㈡RESET部分代码

 1 /* http://meyerweb.com/eric/tools/css/reset/
 2    v2.0 | 20110126
 3    License: none (public domain)
 4 */
 5 
 6 html, body, div, span, applet, object, iframe,
 7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 a, abbr, acronym, address, big, cite, code,
 9 del, dfn, em, img, ins, kbd, q, s, samp,
10 small, strike, strong, sub, sup, tt, var,
11 b, u, i, center,
12 dl, dt, dd, ol, ul, li,
13 fieldset, form, label, legend,
14 table, caption, tbody, tfoot, thead, tr, th, td,
15 article, aside, canvas, details, embed,
16 figure, figcaption, footer, header, hgroup,
17 menu, nav, output, ruby, section, summary,
18 time, mark, audio, video {
19     margin: 0;
20     padding: 0;
21     border: 0;
22     font-size: 100%;
23     font: inherit;
24     vertical-align: baseline;
25 }
26 /* HTML5 display-role reset for older browsers */
27 article, aside, details, figcaption, figure,
28 footer, header, hgroup, menu, nav, section {
29     display: block;
30 }
31 body {
32     line-height: 1;
33 }
34 ol, ul {
35     list-style: none;
36 }
37 blockquote, q {
38     quotes: none;
39 }
40 blockquote:before, blockquote:after,
41 q:before, q:after {
42     content: '';
43     content: none;
44 }
45 table {
46     border-collapse: collapse;
47     border-spacing: 0;
48 }

View Code

㈢CSS部分代码

  1 /*首页通用样式开始*/
  2 body{
  3     font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  4     width: 100%;
  5 }
  6 
  7 .container span{
  8     color: #fff;
  9 }
 10 
 11 a{
 12     text-decoration: none;
 13 }
 14 
 15 .left{
 16     float:left;
 17 }
 18 
 19 .right{
 20     float:right;
 21 }
 22 
 23 .clearfix::after{
 24     content:"";
 25     display:block;
 26     clear:both;
 27 }
 28 
 29 .section1:nth-child(even){
 30     background:#f8f9fa;
 31 }
 32 
 33 .content .section .main .title{
 34     text-align: center;
 35     line-height: 1.5;
 36     padding: 15px;
 37     font-size: 25px;
 38     margin-bottom: 5px;
 39 }
 40 /*首页通用样式结束*/
 41 
 42 
 43 /*头部开始*/
 44 .header{
 45     height: 50px;
 46     top: 0;
 47     background-color: #6959CD;
 48     position: fixed;
 49 }
 50 
 51 .header .container{
 52     margin: 0 auto;
 53 }
 54 
 55 /*左边区域*/
 56 .header .read{
 57     height: 50px;
 58     font-size: 18px;
 59     font-weight: bold;
 60     line-height: 20px;
 61     padding-top: 15px;
 62     margin-left: 190px;
 63     margin-right: 15px;
 64 }
 65 
 66 /*中间区域*/
 67 .search .right-menu-list{
 68     padding: 15px 15px;
 69     font-size: 14px;
 70     line-height: 20px;
 71 }
 72 
 73 .search .right-menu-list li{
 74     margin-right:30px;
 75 }
 76 
 77 /*重置文本框*/
 78 input{
 79     border:none;
 80     outline:none;
 81     outline-offset: 0;
 82 }
 83 
 84 .search .right{
 85     margin-left: -15px;
 86     margin-right: 15px;
 87     position: relative;
 88 }
 89 
 90 .search input{
 91     padding: 6px 14px;
 92     line-height: 20px;
 93     margin-top: 9px;
 94     color: white;
 95     background: rgba(255,255,255,0.2);
 96 }
 97 
 98 .search .btn{
 99     outline:none;
100     outline-offset: 0;
101     background-color: #605CA8;
102     border: 1px solid white;
103     border-radius: 3px;
104     cursor: pointer;
105     position: absolute;
106     top: 14px;
107     right:-8px;
108 }
109 
110 .search .btn span{
111     font-size: 10px;
112     line-height: 18px;
113     text-align: center;
114 }
115 /*右边区域*/
116 .header .denglu{
117     height: 50px;
118     font-size: 14px;
119     line-height: 20px;
120     padding-top: 15px;
121     margin-left: 526px;
122     margin-right: 195px;
123 }
124 /*头部结束*/
125 
126 /*页头开始*/
127 .nav{
128     box-sizing: border-box;
129     background: url(img/nav-bg.jpg ) no-repeat center;
130     background-size: cover;
131     height: 355px;
132 }
133 
134 .nav{
135     text-align: center;
136     padding-left: 15px;
137     padding-right: 15px;
138     margin:0 auto;
139     color: whitesmoke;
140     padding-top: 160px;
141 }
142 
143 .nav h1{
144     font-size: 25px;
145     line-height: 35px;
146 }
147 
148 .nav h3{
149     font-size: 15px;
150     line-height: 20px;
151     margin-top: 10px;
152 }
153 
154 /*页头结束*/
155 
156 /*导航栏开始*/
157 .banner{
158     height: 125px;
159     background-color: #f5f4f9;
160     box-sizing: border-box;
161 }
162 
163 .banner .banner-list ul{
164     margin: 0 100px;
165 }
166 
167 .banner .banner-list{
168     margin: 0 100px;
169 }
170 
171 .banner .banner-list ul li{
172     float: left;
173     display: inline-block;
174     margin-top: 25px;
175     margin-right: 110px;
176     margin-left: 110px;
177 }
178 
179 .banner .banner-list ul li a{
180     border-radius: 50%;
181     width: 55px;
182     height: 55px;
183     display: block;
184     margin: 0 auto;
185     color: #fff;
186     text-align: center;
187     line-height: 55px;
188     font-size: 35px;
189 }
190 
191 .banner .banner-list ul li span{
192     margin-top: 5px;
193 }
194 
195 .banner .banner-list .first{
196     background-color: #4493f7;
197 }
198 
199 .banner .banner-list .second{
200     background-color: #fd7a49;
201 }
202 
203 .banner .banner-list .third{
204     background-color: #6f68df;
205 }
206 
207 .banner .banner-list .fouth{
208     background-color: #7fd02b;
209 }
210 
211 .banner .banner-list ul li span{
212     display: block;
213     text-align: center;
214     padding-top: 5px;
215     font-size: 14px;
216 }
217 /*导航栏结束*/
218 
219 /*网站介绍开始*/
220 /*标题*/
221 .content .section .main .title .wang{
222     color: #ffa801;
223 }
224 
225 .content .section{
226     background-color: #f8f9fa;
227 }
228 /*上半部分*/
229 .content .section .main .top{
230     color:#777;
231     font-size: 14px;
232     line-height: 1.5;
233     padding-bottom: 25px;
234     margin:0 200px;
235 }
236 
237 .content .section .main .top p .stuty{
238     color: red;
239     font-weight: 600;
240 }
241 
242 .content .section .main .top p .quxian{
243     font-weight: 600;
244 }
245 
246 .content .section .main .top p a{
247     display: inline-block;
248     color: #3c8dbc;
249 }
250 
251 /*中间部分*/
252 .content .section .main .middle{
253     margin: 0 200px;
254     padding-bottom: 15px;
255 }
256 
257 .content .section .main .middle ul li{
258     box-shadow: 7px 7px 10px 0 rgba(76, 110, 245, .1);
259     text-align: center;
260     padding: 15px;
261     background-color: #fff;
262     float: left;
263     margin-right: 18px;
264     margin-bottom: 20px;
265     display: block;
266     width: 325px;
267 }
268 
269 .content .section .main .middle ul li a{
270     font: normal normal normal 14px/1 FontAwesome;
271 }
272 
273 .content .section .main .middle ul li .one{
274     color: #ff4f81;
275     text-align: center;
276     font-size: 30px;
277     margin-bottom: 10px;
278     cursor: pointer;
279 }
280 
281 .content .section .main .middle ul li div{
282     font-size: 20px;
283     font-weight: 600;
284     color: #333;
285     letter-spacing: 1px;
286     margin-bottom: 10px;
287     text-align: center;
288     line-height: 1.5;
289 }
290 
291 .content .section .main .middle ul li p{
292     height: 42px;
293     font-size: 15px;
294     color: #777;
295     margin-bottom: 5px;
296 }
297 
298 .content .section .main .middle ul li .two{
299     text-align: center;
300     font-size: 30px;
301     margin-bottom: 10px;
302     color: #00aeff;
303 }
304 
305 .content .section .main .middle ul li .three{
306     text-align: center;
307     font-size: 30px;
308     margin-bottom: 10px;
309     color: #2dde98;
310 }
311 
312 .content .section .main .middle ul li .four{
313     text-align: center;
314     font-size: 30px;
315     margin-bottom: 10px;
316     color: #fe5000;
317 }
318 
319 .content .section .main .middle ul li .five{
320     text-align: center;
321     font-size: 30px;
322     margin-bottom: 10px;
323     color: #FDC251;
324 }
325 
326 .content .section .main .middle ul li .six{
327     text-align: center;
328     font-size: 30px;
329     margin-bottom: 10px;
330     color: #6F68DF;
331 }
332 
333 /*下半部分*/
334 .content .section .main .bottom{
335     margin:0 200px;
336     padding-bottom: 30px;
337 }
338 
339 .content .section .main .bottom p{
340     color: #777;
341 }
342 /*网站介绍结束*/
343 
344 /*站长介绍开始*/
345 .content .pp{
346     background: #fff;
347 }
348 /*标题*/
349 .content .section .main .title .z{
350     color: #6F68DF;
351 }
352 /*左半部分*/
353 .content .section .main .jie{
354     padding-bottom: 30px;
355     height: 100%;
356     line-height: 1.5;
357     margin: 0 370px;
358 }
359 
360 .content .section .main .jie .zzl img{
361     width:350px;
362     height: auto;
363     vertical-align: middle;
364     display: inline-block;
365     padding-right: 15px;
366     padding-left: 15px;
367 }
368 /*右半部分*/
369 .content .section .main .jie .zzr{
370     width: 350px;
371     font-weight: 400;
372 }
373 
374 .content .section .main .jie .zzr h4{
375     font-size: 18px;
376     letter-spacing: 1px;
377     color: #212529;
378     text-transform: uppercase;
379     margin-top: 10px;
380 }
381 
382 .content .section .main .jie .zzr p{
383     color: #777;
384     margin-top: 10px;
385     font-size: 14px;
386 }
387 
388 .content .section .main .jie .zzr a{
389     color: #3c8dbc;
390 }
391 
392 .content .section .main .jie .zzr ul{
393     margin-top: 20px;
394     padding-left: 0;
395     margin-bottom: 10px;
396 }
397 
398 .content .section .main .jie .zzr ul li{
399     display: inline-block;
400     line-height: 25px;
401     letter-spacing: 1px;
402     margin-right: 200px;
403 }
404 
405 .content .section .main .jie .zzr ul li .dui{
406     color: #FC427B;
407     font: 14px/1 FontAwesome;
408     font-weight: bold;
409 }
410 
411 .content .section .main .jie .zzr ul li span{
412     margin-left: 5px;
413     color: #777;
414     font-size: 14px;
415     line-height: 25px;
416     letter-spacing: 1px;
417 }
418 /*站长介绍结束*/
419 
420 /*热门课程推荐开始*/
421 /*标题*/
422 .content .section .main .title .k{
423     color: #ff4f81;
424 }
425 /*图片*/
426 
427 .content .section .main .tpn{
428     padding-bottom: 30px;
429     margin: 0 200px;
430 }
431 
432 .content .section .main .tpn .z1{
433     position: relative;
434     margin-right: 19px;
435 }
436 
437 .content .section .main .tpn img{
438     width: 260px;
439     height: 197px;
440     vertical-align: middle;
441     box-shadow: 0 0 1px 1px #ccc;
442     border-radius: 10px;
443 }
444 
445 .content .section .main .tpn .f1{
446     position: absolute;
447     left: 7px;
448     top: 7px;
449     font-size: 14px;
450 }
451 
452 .content .section .main .tpn .f1 span{
453     padding: .2em .6em .3em;
454     font-size: 75%;
455     font-weight: 700;
456     color: #fff;
457     text-align: center;
458     background-color: #f39c12;
459     border-radius: .25em;
460 }
461 
462 .content .section .main .tpn .f2{
463     position: absolute;
464     left: 216px;
465     top: 7px;
466     font-size: 14px;
467 }
468 
469 .content .section .main .tpn .f2 span{
470     background-color: #f39c12;
471     padding: .2em .6em .3em;
472     font-size: 75%;
473     font-weight: 700;
474     color: #fff;
475     text-align: center;
476     border-radius: .25em;
477 }
478 
479 .content .section .main .tpn a{
480     text-align: center;
481     margin-top: 5px;
482     display: inline-block;
483     color: #F8626E;
484     font-size: 15px;
485     font-weight: 400;
486     line-height: 1.5;
487 }
488 
489 .content .section .main .tpn a:hover{
490     color: #72afd2;
491 }
492 
493 .content .section .main .tpn .f3, .content .section .main .tpn .f4{
494     margin-left: 80px;
495 }
496 
497 .content .section .main .tpn .f4 a{
498     font-size:12px;
499     padding-right: 2px;
500     color: #777;
501 }
502 
503 /*热门课程推荐结束*/
504 
505 /*联系我们开始*/
506 .content .section .main .title .l{
507     color: #00aeff;
508 }
509 
510 .content .bb{
511     background: #fff;
512 }
513 
514 .content .section .main .wm{
515     padding-bottom: 50px;
516     margin: 0 200px;
517 }
518 
519 /*左边区域*/
520 .content .section .main .wm .yx{
521     margin-left: 170px;
522 }
523 
524 .content .section .main .wm .f5{
525     display: inline-block;
526     font-size: 20px;
527     color: #fff;
528     background: #ffa801;
529     width: 60px;
530     height: 60px;
531     text-align: center;
532     line-height: 60px;
533     border-radius: 50%;
534 }
535 
536 .content .section .main .wm .zb1{
537     margin-left: 70px;
538     width: 150px;
539     font-weight: 600;
540     margin-top: 2px;
541     margin-bottom: 15px;
542 }
543 
544 .content .section .main .wm .zb1 span{
545     font-size: 16px;
546 }
547 
548 .content .section .main .wm .yx .zb2 a{
549     padding-left: 15px;
550     color: #3c8dbc;
551     font-weight: 400;
552     background-color: transparent;
553     cursor: pointer;
554     font-size: 13px;
555 }
556 
557 /*右边区域*/
558 .content .section .main .wm .jlq{
559     margin-left: 320px;
560 }
561 
562 .content .section .main .wm .jlq .yb2 span{
563     padding-left: 15px;
564     color: #333;
565     font-weight: 400;
566     font-size: 13px;
567 }
568 /*联系我们结束*/
569 
570 /*页脚开始*/
571 .footer{
572     background-color: #eed;
573 }
574 
575 .footer div{
576     padding: 10px 0;
577 }
578 
579 .footer p{
580     text-align: center;
581     font-size: 13px;
582     font-weight: 400;
583     height: 20px;
584     line-height: 20px;
585     color: #333;
586 }
587 /*页脚结束*/

View Code

㈣网页效果

具体参见：https://fanrenyi.com/

相关阅读:
使用不同方法输出一维整型数组a的各元素
 从键盘输入一个字符串与一个指定字符，将字符串中出现的指定字符全部删除
 指向函数的指针
 输入一个十进制正整数，将其转换成二进制、八进制、十六进制数输出
 java速成一篇博文搞定基础
 倒排索引lucene
Manacher's ALGORITHM: O(n)时间求字符串的最长回文子串
 C++对象内存布局2进阶篇C++ 对象的内存布局（下）
笔试面试设计模式&软件测试&软件工程
 字典树
原文地址：https://www.cnblogs.com/shihaiying/p/12337227.html