css实现简易的导航栏

繁星日月

已于 2024-03-19 19:59:25 修改

阅读量327

点赞数 1

文章标签： css 前端

于 2024-03-18 22:11:54 首次发布

本文链接：https://blog.csdn.net/m0_65810417/article/details/136823758

版权

本文展示了如何使用HTML和CSS创建一个包含华为、鸿蒙智行等链接的导航栏，展示了基本的样式、布局和超链接设置。

摘要由CSDN通过智能技术生成

html-css源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
<style>
    body{
        background-image: url("../01.html/07 表单标签/背景.jpg");
        background-position: 50%;
    }
    div{
        width: 700px;
        height: 60px;
        /* 外边距 */
        margin: 400px auto;
        /* 背景颜色 */
        background-color: rgb(153, 153, 217);
        border-radius: 50px;
        box-shadow: 10px 10px 10px rgb(200, 160, 160);
        /* 设置内边距 */
        padding: 0 20px;
    }
    li{
        font-size: 20px;
        /* 列表样式 */
        list-style-type: none;
        color: white;
        /* 字体之间的距离 */
        margin: 10px 50px 10px 40px;
        /* 边框样式 inset 镶嵌式 */
        border-style:inset;
        border-radius: 10px;
        border-color: rgb(57, 138, 210);
        box-shadow: 5px 5px 5px white;
        display: inline-block;
    }
    li a{
        text-decoration: none;
        /* float: left; */
    }
    a{
        font-family: 楷体;
    }
    li:hover{
        background-color: rgb(101, 94, 159);
    }
</style>
</head>
<body>
    <div>
            <li><a href="#华为">华为</a></li>
            <li><a href="鸿蒙智行">鸿蒙智行</a></li>
            <li><a href="华为智选">华为智选</a></li>
            <li><a href="生态周边">生态周边</a></li>
    </div>
</body>
</html>