《页面架构》课堂交流区问题汇总

时间：2016-06-29 11:21:38 阅读：376 评论：0 收藏：0 [点我收藏+]

标签：

本课程为网易云课堂 - - 前端开发工程师 - - 《页面架构》学习总结

居中布局

问题一：水平列表的底部对齐

如图所示，一个水平排列的列表，每项高度都未知，但要求底部对齐，有哪些方法可以解决呢？

???? 技术分享

解决方案：

方法一：子元素设置：display：inline-block + vertical-align:bottom

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>水平列表的底部对齐</title>
        <style type="text/css">
            .parent{
                height:500px;
                width:800px;
                border:1px solid #CCC;
                text-align:center;
                }
            .child{
                display:inline-block;
                vertical-align:bottom;
            }
            .child_a{
                width:150px;
                height:100%;
                background:red;
            }
            .child_b{
                width:150px;
                height:75%;
                background:green;
            }
            .child_c{
                width:150px;
                height:50%;
                background:black;
            }
            .child_d{
                width:150px;
                height:25%;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child child_a">我是最左边的</div>
            <div class="child child_b">我是老二，嘿嘿</div>
            <div class="child child_c">我是倒数第二！能看到我吗？</div>
            <div class="child child_d">我是倒数第一吆~</div>
        </div>
    </body>
    </html>

方法二：position:relative + 子元素：position:absolute + bottom：0

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>水平列表的底部对齐</title>
        <style type="text/css">
            .parent{
                height:500px;
                width:800px;
                border:1px solid #CCC;
                text-align:center;
                position:relative;
                }
            .child{
                position:absolute;
                bottom:0;    
            }                   
            .child_a{
                width:150px;
                height:100%;
                left:15px;
                background:red;
            }
            .child_b{
                width:150px;
                left:180px;
                height:75%;
                background:green;
            }
            .child_c{
                width:150px;
                left:345px;
                height:50%;
                background:black;
            }
            .child_d{
                width:150px;
                left:510px;
                height:25%;
                background:yellow;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="child child_a">我是最左边的</div>
            <div class="child child_b">我是老二，嘿嘿</div>
            <div class="child child_c">我是倒数第二！能看到我吗？</div>
            <div class="child child_d">我是倒数第一吆~</div>
        </div>
    </body>
    </html>

方法三：父元素：dispaly:flex + align-items:flex-end

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>水平列表的底部对齐</title>
        <style type="text/css">
            .parent{
                height:500px;
                width:800px;
                border:1px solid #CCC;
                text-align:center;
                display:flex;
                align-items:flex-end;
                }
            .child{
                margin-left:15px;
            }                   
            .child_a{
                width:150px;
                height:100%;
                background:red;
            }
            .child_b{
                width:150px;
                height:75%;
                background:green;
            }
            .child_c{
                width:150px;
                height:50%;
                background:black;
                   }
                   .child_d{
                          width:150px;
                          height:25%;
                          background:yellow;
                   }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="child child_a">我是最左边的</div>
            <div class="child child_b">我是老二，嘿嘿</div>
            <div class="child child_c">我是倒数第二！能看到我吗？</div>
            <div class="child child_d">我是倒数第一吆~</div>
        </div>
    </body>
    </html>

方法四：弹性盒模型

??相关重点文章推荐：

??《CSS3实战》笔记–弹性盒模型（一）

??《CSS3实战》笔记–弹性盒模型（二）

??《CSS3实战》笔记–弹性盒模型（三）

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>水平列表的底部对齐</title>
        <style type="text/css">
            .parent{
                height:500px;
                width:800px;
                border:1px solid #CCC;
                display:box;   //  设置为盒子显示
                display:-moz-box;
                display:-webkit-box;
                orient:horizontal;  //  定义父元素内子元素的流动
                -mozbox-orient:horizontal;
                -webkit-orient:horizontal;
                box-align:end;
                -moz-box-align:end;
                -webkit-box-align:end;
                }
            .child{

            }                   
            .child_a{
                width:200px;
                height:500px;
                background:red;
            }
            .child_b{
                background:green;
                width:200px;
                height:350px;
            }
            .child_c{
                background:black;
                height:250px;
                width:200px;
            }
            .child_d{
                width:200px;
                height:150px;
                background:yellow;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="child child_a">我是最左边的</div>
            <div class="child child_b">我是老二，嘿嘿</div>
            <div class="child child_c">我是倒数第二！能看到我吗？</div>
            <div class="child child_d">我是倒数第一吆~</div>
        </div>
    </body>
    </html>

问题二：实现一个幻灯布局

??一个幻灯片效果如图：

???? 技术分享

??已知结构如下：

<div class="slide">
    <!-- 图片省略 -->
    <!-- 以下是指示器 -->
    <div class="pointer"><i></i><i></i><i></i></div>
</div>

??要求如下：幻灯（slide）宽高未知，指示器（pointer）在底部且水平居中，距离底部10px，指示器中的圆直径为10px，个数未知，背景为黑色，间距为5px，请完成CSS。

??解答：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>幻灯图</title>
        <style type="text/css">
            .slide{            
                width:600px;
                height:300px;
                background:#9dc3e6;
                position:relative;
            }
            .pointer{
                position:absolute;
                left:50%;
                transform:translate(-50%);
                bottom:10px;
            }
            .pointer i{
                display:block;
                float:left;
                margin-right:5px;
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:black;
            }
            .pointer i:last-child{
                margin-right:0;
            }
        </style>
    </head>

    <body>
        <div class="slide">
        <!-- 图片省略 -->
        <!-- 以下是指示器 -->
            <div class="pointer">
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    </body>
    </html>

多列布局

问题一：一个全等四宫格的实现

??一个未知宽高的容器，要被均分为四个相同大小格子（即四个容器），且格子间有10px间距（即十字型空隙），有哪些方法可以解决呢？

???? 技术分享

??方法一：（效果不好，Firefox浏览器效果基本可以，需要css微调）

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>一个全等四宫格的实现</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            .parent{
                border:1px solid #CCC;
                margin:0 auto;
                width:420px;
                height:420px;
            } 
            .box{
                background:#009999;
                height:200px;
                width:200px;
                display:inline-block;            
            }
            .box:nth-child(1){
                margin:0 17px 0 0;
            }    
            .box:nth-child(even){
                margin:0 0 0 -2px;
            }
            .box:nth-child(3){
                margin:17px 17px 0 0;
            }                        
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="box box1"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>
        </div>
    </body>
    </html>

??方法二：（display：flex）

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>一个全等四宫格的实现</title>
        <style type="text/css">
            .parent{
                width:410px;
                height:410px;               
                border: 1px solid #CCC;
                display:flex;
                flex-direction:row;
                flex-wrap:wrap;
                justify-content:space-between;
            } 
            .box{
                width:200px;
                height:200px;
                background:#009999;                    
            }
            .box3{
                align-self:flex-end;
            }
            .box4{
                align-self:flex-end;
            }            
        </style>
    </head>
    <body>
        <div class="parent">            
                <div class="box box1"></div>
                <div class="box box2"></div>
                <div class="box box3"></div>
                <div class="box box4"></div>
        </div>
    </body>
    </html>

??方法三：box-sizing:border-box; background-clip:content-box;

    <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>一个全等四宫格的实现</title>
            <style type="text/css">
                html,body{height:100%;}            
                .parent{
                    width:50%;
                    height:50%;               
                    border: 1px solid #CCC;                
                } 
                .box{
                    background:#009999;    
                    float:left;
                    width:50%;
                    height:50%;            
                    box-sizing:border-box;
                    background-clip:content-box;                
                }
                .box1{
                    padding-right:10px;
                    padding-bottom:10px;
                }    
                .box2{
                    padding-bottom:10px;
                }
                .box3{
                    padding-right:10px;
                }                             
            </style>
        </head>
        <body>
            <div class="parent">            
                    <div class="box box1"></div>
                    <div class="box box2"></div>
                    <div class="box box3"></div>
                    <div class="box box4"></div>
            </div>
        </body>
        </html>

全屏布局

问题：已知HTML结构和效果图如下：

<div class="a">
    <div class="b">Hello World</div>
</div>

??假设以上父元素称为A，子元素称为B

???? 技术分享

??请写出CSS以实现以下弹窗需求：弹窗（B）固定在浏览器窗口中间，弹窗背景色为白色，弹窗宽高由其内容决定，弹窗四周为黑色半透明（0.5透明度）遮罩。

??HTML代码：

    <div class="a">
        <div class="b">
       <!-- 测试弹窗高度由内容决定
        <p>Hello World</p>
        <p>Hello World</p>
        -->
        Hello World
      </div>
    </div>

??CSS代码：

    .a {
      position: fixed;
      height: 100%;
      width: 100%;
      background-color: #000;
      opacity: 0.5;
      filter: alpha(opacity=50);
      }  
    .b {
      background-color: #fff;
      display: inline-block;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      }

响应式

高清屏的背景图片适配

??当我们把一个图标做成CSS中的背景图，在视网膜屏上预览时会发现图标是模糊的，所以我们会同时准备一个2倍大小的图标给高清屏，那么问题来了，怎么实现在普通屏下是普通背景图，而在高清屏下是用的高清图呢？

??解答：

方法一：<img> 标签引用的图片

??通过js做自动适配

    <img class="photo" src="./photo.jpg" style="width:300px;height:200px;" />
     <script type="text/javascript">$(document).ready(function () {
        if (window.devicePixelRatio > 1) {
            var images = $("img.photo");
            images.each(function(i) {
                var x1 = $(this).attr(‘src‘);
                var x2 = x1.replace(/(.*)(\.\w+)/, "$1@2x$2");
                $(this).attr(‘src‘, x2);
            });
        }
    });</script>

??Retina.js 提供了更加完善的解决方案，自动匹配屏幕分辨率的同时，还可以检测服务器上是否存有当前图片的 @2X 版本，以决定是否替换。

??优点：

    操作简单

    普通屏幕下不会加载 @2X 的大尺寸图片，节约带宽

??缺点：

    Retina 屏幕下，标准图片和高清的图片都会被加载

    图片在显示过程中会被重绘

    有些老版本浏览器下存在兼容问题（一些老版本浏览器如 IE6、7 会显示得非常失真）

??方法二：CSS的media标签

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
    #logo {
        background-image: url(./logo@2x.png);
        background-size: 100px auto;
    }}

??优点：

    只会加载匹配当前设备的最适图片

    跨浏览器兼容

??缺点：

    如果背景图片很多的话，需要编写非常冗长的代码

??方法三：css的image-set方法

    background-image: -webkit-image-set(url(./logo.png) 1x, url(./logo@2x.png) 2x);

??**优点：**css中编写，图片集中，代码量少
??缺点：存在兼容性问题，仅支持background-image属性，而不能使用在“ 技术分享 ”标签中，是css4的草案。

问题：完成响应式布局的实现

??已知一个自适应布局的HTML结构如下：

<div class="parent">
    <div class="side"></div>
    <div class="main"></div>
</div>

??请完成以下响应式要求：

默认情况，PC电脑（假设视窗都大于等于1000px）访问：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px。

技术分享

当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。

技术分享

当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。

技术分享

??解答

       <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>完成响应式布局的实现</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
                background-color: lightgray;
            }
            /* 默认情况：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px*/
            .parent {
                width: 960px;
                height: 100%;
                margin: 0 auto;
            }
            .side {
                float: left;
                background-color: lightblue;
                width: 300px;
                height: 100%;
            }
            .main {
                background-color: red;
                width: 650px;
                margin-left: 310px;
                height: 100%;
            }
            /* 当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。 */
            @media screen and (min-width: 400px) and (max-width: 1000px) {
                .parent {
                    width: 100%;
                }
                .main {
                    width: auto;
                }
            }
            /* 当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。 */
            @media screen and (max-width: 400px) {
                .parent {
                    width: 100%;
                }
                .side {
                    width: 100%;
                    float: none;
                }
                .main {
                    width: 100%;
                    margin-left: 0;
                    margin-top: 10px;
                }
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="side"></div>
            <div class="main"></div>
        </div>
    </body>
    </html>

页面优化

问题：页面优化的方法

减少请求。
减少文件大小。
提升页面性能。
提升可读性，维护性。
减少请求
- 图片合并（62%的内容是图片）
? ? 1）选择合适的图片格式（PNG，JPG）。

? ? 2）压缩图片（imageOptim,imageAlpha,JPEGmini）
- CSS合并
? ? 1）多个CSS文件合并为一个。

? ? 2）少量CSS样式内联

? ? 3）避免使用import（同步的单线程请求）的方式引入CSS文件。

? ? 4）值缩写。（margin,padding,border,border-radius,font,background）

? ? 5）省略值为0的单位。（0px,0%,0.5）

? ? 6）颜色值最短表示（red,rgb(255,255,0),rgba,#333）

? ?7）选择器合并(.m-logo,.m-var)

? ? 8）文件压缩（上线前，去空格）
页面性能优化
- 加载顺序（CSS放上面，JS放下面）
- 减少标签数量
- 选择器长度
- 耗性能属性（expression）
- 图片设置宽高
- 所有表现用CSS实现
可读性，可维护性
- 规范
- 语义化
- 尽量避免HACK
- 模块化
- 注释

问题：代码优化

??请对以下CSS进行优化:

    h1{font-weight: bold;}
    h2{font-weight: bold;}
    h3{font-weight: bold;width:100px;}
    .g-bd{
      border-top: 1px solid #000;
      border-right: 1px solid #f00;
      border-bottom: 1px solid #f00;
      border-left: 1px solid #000;
      color: #bbff22;
    }
    .m-tab{
      margin-top: 10px;
      margin-right: 10px;
      margin-bottom: 20px;
      margin-left: 10px;
      color: rgb(255,0,0);
    }
    .m-tab li a{
      display: block;
      padding: 0px 10px;
      font-family: "Microsoft YaHei", simsun;
      font-size: 20px;
      line-height: 1.5;
    }
    .m-side{
      width: 200px;
      background-image: url(bg.png);
      background-repeat: repeat-y;
      background-color: #ccc;
    }

??解答：

    h1,h2,h3{font-weight: bold;}
    h3{width:100px;}
    .g-bd{border: 1px solid #000;border-color: #000 #f00 #f00 #000;color: #bf2;}
    .m-tab{margin:10px 10px 20px;color: red;}
    .m-tab li a{display: block;padding: 0 10px;font: 20px/1.5 "Microsoft YaHei", simsun;}
    .m-side{width: 200px;background: #ccc url(bg.png) repeat-y;}

规范

??####问题：制订一份CSS规范

??解答：

一、文件规范

1.文件按照通用类和业务类进行归档

2.文件使用外联引入，其他一些样式使用内联引入

3.文件名采用小写字母，可适当加中划线，然后使用数字来表示版本

4.编码采用utf-8格式

二、注释规范

1.块状注释：统一缩进，在被注释对象之上

2.单行注释：文字两端空格，在被注释对象之上

3.行内注释：文字两端空格，分号之后

三、命名规范

1.采用分类命名，布局类以g-开头，实际内容以m-开头

2.命名具有可读性且长度适中，适当缩写

3.语义化命名方式

四、书写规范

1.多行书写，便于阅读

2.默认缩进为两个空格

3.css规则内一个空格

4.需要保留最后一个属性值的分号

5.属性书写顺序按照：位置属性——自身盒模型相关属性——显示属性 的顺序来书写

6.尽量少使用Hack，ie6采用_开头，ie67采用*开头，先写ie67的，再写ie6的

7.color命名采用十六进制，且尽量缩写

8.url()文件格式不加引号

五、其他规范

1.<!DOCTYPE html> 顶格开始文档声明

2.闭合标签均闭合，自闭合标签也需要闭合

3.属性采用单引号，readonly、checked等属性可以直接写，不用=""

4.采用缩进体现层级，正确嵌套，但不宜太深，影响性能

5.注释：<!-- A --> xxx <!-- /A -->

6.标签属性均小写

7.文件语义化命名，且不能过长

8.保留源文件

9.使用sprite技术来合并图片

10.图片按照模块、业务、页面来划分

模块化

问题：页面模块化优点

??解答：

利于多人协同开发 

便于扩展和重用 

可读性，可维护性好

灵活，快速，高效.不会出现样式污染

《页面架构》课堂交流区问题汇总

标签：

原文地址：http://blog.csdn.net/lovejulyer/article/details/51776938

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行