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

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

居中布局

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

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

????

解决方案：

方法一：子元素设置：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+)/, "[email protected]$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(./[email protected]);
        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.图片按照模块、业务、页面来划分

模块化

问题：页面模块化优点

??解答：

利于多人协同开发 

便于扩展和重用 

可读性，可维护性好

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

时间： 2024-08-11 07:44:40

《页面架构》课堂交流区问题汇总的相关文章

CSS课堂交流区问题汇总

问题一:如何实现浏览器兼容版的inline-block显示 display:inline-block;在ie6.ie7下只有设置在默认显示方式为inline的元素上才会生效,请实现兼容ie6.ie7的通用的方式. 使用display:inline-block属性:可以使行内元素或块元素能够变成行内块元素,简单直白点讲就是不加float属性就可以定义自身的宽.高,同时又能使该元素轻松在父元素居中显示! 如果是内联元素使用了inline-block,那所有的浏览器显示都是正常的.注:使用inline

前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

04.页面架构第1章--CSS Reset 第2章--布局解决方案居中布局多列布局全屏布局第3章--响应式浏览网页使用的设备屏幕大小迥异,如何保证页面在不同设备上都正常显示呢? -- 解决方法:响应式优点:无需为不同设备编写对应的页面 --> 降低开发成本.维护成本缺点:页面中某些部分在某些设备上会被隐藏(资源加载了,但是只是用CSS隐藏了) 为什么在手机端的页面会很小呢? 所有的移动端的页面都引入了viewport视窗刚开始所有的元素都是加载到一个比较大的viewport视

浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首

浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

requirejs + angular + angular-route 浅谈HTML5单页面架构众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无

页面架构

使用Axure设计App,使用WebStorm开发 – 构建页面架构在本文中,将继续介绍在 WebStorm 中开发,去实现App的功能需求. 就像盖房子一样,第一步需要把整个工程的页面结构先勾勒出来,先让各个页面流转起来,然后再去细化每个页面. 所有工程代码放在了 https://github.com/zhangsichu/DeliveryApp 同时上篇文章中创建的初始化工程,也Tag了 TheInitialProject,您可以使用 Git checkout 这个Tag, 也可以直接到:

ABP架构设计交流群-上海线下交流会的内容分享（有高清录像视频的链接）

点这里进入ABP系列文章总目录 ABP架构设计交流群-7月18日上海线下交流会内容分享因为最近刚换了工作,工作特别忙,很久没有更新博客了,真对不起关注我博客和ABP系列文章的朋友! 原计划在7月11日举行的ABP架构设计交流会,因受台风影响改期到7月18日举行了. 7月18日下午13:00,上海市普陀区云岭东路599弄11号楼15.16层,有来自全国各地的40位ASP.NET技术人才汇聚一堂,共同探讨交流ASP.NET技术的架构设计和ABP框架的运用. 感谢上海运图投资公司对本次ABP交流会的

使用vue+webpack的多页面架构（转+自己的情况）

按以下步骤可正常配置多页面架构记得安装 node-glob 安装命令:npm install node-glob --save-dev 文件附加 webpack.base.conf.js --参考more start 处 var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader

webpack4+react多页面架构

webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html,webpack-react-multi-page架构让你可以实现多页面架构,在项目开发中保证每个页面都可以热更新并且打包后有清晰的文件层次结构. Github地址项目架构技术使用 react16