复大官网总结

一、使用到的技术

html5
css3
javascript
jquery
bootstrap
第三方jquery插件
@media实现响应式布局

二、根据设计稿设计内容的宽度

　　PC端设计稿宽度是1920px的，这是在设计的时候根据电脑的浏览器分辨率来定的。

　　页面主体宽度（内容宽度）设置为1200px，1200px是一个比较适合PC端显示器浏览的安全内容宽度，保证在宽度大于1200px分辨率的设备下浏览页面不会出现横向滚动条，页面有banner地方的宽度就设置为100%，设置百分比的好处是可以根据屏幕分辨率的大小自动缩放。

　　移动端设计稿宽度为750px,750px是iphone6的物理像素，也叫屏幕分辨率。移动端设计稿是按照设备的物理像素所给。

物理像素：

　　　　顾名思义，就是设备屏幕上的实际像素，也就是说这个手机被出厂造出来的时候，这个屏幕上有多少个像素点，它的物理像素就是多少；

设备独立像素：

　　　　也叫做逻辑像素（对于前端来说，和css像素是一样的），这个不同的设备是不一样的，在viewport为ideal-viewport模式时，如iphone6此时的viewport为375px，代表着我们在css中写375px就可以达到全屏的效果；

三、布局编写

3.1、页面整体结构

 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 、浮动，清除浮动，相对定位，绝对定位，固定定位这些布局技巧。

3.2、使用div进行布局相关知识点总结

3.2.1、div居中显示

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

div的居中显示也分为水平居中、垂直居中和水平垂直居中，div水平居中显示比较容易，最简单的实现方案就是：给元素定一个显示式的宽度，然后加上margin的左右值为auto。

div水平居中代码如下所示：

.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.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.3、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.4、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.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 }

参考资料

@media screen实现屏幕自适应内容详解

https://blog.csdn.net/zzqworkspace/article/details/72724402

移动前端开发之viewport的深入理解

https://www.cnblogs.com/2050/p/3877280.htm

posted @ 2018-09-22 23:22 PM探路者阅读(533) 评论(1) 编辑收藏举报

刷新页面返回顶部