心若没有栖息的地方,到哪里都是在流浪。
这篇文章记录了我写静态博客首页的准备工作、思路布局流程,可不要小看了哦?,蛮多小细节需要注意的呢,如果有什么不对的地方,可以告诉我哈
这个静态首页也是对我前两篇文章的实际运用,感兴趣的小伙伴可以跟着我的思路一起敲键盘哦
准备工作
首先,我们要写一个网页,前期的准备工作必不可少,会采取结构与样式相分离的思想,文件目录格式如下:
布局流程
CSS属性书写顺序
这是扩展的一个知识点,很重要,在实际编写中尽量遵循这样的顺序
布局定位属性:display / position / float / clear / visibility / overflow(建议 display 写在最前面)
自身属性:width / height / margin / padding / border / background
文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient
页面布局分析
首先确定页面的版心,即页面的可视区
分析页面的行模块,以及每个行模块中的列模块
编写网页的时候,还是老话哦,遵循先有结构后有样式的原则
运用盒子模型的原理,使用div+CSS布局来空着网页的各个模块
页面制作
页面的整个版心的为1000px,水平居中对齐,我们把版心单独定义为:
.hcenter{
width: 1000px;
margin: 0 auto;
}
注意:导入样式表采用的是链式:< link rel="stylesheet" href="css/index.css">
导航栏头部header制作
完成后的效果: