css案例-五彩导航连

最新推荐文章于 2023-08-20 14:57:33 发布

syyy9090

最新推荐文章于 2023-08-20 14:57:33 发布

阅读量1k

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/syyy9090/article/details/105098208

版权

本文分享了一个使用CSS创建的五彩斑斓的导航栏案例，详细解析了样式设置和效果实现，助你提升网页设计技能。

摘要由CSDN通过智能技术生成

五彩导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五彩导航栏</title>
	<style>
		.nav a {
			display: inline-block;
			text-decoration: none;
			width: 120px;
			height: 58px;
			text-align: center;  /*水平居中*/
			line-height: 50px;   /*行高等于高度是垂直居中，实际图片靠下，固数值该小一点*/
		}
		.nav .bg3 {
			background: url(imges/bg3.png) no-repeat;
		}
		.nav .bg4{
			background: url(imges/bg4.png) no-repeat;
		}
		.nav .bg5 {  /*a .bg4 写法错误（a 不是bg4的父选择器）*/
			/*background-image: url(imges/bg5.png);此写法不可以*/
			background: url(imges/bg5.png) no-repeat;
		}
		.nav .bg7 {
			background: url(imges/bg7.png) no-repeat;
		}
		/*鼠标悬上，更改样式*/
		.nav .bg3:hover{
			background-image: url(imges/bg6.png);  /*这里写background而不写background-image ，是因为这里只有一个属性，不用简写多个，固可直接用background-image*/
		}
		.nav .bg4:hover{
			background-image: url(im

最低0.47元/天解锁文章

syyy9090

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css案例-五彩导航连

五彩导航栏：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五彩导航栏</title> <style> .nav a { display: inline-block; text-decoratio...
复制链接

扫一扫

专栏目录