HTML练习之路13

最新推荐文章于 2024-07-16 20:50:21 发布

沐曦可期

最新推荐文章于 2024-07-16 20:50:21 发布

阅读量160

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_62714412/article/details/122632802

版权

本次需要完成如图所示的图标导航栏：

结构可以看成一个<div>包裹6个<span>,需要为每一个span定义一个类名（class），方便CSS设置背景:

<body>
	<div>
		<span class="c1"></span>
		<span class="c2"></span>
		<span class="c3"></span>
		<span class="c4"></span>
		<span class="c5"></span>
		<span class="c6"></span>
	</div>
</body>

完成上面步骤后我们的基本框架就搭建完成了，接下来用CSS为标签添加样式，首先，我们使用链入式引用CSS代码，既然要引入CSS代码，就需要先新建CSS文件，CSS文件新建过程与html文件新建过程几乎一样，只是在如下界面将Html选项选择Css即可：

然后紧接着</title>标签下一行引入Css文件：

<link href="index1_20_test03.css"  rel="stylesheet" type="text/css">

接下来我们来到CSS文件，第一步，祖传艺能，初始化边距：

*{
	        margin: 0px;
			padding:0px;			
}

接下来主要是为图标导航栏设置具体大小范围的边框并居中：

div{
	width: 444px;
	height: 40px;
	border:1px #000000 solid;
	margin: 16px auto;
}

然后设置整个span的具体大小范围，并将其类型转变为行类块元素：

span{
	width: 70px;
	height: 37px;
	display: inline-block;
	border-bottom: 3px solid #392CE0	
}

最后，为每一个<span>设置背景即可：

.c1{
	background: url( "../../../Documents/muxishiye/1.png" ) no-repeat;
}
.c2{
	background: url( "../../../Documents/muxishiye/2.png" ) no-repeat;
}
.c3{
	background: url( "../../../Documents/muxishiye/3.png" ) no-repeat;
}
.c4{
	background: url( "../../../Documents/muxishiye/4.png" ) no-repeat;
}
.c5{
	background: url( "../../../Documents/muxishiye/5.png" ) no-repeat;
}
.c6{
	background: url( "../../../Documents/muxishiye/6.png" ) no-repeat;
}

实际演示效果如下：

完整.html源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标导航栏</title> 
	<link href="index1_21_test3.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div>
		<span class="c1"></span>
		<span class="c2"></span>
		<span class="c3"></span>
		<span class="c4"></span>
		<span class="c5"></span>
		<span class="c6"></span>
	</div>
</body>
</html>

完整.css源码：

@charset "utf-8";
/* CSS Document */

*{
	padding: 0px;
	margin: 0px;
}

div{
	width: 444px;
	height: 40px;
	border:1px #000000 solid;
	margin: 16px auto;
}

span{
	width: 70px;
	height: 37px;
	display: inline-block;
	border-bottom: 3px solid #392CE0	
}

.c1{
	background: url( "../../../Documents/muxishiye/1.png" ) no-repeat;
}
.c2{
	background: url( "../../../Documents/muxishiye/2.png" ) no-repeat;
}
.c3{
	background: url( "../../../Documents/muxishiye/3.png" ) no-repeat;
}
.c4{
	background: url( "../../../Documents/muxishiye/4.png" ) no-repeat;
}
.c5{
	background: url( "../../../Documents/muxishiye/5.png" ) no-repeat;
}
.c6{
	background: url( "../../../Documents/muxishiye/6.png" ) no-repeat;
}

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（QQ群：937864538 欢迎入群~）

沐曦可期

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML练习之路13

本次需要完成如图所示的图标导航栏：结构可以看成一个<div>包裹6个<span>,需要为每一个span定义一个类名（class），方便CSS设置背景:<body> <div> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <span class="c
复制链接

扫一扫