html+css布局实例:制作的淘宝小图标的显示
用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布局实例:制作的淘宝小图标的显示相关推荐
- 使用WEX5移动开发工具制作仿淘宝APP
毕业设计-使用WEX5移动开发工具制作仿淘宝APP 系统设计的意义 本课题来源于对日常逛超市.购物的生活体验和指导老师的提示.本系统是基于 WeX5的仿淘宝App系统,它商家们提供了一个更广阔的商品推 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- Ecshop 商品页配送方式添加 实现仿淘宝按地区显示运费
Ecshop实现仿淘宝按地区显示运费 淘宝网(Taobao)购物的宝贝详情页面,可以针对不同地区显示不同运费,运费由后台设定:结算时间,按重量.件数计算运费.Ecshop本身有配送方式插件,已有多家物 ...
- div+css布局实例淘宝分析(三)(1)
在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站 ...
- HTML+CSS大作业——仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计
HTML5期末大作业 文章目录 HTML5期末大作业 一.作品展示 二.文件目录 三.代码实现 一.作品展示 二.文件目录 三.代码实现 <!doctype html> <html ...
- html网页制作——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业C71
HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业 常见网页设计作业题材有 个人. ...
- 手机端rem布局详解(淘宝无限适配)
这是淘宝的github网址,里面有适配所需的js还有说明文档 地址:https://github.com/amfe/lib-flexible 1. 问题的引出 最近阅读白树的博文<移动web资源 ...
- php div 实现上中下布局,上中下结构DIV CSS布局实例
实例布局之上中下结构DIV CSS布局 上中下结构为常见布局结构,一般普通(企业网站)网页我们可以大致分为上(头部).中(内容区).下(底部版权)组成.而这其实是由最简单上下结构CSS布局演变而成,只 ...
最新文章
- 阿里云态势感知服务(上篇)
- 5.5 SVM补充-机器学习笔记-斯坦福吴恩达教授
- 解决Linux下MySQL启动错误Starting MySQL.Manager of pid-file quit without updating file.[FAILED]...
- Android Gradle(三)Groovy快速入门指南
- 前端学HTTP之字符集
- 耶鲁大学计算机科学录取,2020年耶鲁大学排名TFE Times美国最佳计算机科学硕士专业排名第18...
- cp abe java_CP-ABE环境配置
- python编程-Python 网络编程
- python读取文件夹下所有文件名_python如何获取当前文件夹下所有文件名详解
- 用Github的Api发现stars最多开源项目
- CubeMX编写风力摆控制系统[HAL库]
- 链表(c语言),c语言链表(c语言链表详解)
- 数学与计算机专业的论文,数学与计算机论文
- android短消息中心号码,短信服务中心号码(SMSC)的设置方法
- SpringCloud 分布式日志采集方案
- ML-Agents 安装配置 【ML-Agents 官方文档翻译(ML-Agent 1.9.1,Unity 2018-2020)】
- 天津大学仁爱学院计算机科学与技术学费,天津大学仁爱学院计算机科学与技术专业2016年在山西理科高考录取最低分数线...
- 【100%通过率 】华为OD真题c++/java/python【完美走位】【 2022 Q4 | 100分】
- 如何在Win11调出IE11浏览器?
- 云片 php sms接口视频,Laravel、云片网络短信发送PHP SDK