CSS(导航栏，精灵图，边框圆角)

最新推荐文章于 2024-09-04 02:27:32 发布

L_X_zhao

最新推荐文章于 2024-09-04 02:27:32 发布

阅读量760

点赞数 19

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/L_X_zhao/article/details/139752106

版权

一、导航栏

这个导航栏我是用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>

L_X_zhao

关注

19
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS(导航栏，精灵图，边框圆角)

这个导航栏我是用div盒子实现的，想要使用div完成此导航栏，我们要理解行内元素，块元素，行内块元素的特点与区别。块元素：1.独占一行2.可以设置宽高3.可以包含其他标签行内元素：1.不独占一行2.不可以设置宽高3.里面不可以包括元素行内块元素：1.不独占一行2.可以设置宽高3.可以包含其他标签当我们了解完以上知识点的分类后，就可以完成以下导航栏的编写了！
复制链接

扫一扫