one day网页重构

网页重构：设计图利用ps工具进行层级划分 

 

1.拿到一个页面设计图 首先分成三大部分 标尺工具 ctrl+r

header: 网站logo,网站的导航、网站的广告或者介绍区域

main:网站的主题内容区域

footer：网站基本信息、合作厂商、其他的网址、作者

 

2.编写对应的结构代码 !+tab 生成页面的基本结构

 

3.三个大的区域宽度 100%

100%的宽度没有铺满整个屏幕？ 网页中标签 ，具有默认间距

取消标签的默认间距：/* *通配符选择器，找到当前页面中所有的标签 

       margin:外边距

       padding:内填充*/

 

4.网页的logo的制作方式：

<h1><a href=" ">logo对应文字</a ></h1>（h1标签更有利于搜索引擎）

 

5.隐藏a标签的文字，首行缩进属性 ：text-indent:-1000px;或设为透明opacity;0

 

6.css样式：（1）/*元素的水平居中*/margin: 0 auto;

（2）/*因为a标签默认是行元素，大小由内容决定，并且无法设置大小*//*将行元素转化为块元素*/display: block;

（3）/*列表符号清除*/list-style: none;

（4）/*浮动属性*/float: left;

（5）/*字号大小*/font-size: 12