【CSS】CSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

韩曙亮

发布于 2023-03-30 11:23:23

4.6K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、背景附着

网页中实现下面的效果 ;

1、HTML 标签结构

基本的 HTML 标签 ,

	<div class="nav">
		<a href="https://blog.csdn.net/">博客</a>
		<a href="https://download.csdn.net/">下载</a>
		<a href="https://edu.csdn.net/">学习</a>
		<a href="https://bbs.csdn.net/">社区</a>
	</div>

原始样式如下 :

2、设置 div 盒子内容水平居中显示

将 div 中的内容水平居中显示 , 设置如下样式 :

/* I. div 内部的 a 链接标签水平居中 */
.nav {
	text-align: center;
}

3、设置链接标签默认显示样式

在 div 盒子中的 a 标签是行内元素 , 为其设置宽高是无效的 , 首先要将其转为行内块样式 ;

display: inline-block;

标签背景图片大小为 120 x 50 像素 , 这里将标签也设置成 120x50 大小 ;

width: 120px;
height: 50px;

文字水平居中 , 通过设置 text-align: center; 即可 ;

文字垂直居中 , 需要将行高与文本高度设置成一致即可 , 之前设置的标签的高度为 50 像素 , 这里将行高设置成 50 像素即可 ;

line-height: 50px;

图片背景设置 , 使用简写方式 , 设置图片链接 , 与图片的平铺模式即可 , 不需要设置其它样式 ;

background: url(images/bg_bt_orange.png) no-repeat;

部分代码示例 :

		/* II. 设置默认的显示样式 */
		a {
			/* 转为行内块样式 */
			display: inline-block;
			width: 120px;
			height: 50px;
			/* 设置背景颜色 */
			background-color: pink;
			/* 文字 水平居中 */
			text-align: center;
			/* 取消链接下划线 */
			text-decoration: none;
			/* 文字 垂直居中 行高与文本高度一致 */
			line-height: 50px;
			
			/* 背景图片设置 - 简写 */
			background: url(images/bg_bt_orange.png) no-repeat;
		}

4、设置鼠标经过样式

鼠标经过时 , 文本颜色变为白色 , 背景图片变为其它背景 , 这里只需要设置需要变化的元素即可 , 其它的元素样式默认保持不变 ;

		/* III. 鼠标经过 样式 */
		a:hover {
			background-color: red;
			color: white;
			
			/* 背景图片设置 - 简写 */
			background: url(images/bg_bt_blue.png);
		}

二、完整代码示例

1、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>横向导航栏</title>
	<base target="_blank"/>
	<style>
		/* I. div 内部的 a 链接标签水平居中 */
		.nav {
			text-align: center;
		}
		/* II. 设置默认的显示样式 */
		a {
			/* 转为行内块样式 */
			display: inline-block;
			width: 120px;
			height: 50px;
			/* 设置背景颜色 */
			background-color: pink;
			/* 文字 水平居中 */
			text-align: center;
			/* 取消链接下划线 */
			text-decoration: none;
			/* 文字 垂直居中 行高与文本高度一致 */
			line-height: 50px;
			
			/* 背景图片设置 - 简写 */
			background: url(images/bg_bt_orange.png) no-repeat;
		}
		/* III. 鼠标经过 样式 */
		a:hover {
			background-color: red;
			color: white;
			
			/* 背景图片设置 - 简写 */
			background: url(images/bg_bt_blue.png);
		}
	</style>
</head>
<body>
<body>
	<div class="nav">
		<a href="https://blog.csdn.net/">博客</a>
		<a href="https://download.csdn.net/">下载</a>
		<a href="https://edu.csdn.net/">学习</a>
		<a href="https://bbs.csdn.net/">社区</a>
	</div>
</body>
</html>