美文网首页
WY-页面架构

WY-页面架构

作者: ddai_Q | 来源:发表于2015-08-24 13:07 被阅读166次

    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-页面架构

          本文链接：https://www.haomeiwen.com/subject/itzfcttx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|WY-页面架构|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！