页面架构

布局解决方案

水平居中布局

  
DEMO

  
DEMO

  
DEMO

  
DEMO

垂直居中布局

  
DEMO

  
DEMO

  
DEMO

水平垂直都居中的布局

  
DEMO

  
DEMO

  
DEMO

多列布局

  

    
left
  
  

    
right
    
right
  

  

    
left
  
  

    

      
right
      
right
    
  

  

    
left
  
  

    
right
    
right
  

  

    
left
  
  

    
right
    
right
  

  

    
left
  
  

    
center
  
  

    
right
    
right
  

多列等分布局

  
1
  
2
  
3
  
4

  

    
1
    
2
    
3
    
4
  

  

    
1
    
2
    
3
    
4
  

多列等高布局

在多列布局的多种实现方式中，利用flex和table两种方式都是默认登高的。

全屏布局

特点：

• 整个页面始终撑满浏览器的窗口
• 滚动条只出现在内容区
• 浏览器大小变化时，只有局部内容的大小会随之变化

Paste_Image.png

  
top
  
left
  

    

      right
    
  
  
  
bottom

  
top
 
  

    
left
    

      

        right
      
    
  
  
  
bottom

CSS Reset

css的诸多标签都有自己默认的属性，如h1标签的字号，em标签的斜体等属性，各个浏览器中对不同的标签都是默认的样式，且不同的浏览器可能会有不同的设置
为了不使用浏览器的默认样式，我们可以引用reset.css这个文件来对所有标签的属性进行重置，这样可以保证同一种标签的所有样式在不同的浏览器中的表现都是一样的。这样一来，所有的标签都失去了样式。
另，在现实的开发中，reset.css中不仅要清除所有的默认样式，还要定义全局的样式，保证所有的页面有着同样的行为、风格等。

响应式

目前，网页需要在不同的设备上浏览，如PC，平板，手机等，这些设备的屏幕大小不同，使用方式不同，所以在设计网页时要注意对于不同设备的兼容和显示。

viewport

css设置

@media screen and (max-width: 1000px) and (min-width: 320px){
    .......
}
/*这个是css的选择器，表示大括号其中的css内容只有在媒体设备的屏幕宽度>=320px且<=1000px时才会被使用，可以用来做内容的*/
/*这样，不同的设备上可以使用不同的布局*/

页面优化

1. 提高页面打开速度
2. 对搜索引擎，阅读器友好
3. 代码优化可以提到代码可读性，容易维护

如何优化

1. 减少请求

• 图片合并，如将小图标进行合并到一个文件，减少文件请求数量
• 见多个css文件进行合并，将css内联引入html页面
• 避免使用@import方式引入css文件

2. 减少文件大小

• 通过选择合适的图片格式来减小文件大小
• 对图片进行无损压缩
• css值缩写，如将margin-left/right/top/bottom等四个属性缩写为一个margin
• 颜色值最短表示
• css中选择器合并

3. 页面性能

• 将引入css文件的link标签写到标签中
• js脚本放在页面底部，因为js的运行会阻塞请求
• 消耗性能的属性：expression、filter、border-radius、box-shadow、gradients

4. 可读性、可维护性

• 代码规范
• 代码语义化
• 尽量避免使用hack