如何写好一个HTML页面？

如何写好一个页面

一、前期准备素材

• 学成在线PSD源文件
• 开发工具 = PS（切图）+ submit（编辑器【代码】）+ Chrome（浏览器【测试用】）

二、前期准备工作

1. 创建study目录文件夹（用于存放我们页面的相关内容）
2. study目录内新建images文件夹（用于保存图片）
3. 新建index.html首页html文件（网站的首页统一规定为index.html）
4. 新建style.css样式文件。
5. 将样式引入到我们HTML页面文件中。（如何引入css样式？）
6. 样式表写入 清除内外边距样式（检测样式表是否引入成功）。

三、CSS属性书写顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow 等（建议display第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background等
3. 文本属性：color / font / text-decoration / text-alian / vertical-align / white-space / break-word等
4. 其他属性：（CSS3）：content / curser / border-radius / box-shadow / text-shadow / background:linear-gradient等

.lizi{
            display: block;/* 转换为块级元素 */
            position: relative;/* 绝对定位 */
            float: left;/* 浮动 */
            width: 100px;/* 宽 */
            height: 100px;/* 高 */
            margin: 0 10px;/* 外边距 */
            padding: 20px 0 ;/* 内间距 */
            font-family: Arial, 'Helvetica Neue',Helvetica, sans-serif;/* 设置字体 */
           color:#333;/* 颜色 */
           background-color:rgba(0,0,0,0.5);/* 背景颜色 */
           -webkit-border-radius: 10px;/* 兼容旧的谷歌浏览器 */
           -moz-webkit-border-radius: 10px;/* 兼容旧的火狐浏览器 */
           -ms-webkit-border-radius: 10px;/* 兼容旧的ie浏览器 */
           -o-webkit-border-radius: 10px;/* 兼容旧的欧鹏浏览器 */
           border-radius: 10px;
}

四、布局流程

1. 必须确定页面的版心（可视区）（这个可以自己测量）
2. 分析页面中的行模块，以及每个行模块中的列模块。（页面布局，就是一行行罗列而成）
3. 制作HTML结构（遵循先有结构，后有样式的原则。结构永远最重要。）
4. 最后运用盒子模型的原理，通过div+css布局来控制网页的各个模块