WY-页面架构

2015-08-24 本文已影响166人 ddai_Q

CSS reset

** 1、placeholder 颜色重置 **

:-moz-placeholder { color:#ccc !important; }
::-moz-placeholder { color:#ccc !important; }
:-ms-input-placeholder { color:#ccc !important; }
:-webkit-input-placeholder { color:#ccc !important; }

2、 input 右测小叉删除

input::-ms-clear{ display:none; }

Paste_Image.png

** 3、按钮按下后高亮暗色**

html{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

按钮

居中布局-水平居中

1、inline-block + text-align

demo

兼容IE6，7 加 *zoom:1;

** 2、table + margin **

demo

** 3、absolute + transform **

demo

transform IE6,7,8 兼容性问题，高级浏览器也要加私有前缀

** 4、 flex + justify-content**

demo

或者不用justify-content,用margin。设置 .child{ margin: 0 auto; }

IE6,7,8 flex兼容问题

居中布局-垂直居中

**1、table-cell + vertical-align **

 <div class="parent">
    <div class="child">DEMO</div>
</div>

CSS:

.parent{ display: table-cell; vertical-align: middle; }

vertical-align可以作用于inline,inline-block 以及 table-cell元素。
这种做法兼容IE8+

**2、absolute + transform **
CSS：

.parent{ position：relative; }
.child{  
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%);
}

兼容性

**3、flex + align-items **

.parent{
       display:flex;
       align-items: center;
 }

居中布局-水平、垂直同时居中

**1、inline-block + text-align + table-cell + vertical-align **

demo

兼容IE8+

**2、absolute + transform **

demo

**3、flex + justify-content + align-items **

demo

多列布局

HTML结构

**1、float + margin **

 .left {  float:left;  width: 100px; }
 .right { margin-left: 120px;  }

demo

优点：容易理解
缺点：IE6 不兼容，3像素； right是没有浮动的，如果right内容中有清楚浮动就会产生 bug

bug

修改版：float + margin + (fix)

float + margin + (fix)

优点：兼容性好
缺点：层级多

.left 里面设置position： relative；是为了提高left div的层级。

**2、float + overflow **

 .left{ 
       float: left;
       width: 100px;
       margin-right: 20px;
  }
  .right{ overflow: hidden; //触发BFC }

 缺点：IE6不支持

3、table

 .parent{ 
      display:table; 
      width: 100%;
      table-layout:fixed; //好处加速table的渲染，实现布局优先
  }
 .left, .right { 
       display: table-cell;
  }
  .left{ width:100px; padding-right:20px; }

**4、flex **

flex:<'flex-grow'>||<'flex-shirink'> || <'flex-basis'>

 .parent{ 
      display: flex ; 
  }
 .left { 
       width: 100px;
       margin-right: 20px;
  }
  .right{ flex: 1 ; } //等价于=flex:1 1 0; 增长因子和收缩因子都为1，基础宽度为0,那么剩余宽度都分配给right

缺点： CSS3 兼容性。根据内容判断，性能会有问题，做小范围布局，不适合大范围布局。

布局 - 不定宽 + 自适应

不定宽+自适应

**1、float + overflow **

  .left{ 
       float: left;
       width: 200px;
       margin-right: 20px;
  }
  .right{ overflow: hidden; //触发BFC }

效果

**2、table **

 .parent{ 
      display:table; 
      width: 100%;
  }
 .left, .right { 
       display: table-cell;
  }
  .left{ 
       width:0.1%;  //写的够小就行，不写1px的原因是IE8会有问题
       padding-right:20px; 
   }
  .left p{ width : 200px;}  //用内部元素撑开，宽度可以不定

兼容性：IE8+

3、flex 同上，强大，主要问题是兼容性问题

继续延生：
三列不定宽 + 自适应与两列的做法一样

等分布局

HTML结构

1、float

 .parent{  margin-left ：-20px; //为父元素增加20px宽度 }
 .column{
       float : left;
       width: 25%;
       padding-left : 20px;
       box-sizing : border-box;
  }

效果图

缺点：结构和样式稍微有点耦合性

2、table

结构

 .parent-fix{  margin-left ：-20px; //为父元素增加20px宽度 }
 .parent{ 
      display : table;
      width : 100%;
      table-layout : fixed;
  }     
  .column{
       float : left;
       width: 25%;
       padding-left : 20px;
       box-sizing : border-box;
  }

3、fix

 .parent{ 
      display : flex;
  }     
  .column{
      flex: 1;
  }
  .column+.column{  margin-left: 20px;  } //选择2，3，4

等高需求

1、table

上面自适应的table布局就具有登高的布局

2、flex
如上面自适应的例子，flex 天然等高

3、float

float

 .parent{  overflow : hidden; }
 .left, .right{
       padding-bottom : 9999px;
       margin-bottom : -9999px;
  }

优点是兼容性比较好
缺点是伪等高不是正真意义上的登高

全屏布局

基本结构

实现方案

position
flex

1、 position

<style>
  html,body,.parent{
    height: 100%; 
    overflow: hidden;
  }
  .top, .left, .right, .bottom{
    position: absolute;
    border: 1px solid red;
  }
  .top{
    top: 0; left: 0; right: 0;
    height: 100px;
  }
  .left{ 
    top: 100px; left: 0; bottom: 50px;
    width: 200px;
  }
  .right{
    overflow: auto;
    top: 100px; left: 200px; bottom: 50px; right: 0;
  }
  .bottom{
    bottom: 0; left: 0; right: 0;
    height: 50px;
  }
  .right .inner{ min-height: 1000px; }

</style>

HTML:

<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">right
        <!-- 让右侧滚动起来 -->
        <div class="inner"></div>
    </div>
    <div class="bottom">bottom</div>
</div>

position全屏布局

2、 flex

<style>

  html,body,.parent{
    height: 100%;
    overflow: hidden;
  }
  div{ border: 1px solid blue;}
  .parent{display: flex; flex-direction:column;}
  .top{ height: 100px;}
  .bottom{height: 50px;}

  .middle{flex:1; display: flex;}
  .middle .left{ width: 200px;}
  .middle .right{ flex: 1; overflow: auto; }
  .middle .right .inner{ min-height: 1000px; }

</style>

HTML:

<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">right
            <!-- 让右侧滚动起来 -->
            <div class="inner"></div>
        </div>
    </div>
    
    <div class="bottom">bottom</div>
</div>

flex IE9以下不支持

***Conclusion 总结 ***

方案总结

响应式布局

**1、viewport **

<meta name="viewport" content="width=device-width
   , initial-scale=1.0      //缩放比
   , user-scalable=no "/>  //防止用户手动缩放

**2、@media 媒体查询 **

 @media screen and (max-width:320px){
      // 视窗宽度 <= 320px 
      .className{.....}
 }

 @media screen and (min-width:769px){
      // 视窗宽度 >= 769px 
      .className{.....}
 }

 @media screen and (min-width:769px) and (max-width:1000px)  {
      // 769px  <= 视窗宽度 <= 1000px
      .className{.....}
 }

页面优化

1、为什么要优化？

提升网页响应速度
对搜索引擎、屏幕阅读器友好
提高可读性，可维护性

2、如何优化？

减少请求
减少文件大小
页面性能
可读性，可维护性

3、减少请求

图片合并
CSS文件合并
- 多个CSS文件合并为一个
- 少量css样式内联
- 避免使用import的方式引入css 文件

4、减少文件大小

减少图片大小
- 选择合适的图片格式
  -png
  -jpg
- 压缩图片
  -ImageOptim
  -ImageAlpha
  -JPEGmini
  -...
CSS 值缩写
-margin
-padding
-border
-border-radius
-font
-background
省略值为0的单位及小数点前面的0
颜色值最短表示
-red
-rgb(255,0,0)
-rgba(0,0,0,.5)
-#333
CSS选择器合并

.a,.b{ background:red ;}
文件压缩
- YUI Compressor
- cssmin
- ....
减少标签的数量

选择器的长度

  <div class="m-nav">
  <ul>
      <li><a href="">导航一</a></li>
      <li><a href="">导航二</a></li>
      ...
  </ul>
  <div>...</div>

</div>

 .m-nav ul li a:hover{ color : red; }
 应该修改为：.m-nav a:hover{ color : red; }

避免秏性能的属性

expression

.class{ width: expression(this.width>100? '100px' : 'auto');  }

filter
```
.class{ filter: alpha(opacity=50); }
```
border-radius
box-shadow
gradients

给图片设置宽高, 尽量不要缩放

<img src="xx.jpg" alt="alt" width="400px" height = "300px" >

页面渲染时，图片没有下载完成，如果不设置宽高或有缩放，当图片下载完成，页面就会有回流重绘，损耗时间。

所有表现用css实现

范例

可读性，可维护性
- 规范
- 语义化
- 尽量避免Hack
- 模块化页面
- 注释

规范与模块

规范
1、文件规范

文件规范

文件分类
- 通用类
- 业务类
文件的引入
- 行内样式不推荐并不表示不能用（表现与结构分离）
- 外联引入
- 内联引入
- 避免在CSS中使用@import
文件本身
- 文件本身如：由小写字母、数字、中划线组成
- 编码 UTF-8

2、注释规范

注释规范

块状注释
单行注释
行内注释

3、命名规范

命名规范

分类命名

demo

例如：
布局样式用 g-
模块样式用 m-

改进demo

命名格式
-大小写建议：小写
-长度权衡长度和可
语义化命名
- 以内容语义命名

以内容命名

建议用内容语义命名

4、书写规范

单行与多行

各有利弊

二选一遵守之

空格与分号
- 缩进 2or4个
- 规则内空格
分号
- 保留最后一个属性值的分号（建议保留，避免后面样式添加带来的问题）
Hack方式
- 同意各浏览器的Hack方式
  IE6 ： _property : value
  IE6/7 ： *property : value
  
  /* IE7显示#888，IE6显示#fff，其他浏览器显示#000 */
  .m-list{ color:#000; *color:#888; _color:#fff; } //注意书写顺序
- 不要滥用Hack
值格式
- color
- url()

5、其他规范

文档声明
闭合
属性
层级
注释
大小写

模块化

** 1、什么是模块化 **

一系列相关联的结构组成的整体
带有一定语义而非表现

** 2、怎么做？ **

为模块分类命名（如 .m-, .md-）
以一个主选择器开头（模块根节点）
使用以主选择器开头的后代选择器（模块子节点）

模块结构

 /* 模块1样式 */
 模块1{....}
 模块1 子元素1{....}
 模块1 子元素2{....}

 /* 模块2样式 */
 模块2{....}
 模块2 子元素2{....}
 模块2 子元素2{....}

** 3、怎么做？- case **

<!-- NAV MODULE -->
<div class="m-nav">
    <ul>
        <li class="z-crt"><a href="">index</a></li>
        <li><a href="#">link1</a></li>
        ...
    </ul>
</div>
<!-- /NAV MODULE -->

// 样式

/* 导航模块 */
.m-nav{} /* 模块容器 */
.m-nav li, .m-nav a{}
.m-nav li{}
.m-nav a{}
.m-nav .z-crt a{} /* 交互状态变化 */

模块的扩展：

<!-- NAV-1 MODULE -->
<div class="m-nav m-nav-1">
    <ul>
        <li class="z-crt"><a href="">index</a></li>
        <li><a href="#">link1</a></li>
        ...
    </ul>
</div>
<!-- /NAV-1 MODULE -->

样式扩展

** 4、为什么要模块化？ **

利于多人协同开发
便于扩展和重用
可读性、可维护性好

模块化

WY-页面架构

CSS reset

居中布局-水平居中

居中布局-垂直居中

居中布局-水平、垂直同时居中

多列布局

布局 - 不定宽 + 自适应

等分布局

等高需求

全屏布局

响应式布局

页面优化

规范与模块

模块化

猜你喜欢

热点阅读