㈠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="">[email protected]</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>
㈡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 }
㈢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 /*页脚结束*/
㈣网页效果