当前位置：网站首页>小白程序员第三天

小白程序员第三天

2022-07-19 05:22:00 【太难l】

   京东网页左侧边搜索栏建立

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

            text-decoration: none;

            color: black;

        }

        a:hover{

                color: hsl(20, 100%, 50%);

              }

        p:hover{

            background-color: rgb(130, 144, 145);

        }

    </style>

<body>

    <div id="nav">

        <p class="line1">

            <a href="#" >家用电器</a>

        </p>

        <p class="line2">

            <a href="#" >手机</a>/

            <a href="#" >运营商</a>/

            <a href="#" >数码</a>

        </p>

        <p class="line3">

            <a href="#" >电脑</a>/

            <a href="#" >办公</a>

        </p>

        <p class="line4">

            <a href="#" >家居</a>/

            <a href="#" >家具</a>/

            <a href="#" >家装</a>/

            <a href="#" >厨具</a>

        </p>

        <p class="line5">

            <a href="#" >男装</a>/

            <a href="#" >女装</a>/

            <a href="#" >童装</a>/

            <a href="#" >内衣</a>

        </p>

        <p class="line6">

            <a href="#" >美妆</a>/

            <a href="#" >个护清洁</a>/

            <a href="#" >宠物</a>

        </p>

        <p class="line7">

            <a href="#" >女鞋</a>/

            <a href="#" >箱包</a>/

            <a href="#" >钟表</a>/

            <a href="#" >珠宝</a>

        </p>

        <p class="line8">

            <a href="#" >男鞋</a>/

            <a href="#" >运动</a>/

            <a href="#" >户外</a>

        </p>

    </div>

</body>

</html>

效果图

 

原网站

版权声明
本文为[太难l]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_59869664/article/details/125415375

边栏推荐

猜你喜欢

随机推荐