美文网首页
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-页面架构

    CSS reset ** 1、placeholder 颜色重置 ** 2、 input 右测 小叉删除 ** 3、...

  • WY-产品前端架构

    模块 例子： 该 caculator 的问题： 显示依赖声明 （优点） 仍然污染了全局变量 （不足） 必须手动进行...

  • 「页面架构」CSS Reset

    页面架构 CSS Reset样式重置前后对比 页面架构 页面架构从实际需求出发，提供多种需求的多种解决方案和优缺点...

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • iOS开发 如何使用viper架构构建复杂页面？

    iOS开发 使用viper架构构建复杂页面 iOS开发常用的页面架构： MVC MVVM VIPER viper模...

  • 「页面架构」页面优化

    页面优化 页面优化可以提升页面的访问速度从而提高用户体验，优化的页面可以更好的提升 SEO 的效果同时也可以提高代...

  • 07 | 客户端缓存的分类和介绍

    BS 架构 页面缓存； 浏览器缓存； 移动互联网架构 APP 自身使用的缓存； 页面缓存 含义 页面自身对某些元素...

  • web端页面设计之信息架构

    web端页面设计之信息架构

  • 复杂页面架构

    假设微博APP的正文页 整体架构数据流反向更新 整体架构 视图层 （View & ViewController） ...

  • 架构设计之序章

    一、架构是什么？ 简单来说就是调API，展示页面，然后跳转到别的地方再调API，再展示页面。 二、为啥要讨论架构 ...

网友评论

      本文标题：WY-页面架构

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

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

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

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

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

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

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