web开发之小米商城左侧导航简洁版

最新推荐文章于 2024-05-26 11:25:58 发布

i want to舞动乾坤

最新推荐文章于 2024-05-26 11:25:58 发布

阅读量591

点赞数 1

文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_52924633/article/details/120380339

版权

用超链接来和行内元素转换为块元素实现，当然，超链接现在来说是空的，侧边距也是利用了首行缩进两个字符完成的，小编将会继续学习，继续更新！

效果图:

小米商城原图：

对于那个箭头，只需要加个箭头logo即可。

代码：

<!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>
</head>
<style>
    a {
        text-decoration: none;
        display: block;
        background-color: #6c7f8c;
        width: 290px;
        height: 50px;
        color: #ffffff;
        margin-left:30px;
        line-height:50px;
    }
    
    a:hover {
        background-color: #ff6700;
    }
</style>

<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">笔记本 平板</a>
    <a href="#">家电</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">电源 配件</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
    <a href="#">生活 箱包</a>

</html>