导航栏页面

最新推荐文章于 2024-08-14 22:24:56 发布

小小逍遥仙

最新推荐文章于 2024-08-14 22:24:56 发布

阅读量181

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/2301_78185240/article/details/140621294

版权

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        a{
            font-size: 60px;

            color: white;

            text-decoration: none;
        }
 
        .box1{

           color:black;

        }
        
 
        .box2{

            margin-left: 150px;

        }
 
        .box{

            width: 1500px;

            height: 100px;

            margin:auto;

            background-color:azure;

            border: 1px solid black;

            box-shadow: 10px 10px 10px black;

            border-radius: 20%;
        }

        li{

            width: 250px;

            height: 50px;

            display:inline-block;

            text-align:left;

        }

        li:hover{

             background-color: yellow;

        }

    </style>
</head>
 
<body>
    <div class="box">
        <li class="box2">
            <li><a class="box1">天猫</a></li><span>|</span>
            <li><a class="box1">聚划算</a></li><span>|</span>
            <li><a class="box1">天猫超市</a></li><span>|</span>
            <li><a class="box1">咸鱼</a></li>
        </ul>
    </div>
</body>
 
</html>

css盒子模型介绍

所有HTML元素可以看作盒子，css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，内容。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

小小逍遥仙

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
导航栏页面

所有HTML元素可以看作盒子，css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，内容。Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。
复制链接

扫一扫