简单仿照淘宝界面(HTML+CSS)

最新推荐文章于 2025-04-01 14:40:57 发布

爱爬山的老虎

最新推荐文章于 2025-04-01 14:40:57 发布

阅读量179

点赞数 1

分类专栏：前端学习文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/m0_73001740/article/details/146559753

版权

前端学习专栏收录该内容

12 篇文章

订阅专栏

淘宝界面：

淘宝界面

我的仿照

基础代码(html)：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表练习</title>
  <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<div class="box">
<h2 class="title">全部商品分类</h2>
<ul>
  <li>
    <a href="#">图书</a>
    <a href="#">音像</a>
    <a href="#">数字商品</a>
  </li>
  <li>
    <a href="#">家用电器</a>
    <a href="#">手机</a>
    <a href="#">数码</a>
  </li>
  <li>
    <a href="#">电脑</a>
    <a href="#">办公</a>
  </li>
  <li>
    <a href="#">家具</a>
    <a href="#">家装</a>
    <a href="#">厨具</a>
  </li>
  <li>
    <a href="#">服饰鞋帽</a>
    <a href="#">个性化妆</a>
  </li>
  <li>
    <a href="#">礼品箱包</a>
    <a href="#">钟表</a>
    <a href="#">珠宝</a>
  </li>
  <li>
    <a href="#">食品饮料</a>
    <a href="#">保健食品</a>
  </li>
  <li>
    <a href="#">彩票</a>
    <a href="#">旅行</a>
    <a href="#">充值</a>
    <a href="#">票务</a>
  </li>
</ul>
</div>
</body>
</html>

仿照代码（css）

    background: #ff5000;
    border-radius: 15px;
    width: 30%;
}
.title{
    color: white;
    font-size: 22px;
    font-weight: bolder;
    text-indent: 1em;
}
ul li{
    list-style: none;
}
li a{
    text-decoration: none;
    line-height: 2;
    color: white;
}
li a:hover{
    text-decoration: underline;
    background: white;
    color:orangered;
}