代码编织梦想





一、盒子模型内边距案例



模仿 CSDN 博客界面的导航栏 , 将下图中 矩形框 中的导航栏 样式写出来 ;

在这里插入图片描述

案例分析 :

导航栏宽度 是不固定的 , 有的链接宽度很窄 , 如 " 最近 " , " 课程 " 等 , 只有 2 个字 , 有的链接很长 , 如 " 关注/订阅/互动 " , 字数很多 , 这样就不适合为其设置一个固定宽度 ;

最佳方案 是 为 链接 选项 设置一个内边距 , 让其宽度自适应 ;





二、使用 Fireworks 分析网页




1、导入图片


Adobe Fireworks 是一款网页制图软件 , 可以快速设计开发网页界面原型 , 这里使用该软件分析 已有的 网页 ;

将上述 导航栏 图片 拖动到 Adobe Fireworks 工具 中进行分析 ;

在这里插入图片描述


2、缩放图片


使用 Ctrl + 鼠标滚轮 , 可以放大缩小图片显示 ;

在这里插入图片描述


3、切片工具测量图片


使用 切片工具 , 可以测量 图片中 矩形区域 的 宽高 , 宽高显示在下方 , 下图中 切片工具 选中的 浅绿色 矩形 宽高为 9 x 48 像素 , 该区域左上角坐标为 ( 15, 7 ) ;

在这里插入图片描述


4、吸管工具获取图片颜色


如果想要获取图片中的颜色 , 使用吸管工具 , 点击图片对应位置 , 然后点击 颜色 按钮 , 即可在其中查看 图片 对应位置的颜色 ;

使用吸管工具 , 点击图片中的灰色横线 ;

在这里插入图片描述

然后点击 颜色选项 , 可以查看之前使用吸管工具吸取的颜色值 , 这里获取的十六进制值为 #E8E8ED ;
在这里插入图片描述


5、测量结果


测量的 导航栏 整体 高度 为 48 像素 , 没有 上左右 边框 , 整体背景为白色 ;
在这里插入图片描述

下边框 1 像素 , 颜色值为 #E8E8ED ,
在这里插入图片描述

文本高度 15 像素 , 文本颜色为 #222226 , 这是鼠标经过时的样式 , 鼠标没有经过时颜色值为 #555666 ;

在这里插入图片描述

鼠标经过时 , 下边框为 2 像素 , 颜色值 #222226 ;

在这里插入图片描述





三、代码示例



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>博客导航栏</title>
	<base target="_blank"/>
	<style>
		.nav {
			height: 48px;
			background-color: white;
			
			/* 下边框 1 像素 #EDEEF0 颜色实线 */
			border-bottom: 1px solid #EDEEF0;
		}
		
		.nav a {
			/* 转为 行内块元素 */
			display: inline-block;
			
			height: 48px;
			
			/* 行高 = 内容高度 垂直居中 */
			line-height: 48px;
			
			/* 文本大小 15px 灰色 */
			font-size: 15px;
			color: #555666;
			
			/* 上下内边距 0px  左右内边距 20px */
			padding: 0 20px;
			
			/* 取消链接下划线 */
			text-decoration: none;
		}
		
		/* 鼠标经过样式 */
		.nav a:hover {
			/* 修改文本样式 */
			color: #222226;
			
			/* 增加下边框 */
			border-bottom: 2px solid #222226;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">最近</a>
		<a href="#">文章3.2k</a>
		<a href="#">资源272</a>
		<a href="#">关注/订阅/互动</a>
		<a href="#">帖子2.3k</a>
		<a href="#">问答18</a>
		<a href="#">收藏</a>
		<a href="#">课程</a>
		<a href="#">视频</a>
	</div>
</body>
</html>

效果展示 :

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-NC-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/shulianghan/article/details/129601707