案例
准备素材和工具
- 图片
- 开发工具
案例准备工作
我们本次采取结构与样式相分离思想:
- 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
- 用vscode打开study目录文件夹.
- study 目录内新建 images 文件夹,用于保存图片。
- 新建首页文件 index.html(以后我们的网站首页统一规定为 index.html )。
- 新建 style.css 样式文件。我们本次采用外链样式表。
- 将样式引入到我们的 HTML 页面文件中。
- 样式表写入清除内外边距的样式,来检测样式表是否引入成功。
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 …
.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;
}
页面布局整体思路
为了提高网页制作的效率,布局时通常有以下的整体思路:
- 必须确定页面的版心(可视区),我们测量可得知。
- 分析页面中的行模块,以及每个行模块中的列模块。其实页面布局第一准则.
- 一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则
- 制作 HTML 结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要.
- 所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累.
确定版心
这个页面的版心是 1200 像素,每个版心都要水平居中对齐,可以定义版心为公共类:
.w {
width: 1200px; margin: auto;
}
头部制作
- 1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐,上下给一个 margin 值就可以
- 版心盒子里面包含 2 号盒子 logo
- 版心盒子里面包含 3 号盒子 nav 导航栏
- 版心盒子里面包含 4 号盒子 search 搜索框
- 版心盒子里面包含 5 号盒子 user 个人信息 注意:要求里面的 4 个盒子必须都是浮动
导航栏注意点:
实际开发中,我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。
- li+a 语义更清晰,一看这就是有条理的列表型内容。
- 如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险), 从而影响网站排名
注意: - 让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.
- 这个nav导航栏可以不给宽度,将来可以继续添加其余文字
- 因为导航栏里面文字不一样多,所以最好给链接 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 右对齐