今日分学习笔记,网页制作准备,须知点。
网页制作
前期准备工作
欲先善其事,必先利其器。 先把我们的前期准备工作做好, 我们本次采取结构与样式相分离思想。
- 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)
- study目录内新建images 文件夹 用于保存图片。
- 新建index.html 首页html 文件(以后我们的网站首页统一规定为index.html)
- 新建style.css 样式文件。 我们本次采用外链样式表。
- 将样式引入到我们HTML页面文件中。
- 样式表写入 清除内外边距样式,来检测样式表是否引入成功。
css属性书写顺序
在写网页的时候需要用到很多的css样式,为了代码的简洁,建议遵循(从左往右排):
1.布局定位属性:display / position / float / clear / visibility / overflow
2.自身属性: width / height / margin / padding / border / background
3.文本属性: color / font / text-decoration / text-align / vertircal-align / white-space / break-word
4.其他元素: content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…
布局的流程
1.先确定页面版心
2.分析页面中的行模快,以及每个模块中的列模块。布局就是一行行罗列而成的。
3.制作heml结构时要遵循先结构后样式的原则
4.通过div+css布局整个页面的各个模块
补充
position属性 设置元素的定位类型
参数:
aboslute:生成绝对定位元素,相对于station定位以外的第一个父元素定位。原有位置让出
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。原有位置让出
relative:生成相对定位元素,相对器正常位置进行定位。原有位置不会空出
static:默认值,没有定位
inherit:规定应该从父元素继承position属性的值