一、导航栏
这个导航栏我是用div盒子实现的,想要使用div完成此导航栏,我们要理解行内元素,块元素,行内块元素的特点与区别。
块元素:
1.独占一行
2.可以设置宽高
3.可以包含其他标签
行内元素:
1.不独占一行
2.不可以设置宽高
3.里面不可以包括元素
行内块元素:
1.不独占一行
2.可以设置宽高
3.可以包含其他标签
当我们了解完以上知识点的分类后,就可以完成以下导航栏的编写了!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.var{
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: black;
color: white;
}
.var:hover{
background-color: white;
color: black;
text-shadow: 0 0 3px aqua;
}
</style>
</head>
<body>
<div>
<div class="var">首页</div>
<div class="var">赛事</div>
<div class="var">战队</div>
<div class="var">介绍</div>
<div class="var">会员</div>
</div>
</body>
</html>
在使用div做导航栏时,因为div是块元素,会默认换行,所以将它转换成行内块元素进行横向排版,:hover是鼠标悬停才会显示的样式。
二、精灵图
精灵图的原理是将页面中所使用到的元素整合成一张照片,利用背景定位的方式将图片展现出来,这样简化了图片加载需要的时间,大大提高了代码的效率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.jl{
width: 60px;
height: 60px;
background-image: url(./image/index.webp);
background-position: -181px 0;
}
.jl2{
width: 233px;
height: 126px;
background-image: url(./image/index.webp);
background-position: -1px -220px;
/* border: 1px solid red; */
}
</style>
</head>
<body>
<div class="jl"></div>
<div class="jl2"></div>
</body>
</html>
三、边框圆角
为了清楚的看到盒子的大小,我们可以给盒子添加一个边框,这样就能清楚的对盒子元素进行操作,普通盒子边框太丑,我们可以设置圆角让盒子看起来更加漂亮。
下面让我们利用边框圆角制作一个四叶草形状的盒子模型!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one2{
width: 100px;
height: 100px;
display: inline-block;
background-color: greenyellow;
border-radius: 100% 0;
}
.one1{
width: 100px;
height: 100px;
display: inline-block;
background-color: greenyellow;
border-radius: 0 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="one1"></div>
<div class="one2"></div><br>
<div class="one2"></div>
<div class="one1"></div>
</div>
</body>
</html>