HTML练习之路13

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

结构可以看成一个<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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沐曦可期

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值