文章目录
- 一、 课程网站头部区域测量
- 1、 整体的头部盒子测量
- 2、 头部盒子标签结构
- 3、 整体页面背景颜色设置
- 二、 LOGO 盒子设置
- 1、 LOGO 图片切图
- 2、 HTML 结构及 CSS 样式编写
一、 课程网站头部区域测量
1、 整体的头部盒子测量
在 网页切图 的头部区域 的上下位置 , 拉两条上下辅助线 , 左右两侧的辅助线是 版心 的边界 ;
使用 " 矩形选框工具 " 测量头部区域的高度 为 42 像素 ;
头部的上下各有 30 像素的外边距 ;
根据上述测量结果 , 可以写出如下头部盒子的 属性样式 :
/* 头部盒子样式 */
.header {
/* 高度 42 像素 */
height: 42px;
/* 设置颜色 方便调试 */
background-color: pink;
/* 上下设置 20 像素外边距 , 左右自动居中 */
margin: 30px auto;
}
2、 头部盒子标签结构
头部的盒子大概结构如下 :
- 外部的 父容器盒子
- 内部从左到右有 4 个盒子 , 分别是 LOGO 盒子 , 导航栏盒子 , 搜索栏盒子 , 用户信息盒子 ;
- 内部的四个盒子 , 都要设置浮动 ;
3、 整体页面背景颜色设置
选择 " 吸管工具 " ,
在任意位置 , 使用 吸管工具 点击背景位置 , 然后点击 设置前景色 选项 , 会弹出 " 拾色器 ( 前景色 ) " 对话框 , 在其中显示了 吸取的颜色值 #f3f5f7 ;
获取到背景颜色 : #f3f5f7 ;
将该颜色值设置到背景中 :
/* 设置总体背景 */
body {
background-color: #f3f5f7;
}
二、 LOGO 盒子设置
1、 LOGO 图片切图
这里将 LOGO 从 PSD 中切出来 ,
选择切片工具 , 然后点击 " 基于参考线的切片 " ,
然后选择 " 切片选择工具 " , 点击要切割的切片 ;
选择 " 菜单栏 / 文件 / 导出 / 存储为 Web 所用格式 " ,
选择要导出的格式 , 点击 " 存储 " 按钮 ;
选择导出当前切片 ;
最终导出的结果 :
2、 HTML 结构及 CSS 样式编写
HTML 头部模块结构如下 :
<!-- 头部模块 - 开始 -->
<div class="header w">
<!-- 最左侧的 logo 标题 -->
<div class="logo">
<!-- 图片 -->
<img src="images/logo.png" alt="">
</div>
</div>
<!-- 头部模块 - 结束 -->CSS 样式效果 :
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
/* 清除列表默认样式 ( 主要是前面的点 ) */
li {
list-style: none;
}
/* 设置总体背景 */
body {
background-color: #f3f5f7;
}
/* 插入图片自适应 */
img {
width: 100%;
}
/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */
.w {
width: 1200px;
margin: auto;
}
/* 头部盒子样式 */
.header {
/* 高度 42 像素 */
height: 42px;
/* 设置颜色 方便调试 */
background-color: pink;
/* 上下设置 20 像素外边距 , 左右自动居中 */
margin: 30px auto;
}
.logo {
/* 靠左侧浮动 */
float: left;
}当前的页面效果 : 整体的 1200 像素 版心居中 , 头部高度 42 像素 , 上下外边距 30 像素 ;
