在知乎上看到手写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>
51 <div id="back-to-top"><a href="#top"></a></div>
52 <script>
53 $(function(){
54 $(function(){
55 $(window).scroll(function(){
56 if($(window).scrollTop() > 100){
57 $("#back-to-top").fadeIn(1000);
58 }
59 else{
60 $("#back-to-top").fadeOut(800);
61 }
62 });
63
64 $("#back-to-top").click(function(){
65 $(‘body,html‘).animate({scrollTop:0},1000);
66 return false;//stop defualt function
67 });
68 });
69 });//must focus on () and {}
70 </script>
71 </body>
72 </html>
时间： 2024-12-17 19:38:06