本次需要完成如图所示的图标导航栏:
结构可以看成一个<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 欢迎入群~)