2025年css盒子模型小实例：新浪导航案例

科技前沿 • 2025-02-11 07:22 • 阅读 47

css盒子模型小实例：新浪导航案例

大家好，我是讯享网，很高兴认识大家。

<!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>

        .nav {

            /* background-color: aquamarine; */

            height: 41px;

            line-height: 41px;

            border-top: 3px solid #ff8500;

            border-bottom: 1px solid #edeef0;

            background-color: #fcfcfc;

        }



        .nav a {

            display: inline-block;

            height: 41px;

            font-size: 12px;

            color: #4c4c4c;

            text-decoration: none;

            padding-left: 20px;

            padding-right: 20px;



        }



        a:hover {

            background-color: #eee;

            color: #ff8500;

        }

    </style>

</head>



<body>

    <div class="nav">

        <a href="#">设为首页</a>

        <a href="#">手机新浪网</a>

        <a href="#">移动客户端</a>

        <a href="#">博客</a>

        <a href="#">微博</a>

        <a href="#">关注我</a>

    </div>



</body>



</html>

讯享网