復大官網總結

時間 2019-12-05

標籤復大總結简体版

原文原文鏈接

1、使用到的技術

html5
css3
javascript
jquery
bootstrap
第三方jquery插件
@media實現響應式佈局

2、根據設計稿設計內容的寬度

　　PC端設計稿寬度是1920px的，這是在設計的時候根據電腦的瀏覽器分辨率來定的。javascript

　　頁面主體寬度（內容寬度）設置爲1200px，1200px是一個比較適合PC端顯示器瀏覽的安全內容寬度，保證在寬度大於1200px分辨率的設備下瀏覽頁面不會出現橫向滾動條，頁面有banner地方的寬度就設置爲100%，設置百分比的好處是能夠根據屏幕分辨率的大小自動縮放。css

　　移動端設計稿寬度爲750px,750px是iphone6的物理像素，也叫屏幕分辨率。移動端設計稿是按照設備的物理像素所給。html

物理像素：

　　　　顧名思義，就是設備屏幕上的實際像素，也就是說這個手機被出廠造出來的時候，這個屏幕上有多少個像素點，它的物理像素就是多少；前端

設備獨立像素：

　　　　也叫作邏輯像素（對於前端來講，和css像素是同樣的），這個不一樣的設備是不同的，在viewport爲ideal-viewport模式時，如iphone6此時的viewport爲375px，表明着咱們在css中寫375px就能夠達到全屏的效果；html5

3、佈局編寫

3.一、頁面總體結構

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>頁面標題</title>
 6     <!--3：設置IE渲染方式默認爲最高(可選)-->
 7     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 8     <!--編寫響應式頁面
 9             1：設置Meta標籤
10             在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果
11             這段代碼的幾個參數解釋：
12             width = device-width：寬度等於當前設備的寬度
13             initial-scale：初始的縮放比例（默認設置爲1.0，即表明不縮放）
14             user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面）
15         -->
16     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
17     <!--由於IE8既不支持HTML5也不支持CSS3 Media，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果-->
18     <!--[if lt IE 9]>
19     <script src="http://apps.bdimg.com/libs/html5shiv/r29/html5.min.js"></script>
20     <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
21     <![endif]-->
22 </head>
23 <body>
24 <!--頁面容器div-->
25 <div class="container">
26     具體的頁面內容
27 </div>
28 </body>
29 </html>

整個網絡的佈局是根據美工的設計稿進行開發的，大量的使用了div、span、ul 、浮動，清除浮動，相對定位，絕對定位，固定定位這些佈局技巧。java

3.二、使用div進行佈局相關知識點總結

3.2.一、div居中顯示

居中效果在CSS中是很普通的效果，平時所看到的居中效果主要分爲三大類：水平居中、垂直居中和水平垂直居中。jquery

div的居中顯示也分爲水平居中、垂直居中和水平垂直居中，div水平居中顯示比較容易，最簡單的實現方案就是：給元素定一個顯示式的寬度，而後加上margin的左右值爲auto。css3

div水平居中代碼以下所示：bootstrap

