文章目录

• 一、背景附着
• • 1、HTML 标签结构
  • 2、设置 div 盒子内容水平居中显示
  • 3、设置链接标签默认显示样式
  • 4、设置鼠标经过样式
• 二、完整代码示例
• • 1、代码示例
  • 2、效果展示

一、背景附着

网页中实现下面的效果 ;

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>
    

2、效果展示

默认状态效果 :

鼠标移动到按钮上之后的效果 :

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！