当前位置：网站首页>The third day of Xiaobai programmer

The third day of Xiaobai programmer

2022-07-25 22:16:00 【Too difficult L】

    The search bar on the left side of jd.com website is established

<!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> Simulation of Jingdong sidebar navigation effect </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="#" > Household appliances </a>

        </p>

        <p class="line2">

            <a href="#" > mobile phone </a>/

            <a href="#" > Operator, </a>/

            <a href="#" > Digital </a>

        </p>

        <p class="line3">

            <a href="#" > The computer </a>/

            <a href="#" > office </a>

        </p>

        <p class="line4">

            <a href="#" > Home Furnishing </a>/

            <a href="#" > furniture </a>/

            <a href="#" > Home decoration </a>/

            <a href="#" > Kitchenware </a>

        </p>

        <p class="line5">

            <a href="#" > men's wear </a>/

            <a href="#" > Women's wear </a>/

            <a href="#" > Children's wear </a>/

            <a href="#" > Underwear </a>

        </p>

        <p class="line6">

            <a href="#" > Beauty makeup </a>/

            <a href="#" > Personal care and cleaning </a>/

            <a href="#" > Pets </a>

        </p>

        <p class="line7">

            <a href="#" > Women's Shoes </a>/

            <a href="#" > Luggage and bags </a>/

            <a href="#" > Clocks and watches </a>/

            <a href="#" > jewelry </a>

        </p>

        <p class="line8">

            <a href="#" > Men's Shoes </a>/

            <a href="#" > motion </a>/

            <a href="#" > outdoors </a>

        </p>

    </div>

</body>

</html>

design sketch

 

原网站

版权声明
本文为[Too difficult L]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190520526404.html

边栏推荐

猜你喜欢

随机推荐