DAY2 2016-01-22
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DAY2 2016-01-22相关的知识，希望对你有一定的参考价值。
在知乎上看到手写div布局的问题就自己动手做了一些尝试，用了两种方法：1)死做；2)Flexbox
方法一：(死做)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>distributionTest</title> 7 <style> 8 *{ 9 margin:0; 10 padding:0; 11 } 12 body{ 13 max-width:100%; 14 } 15 div,header{ 16 border:10px solid #000; 17 } 18 .left-main-1,.left-main-2,.right-main{ 19 border:5px solid #000; 20 } 21 .container{ 22 width:960px; 23 margin:0 auto; 24 padding-top:20px; 25 background-color:#ddd; 26 border:0; 27 } 28 .clear{ 29 clear:both; 30 width:0; 31 height:0; 32 border:0; 33 } 34 header{ 35 width:920px; 36 height:80px; 37 margin:0 10px 20px 10px; 38 } 39 .left{ 40 float:left; 41 } 42 .right{ 43 float:right; 44 } 45 .sidebar{ 46 margin-left:20px; 47 border:none; 48 } 49 .left-top{ 50 width:260px; 51 height:260px; 52 margin-bottom:20px; 53 } 54 .left-main{ 55 width:260px; 56 height:700px; 57 } 58 .left-main-1{ 59 margin:15px 0 0 90px; 60 width:140px; 61 height:70px; 62 } 63 .left-main-2{ 64 margin:20px 0 0 120px; 65 width:110px; 66 height:70px; 67 } 68 .content{ 69 margin-right:40px; 70 border:0; 71 } 72 .right-top{ 73 margin-bottom:20px; 74 border:0; 75 } 76 .right-top-1{ 77 width:260px; 78 height:260px; 79 margin-right:35px; 80 } 81 .right-top-2{ 82 width:260px; 83 height:260px; 84 } 85 .right-main{ 86 width:583px; 87 height:712px; 88 } 89 </style> 90 </head> 91 <body> 92 <div class="container"> 93 <header></header> 94 <div class="sidebar left"> 95 <div class="left-top"> 96 </div> 97 <div class="left-main"> 98 <div class="left-main-1"></div> 99 <div class="left-main-2"></div> 100 </div> 101 </div> 102 <div class="content right"> 103 <div class="right-top"> 104 <div class="right-top-1 left"></div> 105 <div class="right-top-2 right"></div> 106 <div class="clear"></div> 107 </div> 108 <div class="right-main"></div> 109 </div> 110 <div class="clear"></div> 111 </div> 112 </body> 113 </html>
方法二：(Flexbox)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>distributionTest1</title> 7 <style> 8 *{ 9 margin:0; 10 padding:0; 11 box-sizing:border-box; 12 } 13 body{ 14 max-width:100%; 15 } 16 div,header{ 17 border:10px solid #000; 18 } 19 .container,.middle,.bottom{ 20 border:0; 21 } 22 .sidebar-1,.sidebar-2,.content{ 23 border:7px solid #000; 24 } 25 .container{ 26 width:960px; 27 margin:0 auto; 28 padding-top:10px; 29 background-color:#aaa; 30 } 31 header{ 32 width:940px; 33 height:160px; 34 margin-left:10px; 35 } 36 .middle{ 37 display:flex; 38 width:960px; 39 padding:10px 10px 10px 0; 40 flex-flow:row wrap; 41 align-item:stretch; 42 justify-content:space-around; 43 } 44 .mpart{ 45 width:290px; 46 height:290px; 47 } 48 .bottom{ 49 display:flex; 50 width:960px; 51 padding:10px 10px 10px 0; 52 flex-flow:row wrap; 53 align-item:stretch; 54 justify-content:space-around; 55 } 56 .sidebar{ 57 width:290px; 58 height:700px; 59 } 60 .sidebar-1{ 61 width:150px; 62 height:70px; 63 margin-top:20px; 64 margin-left:105px; 65 } 66 .sidebar-2{ 67 width:130px; 68 height:70px; 69 margin-top:10px; 70 margin-left:125px; 71 } 72 .content{ 73 width:600px; 74 } 75 </style> 76 </head> 77 <body> 78 <div class="container"> 79 <header></header> 80 <div class="middle"> 81 <div class="mpart"></div> 82 <div class="mpart"></div> 83 <div class="mpart"></div> 84 </div> 85 <div class="bottom"> 86 <div class="sidebar"> 87 <div class="sidebar-1"></div> 88 <div class="sidebar-2"></div> 89 </div> 90 <div class="content"></div> 91 </div> 92 </div> 93 </body> 94 </html>
可以明显看出，第二种方法简单了很多。Flexbox也是布局很好的一个工具，今天第一次接触就感受到了其简便性，很好用。
再者，今天还尝试了用jquery做回到顶部的效果，代码如下：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>jQuery-BackTop</title> 7 <script src="js/jquery-2.1.4.min.js"></script> 8 <style> 9 *{ 10 margin:0; 11 padding:0; 12 } 13 body{ 14 max-width:100%; 15 height:1200px;; 16 } 17 header{ 18 width:100%; 19 height:200px; 20 background-color: #ded122; 21 } 22 .content{ 23 width:100%; 24 height:800px; 25 background-color: #11ddee; 26 } 27 footer{ 28 width:100%; 29 height:200px; 30 background-color #1122dd; 31 } 32 #back-to-top{ 33 display:none; 34 position:fixed; 35 right:50px; 36 bottom:50px; 37 width:30px; 38 height:30px; 39 background-color:#000; 40 } 41 a{ 42 padding:15px 15px; 43 cursor:pointer; 44 } 45 </style> 46 </head> 47 <body> 48 <header></header> 49 <div class="content"></div> 50 <footer></footer以上是关于DAY2 2016-01-22的主要内容，如果未能解决你的问题，请参考以下文章[官方软件] Easy Sysprep v4.3.29.602 系统封装部署利器（2016.01.22）--skyfree大神