CSSCSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )
Posted 韩曙亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSSCSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )相关的知识，希望对你有一定的参考价值。
文章目录
一、背景附着
网页中实现下面的效果 ;
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、效果展示
默认状态效果 :
鼠标移动到按钮上之后的效果 :
以上是关于CSSCSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )的主要内容，如果未能解决你的问题，请参考以下文章
CSSCSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )
CSSCSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )
CSSCSS 背景设置 ⑥ ( 背景附着 | background-attachment )
CSSCSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )
CSSCSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top； )