用HTML5+CSS3做一京东左侧项目栏

于 2021-07-06 21:06:54 发布
阅读量357 收藏 2
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15800585396/article/details/118529618
版权

跟着B站老师学习，其中有个项目是用HTML5+CSS3做京东左侧的项目栏；用到的是盒子模型的知识。其中视频中老师用的是hav元素作为a的父元素；我用的是ul-li作为其祖先元素；总体实现的效果是差不多的；其中有两个注意点

（1）line-height

li{
    line-height=25px;
    height=25px;
}

该段代码设置父元素高和行高相同，使得字体呈先在正中央。

（2）去除超链接下划线

text-decoration=none;

最后是项目的总体呈现；

 

其中，超链接功能实现正常；但界面较丑；

其中也巩固了一个知识，超链接的伪类 ：hover不只是在超链接中能用；

以下是代码；

<!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>
    <link rel="stylesheet" href="../exericse/reset.css">
    <style>
        body{
            background-color: khaki;
        }
        img{
            height: 150px;
            width: 150px;
        }
        a{
            color: #000;
            text-decoration: none;
        }
        li:hover{
            background-color:#d9d9d9;

        }
        .llist{
            background-color: white;
            width: 150px;
            overflow-y: scroll;

        }
        li{
            height: 35px;
            line-height: 35px;
            
            padding: 0px 5px;
        }
        
        a:link{
            color: grey;
        }
        a:active{
            color: red;
        }
        a:hover{
            color: red;
        }
        a{
            
            font-size:10px;
        }
            a:first-of-type{
                padding-left: 3px;
            }
    </style>
</head>
<body>
    <div>
        <img src="../pho/jpp.jpg" alt="">
    </div>
    <ul class="llist">
        <li>
            <span>
                <a href="https://jiadian.jd.com/"target="_blank"> 家用电器</a>
               </span>
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 手机/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 运营商/</a>
            </span>
           
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 数码</a>
            </span>
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 电脑/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 办公</a>
            </span>
           
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank">家具/</a>
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
            </span>
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank">家具/</a>
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
            </span>
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank">家具/</a>
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
            </span>
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank">家具/</a>
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
            </span>
        </li> <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank">家具/</a>
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
            </span>
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank">家具/</a>
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
            </span>
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank">家具/</a>
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
            </span>
        </li>
        <li>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank">家具/</a>
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
               
            </span>
            <span>
                <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
            </span>
            <li>
                <span>
                    <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
                   
                </span>
                <span>
                    <a href="https://shouji.jd.com/" target="_blank">家具/</a>
                </span>
                <span>
                    <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
                   
                </span>
                <span>
                    <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
                </span>
            </li>
            <li>
                <span>
                    <a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
                   
                </span>
                <span>
                    <a href="https://shouji.jd.com/" target="_blank">家具/</a>
                </span>
                <span>
                    <a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
                   
                </span>
                <span>
                    <a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
                </span>
            </li>
        </li>

    </ul>
</body>
</html>

DDD何
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值