.horizontalCenter {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

這種方法給知道的寬度元素設置居中是最方便不過了。瀏覽器

div垂直居中實現起來就相對麻煩一些，須要藉助絕對定位+margin負間距來實現，具體作法以下所示：

若是要居中的元素的寬/高是不變的或者說是肯定的，好比width=100px，height=100px，那麼設置div的position爲絕對定位(absolute)，而後設置的top=50%，left=50%，margin-top=-50px，margin-left=-50px便可。

div水平垂直居中代碼以下：

 1 .horizontalVerticalCenter{
 2     width:500px;/*寬度固定*/
 3     height: 200px;/*高度固定*/
 4     /*div絕對定位水平垂直居中【margin 負間距】當前最流行的使用方法*/
 5     position: absolute;
 6     left:50%;
 7     top:50%;
 8     margin-left:-250px;/*這裏的負間距根據width來定，值爲width/2，也就是width的一半*/
 9     margin-top:-100px;/*這裏的負間距根據height來定，值爲height/2，也就是height的一半*/
10 }

以上代碼就能夠實現div水平垂直居中顯示了。

若是隻是想讓div垂直居中顯示，那麼能夠設置left或者right爲0，margin-left不設置便可。

左垂直居中代碼以下：

1 .leftVerticalCenter{
2      width:200px;
3      height: 200px;
4      /*div絕對定位水平垂直居中【margin 負間距】當前最流行的使用方法*/
5      position: absolute;
6      left:0;
7      top:50%;
8      margin-top:-100px;/*這裏的負間距根據height來定，值爲height/2，也就是height的一半*/
9 }

右垂直居中代碼以下：

1 .rightVerticalCenter{
2      width:200px;
3      height: 200px;
4      /*div絕對定位水平垂直居中【margin 負間距】當前最流行的使用方法*/
5      position: absolute;
6      right:0;
7      top:50%;
8      margin-top:-100px;/*這裏的負間距根據height來定，值爲height/2，也就是height的一半*/
9 }

綜合案例代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <!--<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">-->
 6     <title>div居中操做</title>
 7     <style type="text/css">
 8         .container {
 9             margin: 0 100px; /*設置div居中顯示，距離上下邊距爲0，左右邊距爲100*/
10             height: 450px;
11             border: 1px solid red;
12             position: relative;
13         }
14 
15         .container .horizontalCenter{
16             width: 500px;
17             height: 100px;
18             background-color: red;
19             margin: 0 auto; /*設置div水平居中的關鍵代碼，左右邊距必須設置爲同樣*/
20             text-align: center; /*設置div2裏面的文本水平居中*/
21         }
22         /*div絕對定位水平垂直居中：
23         若是要居中的元素的寬/高是不變的或者說是肯定的，好比width/height=100px，
24         那麼設置absolute的top和left=50%，而後margin-left和margin-top=-50px便可*/
25         .container .horizontalVerticalCenter{
26             width:500px;/*寬度固定*/
27             height: 200px;/*高度固定*/
28             background:green;
29             text-align: center; /*設置裏面的文本水平居中*/
30             /*div絕對定位水平垂直居中【margin 負間距】當前最流行的使用方法*/
31             position: absolute;
32             left:50%;
33             top:50%;
34             margin-left:-250px;/*這裏的負間距根據width來定，值爲width/2，也就是width的一半*/
35             margin-top:-100px;/*這裏的負間距根據height來定，值爲height/2，也就是height的一半*/
36         }
37 
38         .container .leftVerticalCenter{
39             width:200px;
40             height: 200px;
41             background:blue;
42             text-align: center; /*設置裏面的文本水平居中*/
43             /*div絕對定位水平垂直居中【margin 負間距】當前最流行的使用方法*/
44             position: absolute;
45             left:0;
46             top:50%;
47             /*margin-left:-200px;*//*這裏的負間距根據width來定，值爲width/2，也就是width的一半*/
48             margin-top:-100px;/*這裏的負間距根據height來定，值爲height/2，也就是height的一半*/
49         }
50 
51         .container .rightVerticalCenter{
52             width:200px;
53             height: 200px;
54             background:gold;
55             text-align: center; /*設置裏面的文本水平居中*/
56             /*div絕對定位水平垂直居中【margin 負間距】當前最流行的使用方法*/
57             position: absolute;
58             right:0;
59             top:50%;
60             /*margin-left:-200px;*//*這裏的負間距根據width來定，值爲width/2，也就是width的一半*/
61             margin-top:-100px;/*這裏的負間距根據height來定，值爲height/2，也就是height的一半*/
62         }
63     </style>
64 </head>
65 <body>
66     <div class="container">
67         <div class="horizontalCenter">
68             我是水平居中的div
69         </div>
70         <div class="horizontalVerticalCenter">
71             我是水平垂直居中的div
72         </div>
73         <div class="leftVerticalCenter">
74             我是左垂直居中的div
75         </div>
76         <div class="rightVerticalCenter">
77             我是右垂直居中的div
78         </div>
79     </div>
80 </body>
81 </html>

效果以下圖所示：

3.2.二、div文本垂直居中

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>文本垂直居中</title>
  6     <style type="text/css">
  7         .div1{
  8             margin: 0 50px;
  9             height: 50px;
 10             line-height: 50px;/*設置行高和div的高度相同，這樣就可讓單行文本垂直居中*/
 11             border: 1px solid red;
 12         }
 13 
 14       /*  ul {
 15             list-style: none;
 16             padding: 0;
 17         }*/
 18 
 19         p {
 20             margin: 0;
 21             padding: 0;
 22         }
 23         /*（未知高度）多行文本垂直居中*/
 24         .div2{
 25             margin: 0 50px;
 26             /*設置上下的padding值同樣，實現多行文本垂直居中*/
 27             padding-top:25px;
 28             padding-bottom: 25px;
 29             border: 1px solid green;
 30             /*text-align: center;*//*水平居中*/
 31         }
 32 
 33         /*.div2 p {
 34             margin: 5px;
 35         }*/
 36 
 37         .wrap{
 38             margin: 0 50px;
 39             height:300px;/*固定高度*/
 40             display:table;/*div模擬成爲table，讓子div的vertical-align:middle屬性起做用*/
 41         }
 42         /*須要垂直居中的文本所在的div*/
 43         .content{
 44             vertical-align:middle;
 45             display:table-cell;
 46             border:1px solid #FF0099;
 47             background-color:#FFCCFF;
 48             width:760px;
 49         }
 50 
 51         .content p {
 52             padding: 5px;
 53         }
 54     </style>
 55 </head>
 56 <body>
 57     <fieldset>
 58         <legend>單行文本垂直居中</legend>
 59         <div class="div1">
 60             <p>若是一個容器中只有一行文字，對它實現垂直居中相對比較簡單，咱們只須要設置它的實際高度height和所在行的高度line-height相等便可。</p>
 61         </div>
 62     </fieldset>
 63     <fieldset>
 64         <legend>【未知高度】多行文本垂直居中——設置上下的padding值同樣便可</legend>
 65         <div class="div2">
 66             <p>第一行文本</p>
 67             <p>第二行文本</p>
 68             <p>第三行文本</p>
 69             <p>第四行文本</p>
 70         </div>
 71         <div class="div2">
 72             <ul>
 73                 <li>第一行文本</li>
 74                 <li>第二行文本</li>
 75                 <li>第三行文本</li>
 76                 <li>第四行文本</li>
 77             </ul>
 78         </div>
 79     </fieldset>
 80     <fieldset>
 81         <legend>【固定高度】多行文本垂直居中——模擬table方法</legend>
 82         <!--父div-->
 83         <div class="wrap">
 84             <!--須要垂直居中的文本所在的div-->
 85             <div class="content">
 86                 <p>css中垂直居中樣式vertical-align:middle只對標籤td、th、caption，
 87                     和內聯元素display設置爲inline/inline-block起做用，其餘的則不起做用。
 88                 </p>
 89                 <p>能夠用div來模擬成爲table，讓vertical-align:middle屬性起做用。</p>
 90                 <p>注意display:table和display:table-cell的使用方法，
 91                     前者必須設置在父元素上，後者必須設置在子元素上
 92                     所以咱們要爲須要垂直居中的文本所在的div再增長一個父div元素
 93                 </p>
 94             </div>
 95             <div class="content">
 96                 <p>第一行文本</p>
 97                 <p>第二行文本</p>
 98                 <p>第三行文本</p>
 99                 <p>第四行文本</p>
100             </div>
101             <div class="content">
102                 <ul>
103                     <li>第一行文本</li>
104                     <li>第二行文本</li>
105                     <li>第三行文本</li>
106                     <li>第四行文本</li>
107                 </ul>
108 
109             </div>
110         </div>
111     </fieldset>
112 </body>
113 </html>

3.2.三、div浮動

div浮動分爲左浮動和右浮動，div設置了浮動以後，會對佈局產生影響，必要的時候須要清除一下浮動，用下面的一個綜合案例演示一下div的浮動和清除浮動，代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>div浮動</title>
 6     <style type="text/css">
 7         fieldset{
 8             margin-top: 10px;
 9         }
10         .wrap1{
11             width: 800px;
12             height: 200px;/*設置了具體高度*/
13             margin: 0 auto;
14             border: 2px solid red;
15             padding: 10px;
16             text-align: center;
17         }
18         .wrap2{
19             width: 800px;
20             margin: 0 auto;
21             border: 2px solid burlywood;
22             padding: 10px;
23             text-align: center;
24         }
25         .leftFloat{
26             width: 200px;
27             height: 200px;
28             background-color: rebeccapurple;
29             float: left;/*左浮動*/
30         }
31         .rightFloat{
32             width: 200px;
33             height: 200px;
34             background-color: green;
35             float: right;/*右浮動*/
36         }
37 
38         .clearFloat{
39             clear: both;/*清除全部浮動*/
40         }
41     </style>
42 </head>
43 <body>
44     <fieldset>
45         <legend>
46             wrap1設置了固定高度，leftFloat和rightFloat分別設置了左右浮動
47         </legend>
48         <div class="wrap1">
49             wrap1
50             <div class="leftFloat">左浮動(leftFloat)div</div>
51             <div class="rightFloat">右浮動(rightFloat)div</div>
52         </div>
53         <p>
54             因爲父div(wrap1)設置了固定高度,因此leftFloat和rightFloat這兩個div即便設置了浮動仍是會正常顯示在父div(wrap1)內
55         </p>
56     </fieldset>
57     <fieldset>
58         <legend>
59             wrap2不設置高度，leftFloat和rightFloat分別設置了左右浮動
60         </legend>
61         <div class="wrap2">
62             wrap2
63             <div class="leftFloat">左浮動(leftFloat)div</div>
64             <div class="rightFloat">右浮動(rightFloat)div</div>
65         </div>
66         <p>
67             因爲父div(wrap2)不設置高度,因此leftFloat和rightFloat這兩個div因爲浮動緣由不在父div(wrap2)內顯示了
68         </p>
69     </fieldset>
70 
71     <fieldset>
72         <legend>
73             wrap2不設置高度，leftFloat和rightFloat分別設置了左右浮動,clearFloat清除浮動
74         </legend>
75         <div class="wrap2">
76             <div class="leftFloat">左浮動(leftFloat)div</div>
77             <div class="rightFloat">右浮動(rightFloat)div</div>
78             <div class="clearFloat">清除浮動(clearFloat)div</div>
79         </div>
80         <p>
81             父div(wrap2)雖然不設置高度,可是使用了clearFloat清除了左右浮動，因此leftFloat和rightFloat這兩個div即便設置了浮動也會在父div(wrap2)內顯示了
82         </p>
83     </fieldset>
84 
85 </body>
86 </html>

效果以下：

清除浮動總結：當父div沒有設置高度，子div又設置了浮動，那麼此時就要使用一個空div去清除浮動，保證下面的元素的佈局不受浮動的影響。

3.2.四、div定位

div的經常使用的定位操做主要是固定定位，相對定位，絕對定位，項目中用到了大量的定位操做，看下面的一個綜合案例，代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 6     <title>div定位操做</title>
 7     <style type="text/css">
 8 
 9         .container{
10             margin: 200px auto;
11             border: 2px solid red;
12             height: 600px;
13             position: relative;
14         }
15 
16         .div1{
17             position: relative;/*相對定位，元素框相對於以前正常文檔流中的位置發生偏移，而且原先的位置仍然被佔據。發生偏移的時候，可能會覆蓋其餘元素。*/
18             border: 2px solid green;
19             width: 150px;
20             height: 150px;
21             top:20px;
22             left:20px
23         }
24 
25         .div2{
26             position: absolute;/*絕對定位，元素框再也不佔有文檔流位置，而且相對於包含塊進行偏移(所謂的包含塊就是最近一級外層元素position不爲static的元素)*/
27             border: 2px solid blue;
28             width: 150px;
29             height: 150px;
30             top:100px;
31             left:100px
32         }
33 
34         .div3{
35             position: fixed;/*固定定位，它的偏移量是相對於視口的*/
36             border: 2px solid yellowgreen;
37             width: 500px;
38             height: 150px;
39             top:10px;
40             left:10px;
41             right: 10px;
42             overflow: hidden;
43         }
44 
45         .content{
46             margin: 0 auto;
47             border: 2px solid purple;
48             height: 400px;
49             position: relative;/*相對定位*/
50         }
51 
52         .div4{
53             position: absolute;/*絕對定位，元素框再也不佔有文檔流位置，而且相對於包含塊進行偏移(所謂的包含塊就是最近一級外層元素position不爲static的元素)*/
54             border: 2px solid cadetblue;
55             width: 150px;
56             height: 150px;
57             top:100px;
58             left:100px
59         }
60     </style>
61 </head>
62 <body>
63     <div class="container">
64         <div class="div1">div1(relative)</div>
65         <div class="div2">div2(absolute)</div>
66         <div class="div3">div3(fixed)</div>
67         <div class="content">
68             <div class="div4">
69                 div4(absolute)
70             </div>
71         </div>
72     </div>
73 </body>
74 </html>

效果圖以下：

3.三、響應式佈局相關知識點總結

響應式佈局主要是用到css3提供的@media進行媒體查詢，根據不一樣的設備分辨率編寫不一樣的css樣式，從而實如今不一樣的分辨率設備下運行顯示不一樣的效果。

 1 /*當頁面大於1200px時，大屏幕，主要顯示PC端*/
 2 @media (min-width: 1200px){
 3     //編寫針對PC端的樣式
 4     /**
 5         隱藏應用了這幾個樣式的移動端的元素
 6      */
 7     .logoImg2,.phone2,.menuIcon,.leftMenu,.bottomPhone{
 8         display: none;
 9     }
10 }
11 
12 /*在992 和1199 像素之間的屏幕裏，中等屏幕，分辨率低的PC*/
13 @media (min-width: 992px) and (max-width: 1199px){
14 
15 }
16 
17 /*在768 和991 像素之間的屏幕裏，小屏幕，主要是PAD*/
18 @media (min-width: 751px) and (max-width: 991px){
19 
20 }
21 
22 /*在480 和767 像素之間的屏幕裏，超小屏幕，主要是手機*/
23 @media (max-width: 750px){
24     /*移動端隱藏pc端應用了這些樣式的元素*/
25     .top,.search,.navigationBar,.logoImg,.bottom,.left{
26         display: none;
27     }
28 
29     /*針對移動端編寫的樣式*/
30     /**750px因此應限制下頁面的大小，因此最外層容器的盒子應該*/
31     .container{
32         position: relative;
33         width: 100%;
34         margin: 0 auto;
35         padding: 0;
36         min-height: 0;
37         overflow-x: hidden;
38         overflow-y: hidden;
39     }
40 }