1 准备素材及工具 ● psd源文件 ● 开发工具=切图工具+vs code+Chrome 2 准备工作 ● 采取结构和样式分离的思想

创建一个目录文件夹

vs code打开目录文件夹

在目录文件夹下新建image文件夹

新建首页文件命名为index.html

新建一个css页面 命名为style.css

在首页中中加入 3 css属性书写顺序

布局定位属性:display/position/float/clear/visibility/overflow(displat第一个写，关系到模式）

自身属性:width/height/margin/padding/background

文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word

其他属性:content/cursor/border-radius/box-rashow/text-shadow/background:liner-gradient 4 页面整体思路 为了提高网页制作的效率，通常思路如下：

确定页面的版心（可视区），测量可知

分析页面中的行模块，以及每个行模块中的列模块。页面布局第一准则

一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则

制作html结构，遵循先有结构，后有样式的原则，结构永远最重要

先理清楚布局结构，再写代码

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。