案例-学成在线
1。这是典型的企业级网站
2。目的是为了整体感知企业级网站布局流程，复习以前知识。
一：案例准备工作
采取样式与结构相分离思想
- 创建study目录文件夹
- 用vs打开
- 新建images文件夹用于保存图片
- 新建首页文件index.html（以后我们的网站统一规定为index.html）
- 新建样式文件style.css，使用外链样式表
- 将样式引入到我们的HTML页面文件中。（＜link rel="stylesheet" href="style.css" ＞）
- 样式表写入清除内外边距的样式来检测样式表是否引入成功。
二：css属性书写顺序（重点）
1。布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，关系到模式）
2。自身属性：
width/height/margin/padding/borde/background
3. 文本属性：
color/font/text-decoration/text-align/vertical-align/white-space break-word
4. 其他属性（css3）：
content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient ...
三：页面布局整体思路
- 确定页面的版心（可视区），可以测量得知
- 分析页面中的行模块，以及每个行模块中的列模块，其实就是页面布局第一准则。
- 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
- 制作HTML结构。遵循：先有结构，后有样式的原则。结构永远是最重要的。
- 先理清布局结构，再写代码尤为重要。要多写多积累。
四：头部制作
导航栏注意：
实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法。
1. li+a语义更清晰，一看就是有条理的列表型内容。
2。如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑，（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。
用无序列表，ul＞li＞a 导航栏的固定写法。
注：
让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
nav导航栏可以不给宽度，将来可以继续添加其余文字。
因为导航栏里面的文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。
效果：
五：banner部分
六：精品推荐大模块
命名规则：box最大的盒子，上半盒子box-hd
下半box-bd，下半里边是无序列表，有十个小li组成，
注：小li外边距的问题，小技巧：给box-hd宽度为1215就可以一行装5个li了。
七：底栏footer模块
通过本案例的学习和制作，对网页布局结构有了更深的了解，对各种网页布局操作进一步熟悉，特别是ul dt dd标签已经忘记了，通过本次练习再次加强了记忆。有点小小的成就感*-*
34
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
