前端开发工程师

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平列表的底部对齐</title>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
        }
        .parent {
            display: flex;
            align-items:flex-end;
            height: 30%;
            width: 50%;
            margin: auto;
        }
        .children {
            float: left;
            width: 25%;
            margin-bottom: 10px;
        }
        #item_1 {
            height: 50%;
            background-color: #006899;
        }
        #item_2 {
            height: 33%;
            background-color: #9f0000;
        }
        #item_3 {
            height: 17%;
            background-color: #00970a;
        }
        #item_4 {
            height: 40%;
            background-color: #009999;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="children" id="item_1"></div>
        <div class="children" id="item_2"></div>
        <div class="children" id="item_3"></div>
        <div class="children" id="item_4"></div>
    </div>
</body>
</html>

实现一个幻灯布局

一个幻灯片效果如图：

已知结构如下：

</div>

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

.slide {
    display: flex;
    align-items:flex-end;
    height: 200px;
    width: 400px;
    margin: auto;
    margin-top: 200px;
    background-color: #9dc3e6;
}
.pointer {
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-bottom: 10px;
}
.pointer i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-style: solid;
    background-color: black;
    border-radius: 50%;
}

多列布局

全屏布局

第3章--响应式

浏览网页使用的设备屏幕大小迥异，如何保证页面在不同设备上都正常显示呢？

优点：无需为不同设备编写对应的页面 --> 降低开发成本、维护成本

缺点：页面中某些部分在某些设备上会被隐藏（资源加载了，但是只是用CSS隐藏了）

initial-scale为0时，初始化不会进行等比缩小
user-scalable为no时，用户无法手动缩放

1. 最基本要求：少用定宽属性，使用自适应（都是定宽则会出现水平滚动条）

2. 如果左边的菜单是定宽，右边的主内容为自适应，在电脑和pad端都可行，但是在手机端会出现主内容宽度过窄

想要实现菜单和主内容在手机端布局成上下排列（即布局方式改变了）-- 媒体查询 @media

使用@media媒体查询resolution的方式，设定图片不同分辨率的url即可

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

</div>

请完成以下响应式要求：

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

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

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

响应式的单元测验

第4章--页面优化

避免使用import方式引入css文件（每个import都会产生一个请求，且这些请求是串行的）

选择合适的图片格式：半透明的小图标：PNG；色彩绚丽尺寸比较大：JPG

将css文件放在<head>中，在head中找到css文件进行下载并解析；当在body中遇到相应元素时，就可以直接将解析好的对应css样式应用到元素上；这样用户看到的页面就很顺畅

如果将css文件放到底部的话，很可能第一次渲染的时候没有将这些样式应用到元素上

将js文件放在<body>的底部，因为js的加载和执行会阻塞其他资源的加载和页面的执行和渲染，而且js的很多逻辑也是等到页面加载完成后才开始处理的

减少标签数量：标签数量很多，当js遍历页面的DOM时会对性能产生影响；对可读性也有提升

比如expression的计算量较大、filter、border-radius、box-shadow、gradients等

因为：浏览器在解析html代码时，有可能在图片下载完成前就对页面的布局进行了定位，如果没有给图片设置固定宽高或原图宽高与设置宽高不同，浏览器在图片下载完成后，需要进行回流和重绘，将图片重新渲染一遍。

能用css实现的尽量都用css来实现，比如选中状态的样式可以通过css或js实现，尽量使用css

语义化：对搜索引擎和屏幕阅读器友好，也能增加可读性和可维护性

尽量避免hack：有的时候为了兼容不同浏览器会进行一些hack，需要想一下是否有别的方式代替hack，如果没有办法或代价比较大的时候才用hack的方式；hack的方式也要统一，比如对IE6就用*号、对IE7就用_号。

模块化：把页面中一系列相关的部分做成一个模块，比如导航模块、列表模块等

1. h1, h2, h3中font-weight属性重复
2. .g-bd中border属性可简写
3. .g-bd中color属性可缩短表示
4. .m-tab中margin属性可简写
5. .m-tab中color属性可缩短表示
6. .m-tab li a 选择器可省略中间的li (甚至.m-tab也可以省略)
7. .m-tab li a中padding的0px的单位可省略
7. .m-tab li a中的font属性可简写
8. .m-side中background属性可简写

第5章--规范与模块化

每个工程师都有自己的规范，人员的更替，使得后期维护成本提高

规范

行内样式：不推荐--表现与内容分离（但是某些时候必须用到）

比如对于布局类样式，可以使用"g-"作为前缀等等自定义命名规则

单行与多行：单行：节省空间、编辑器可能形成水平滚动条；多行：文件可能需要竖直滚动条

空格与分号：缩进：2个或4个空格；规则内空格，比如key-value之间的空格等；需要保留最后一个属性的分号（为了避免不必要的错误）

文本属性和其他修饰：font, text-align, text-decoration, vertical-align, white-space, color, background等

值格式：统一属性值格式，比如颜色（一般选择#xxx的形式）；无引号/单引号/双引号

属性：选择双引号还是单引号；某些属性是否写属性值，比如: <input readonly>还是<input readonly="readonly">

层级：用缩进体现层级，提高可读性；标签正确嵌套(比如<ul>下嵌套<li>)，且不要太深--性能问题

注释：比如使用什么格式？如注释头注释尾  ......

图片合并：尽可能使用sprite技术，指定划分方式，如按模块、按业务等

模块化

在学完了本课程后，推荐大家学习网易内部的CSS规范以及模块化方案——NEC：

用模块化的思想实现下图所示导航（写出html和css代码，CSS只需写出选择器）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块化实现</title>
    <style type="text/css">
        .m-nav {}
        .m-nav .m-elem {}
        .m-nav .selected {}
    </style>
</head>
<body>
    <ul class="m-nav">
        <li class="m-elem seleted">分类方法</li>
        <li class="m-elem">命名规则</li>
        <li class="m-elem">代码格式</li>
        <li class="m-elem">优化方案</li>
        <li class="m-elem">最佳实践</li>
        <li class="m-elem">典型错误</li>
    </ul>
</body>
</html>

前端开发工程师

04.页面架构

第1章--CSS Reset

第2章--布局解决方案

居中布局

水平列表的底部对齐