提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

【CSS】课程网站头部制作 ① ( 头部区域测量 | 头部盒子标签结构 | 整体页面背景颜色设置 | LOGO 盒子设置 | 切片工具切图 | LOGO 相关 HTML 结构及 CSS 样式编写 )

工具HTMLCSS网站 设置 结构 页面 制作
2023-06-13 09:18:12 时间

文章目录

一、 课程网站头部区域测量

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 像素 ;

相关文章