CSS学习（五）

案例

准备素材和工具

1. 图片
2. 开发工具

案例准备工作

我们本次采取结构与样式相分离思想:

1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
2. 用vscode打开study目录文件夹.
3. study 目录内新建 images 文件夹，用于保存图片。
4. 新建首页文件 index.html(以后我们的网站首页统一规定为 index.html )。
5. 新建 style.css 样式文件。我们本次采用外链样式表。
6. 将样式引入到我们的 HTML 页面文件中。
7. 样式表写入清除内外边距的样式，来检测样式表是否引入成功。

CSS 属性书写顺序(重点)

生活中衡量一个人有气质:
穿着打扮 举止言行 等等
编程中如何衡量一个人的代码能力?
规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验…
建议遵循以下顺序:

1. 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写，毕竟关系到模式)
2. 自身属性:width / height / margin / padding / border / 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 …

.jdc {
	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: rgba(0,0,0,.5);
	border-radius: 10px;
	}

页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路:

1. 必须确定页面的版心(可视区)，我们测量可得知。
2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
3. 一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则
4. 制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
5. 所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累.

确定版心

这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类:

.w {
	width: 1200px; margin: auto;
}

头部制作

• 1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐，上下给一个 margin 值就可以
• 版心盒子里面包含 2 号盒子 logo
• 版心盒子里面包含 3 号盒子 nav 导航栏
• 版心盒子里面包含 4 号盒子 search 搜索框
• 版心盒子里面包含 5 号盒子 user 个人信息  注意:要求里面的 4 个盒子必须都是浮动
  导航栏注意点:
  实际开发中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。

1. li+a 语义更清晰，一看这就是有条理的列表型内容。
2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)， 从而影响网站排名
   注意:
3. 让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.
4. 这个nav导航栏可以不给宽度,将来可以继续添加其余文字
5. 因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度
   search 搜索框:
   一个 search 大盒子里面包含 2个 表单
   

banner 制作

• 1 号盒子是通栏的大盒子 banner，不给宽度，给高度，给一个蓝色背景
• 2 号盒子是版心，要水平居中对齐
• 3 号盒子版心内，左对齐 subnav 侧导航栏
• 4 号盒子版心内，右对齐 course 课程

精品推荐小模块

• 大盒子水平居中 goods 精品，注意此处有个盒子阴影
• 1 号盒子是标题 H3 左侧浮动
• 2 号盒子里面放链接左侧浮动， goods-item 距离可以控制链接的左右内边距(注意行内元素只给左右内外边距)
• 3 号盒子右浮动 mod 修改

精品推荐大模块

• 1号盒子为最大的盒子，box 版心水平居中对齐
• 2 号盒子为上面部分，box-hd – 里面左侧标题 H3 左浮动，右侧链接 a 右浮动
• 3 号盒子为底下部分，box-bd – 里面是无序列表，有 10 个小 li 组成
• 小 li 外边距的问题，这里有个小技巧:给 box-hd 宽度为 1225 就可以一行装开 5 个 li

复习点：
我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里 面的盒子浮动会影响下面的布局，因此需要清除浮动。

底部模块

• 1 号盒子是通栏大盒子，底部 footer 给高度，底色是白色
• 2 号盒子版心水平居中
• 3 号盒子版权 copyright 左对齐
• 4号盒子链接组links 右对齐