用html和css制作的淘宝小图标显示:
小图标的图片放在我的资源里,如需获取,可以取资源里下载
代码实现:
<!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>Document</title> <style> /* 消除标签自带的样式 */ *{ margin: 0; padding: 0; } .nav-inner{ /* 弹性容器,伸缩盒 */ display: flex; /* 如何分配主轴上的空白空间分布到元素两端 */ justify-content: space-around; } .item{ text-align: center; } /* 设置图片宽度和父元素一样 */ .item img{ width: 100%; } .item a{ /* 消除文本样式 */ text-decoration: none; color: black; font-size: 18px; } </style> </head> <body> <nav class="nav"> <div class="nav-inner"> <div class="item"> <a href="#"> <img src="../image/1.png" alt=""> <span>天猫精品</span> </a> </div> <div class="item"> <a href="#"> <img src="../image/2.png" alt=""> <span>今日爆款</span> </a> </div> <div class="item"> <a href="#"> <img src="../image/3.png" alt=""> <span>天猫国际</span> </a> </div> <div class="item"> <a href="#"> <img src="../image/4.png" alt=""> <span>天猫超市</span> </a> </div> <div class="item"> <a href="#"> <img src="../image/5.png" alt=""> <span>充值中心</span> </a> </div> </div> <div class="nav-inner"> <div class="item"> <a href="#"> <img src="../image/6.png" alt=""> <span>机票酒店</span> </a> </div> <div class="item"> <a href="#"> <img src="../image/7.png" alt=""> <span>金币庄园</span> </a> </div> <div class="item"> <a href="#"> <img src="../image/8.png" alt=""> <span>阿里拍卖</span> </a> </div> <div class="item"> <a href="#"> <img src="../image/9.png" alt=""> <span>淘宝吃货</span> </a> </div> <div class="item"> <a href="#"> <img src="../image/10.png" alt=""> <span>分类</span> </a> </div> </div> </nav> </body> </html>
简单效果图:
html+css布局实例:制作的淘宝小图标的显示
于 2022-03-22 11:20:37 首次发布