小米商城html/css

导航条——

 <header><div class="header-wrap"><div class="header-left"><ul><li><a href="">小米官网</a></li><li class="space">|</li><li><a href="">小米商城</a></li><li class="space">|</li><li><a href="">MIUI</a></li><li class="space">|</li><li><a href="">IoT</a></li><li class="space">|</li><li><a href="">云服务</a></li><li class="space">|</li><li><a href="">天星数科</a></li><li class="space">|</li><li><a href="">有品</a></li><li class="space">|</li><li><a href="">小爱开放平台</a></li><li class="space">|</li><li><a href="">企业团购</a></li><li class="space">|</li><li><a href="">资质证照</a></li><li class="space">|</li><li><a href="">协议规则</a></li><li class="space">|</li><li><a href="">下载app</a><i class="triangle"></i><div class="download"><img src="./download.png"><p style="font-size:14px ;">小米商城APP</p></div></li><li class="space">|</li><li><a href="">Selec Location</a></li></ul></div><div class="header-right"><ul><li><a href="">登录</a></li><li class="space">|</li><li><a href="">注册</a></li><li class="space">|</li><li><a href="">消息通知</a></li><li class="space">|</li><li class="cart"><a href=""><i class="iconfont icon-gouwuche"></i>购物车(0)</a><div class="cart-menu"><span>购物车中还没有商品，赶紧选购吧!</span></div></li></ul></div></div></header>

CSS样式——

/* 头部开始 */
header{width: 100%;height: 40px;background-color: #333;
}
.header-wrap{width: 1226px;height: 40px;margin: 0 auto;line-height: 40px;font-size: 12px;
}
.header-wrap a{color: #b0b0b0;
}
.header-left ul>li:hover>a{color: #fff;
}
.header-right li:not(.cart):hover>a{color: #fff;
}
.header-left{float: left;
}
header li{position: relative;padding-left: 2.5px;padding-right: 2.5px;
}
.header-left li{float: left;
}
/* 二维码 */
.download{z-index: 20;width: 124px;height: 0;overflow: hidden;transition: all .7s;text-align: center;line-height: 28px;background-color: #fff;box-shadow: 0 2px 10px rgb(0 0 0 / 15%);position: absolute;top: 40px;left: 50%;margin-left: -62px;
}
.download>img{width: 90px;margin: 18px 15px 12px;
}
li:hover>.download{height: 160px;
}
/* 三角形 */
.triangle{width: 0px;height: 10px;border: 10px solid;border-color:transparent transparent #fff transparent; position: absolute;right: 10px;top: 10px;visibility: hidden;
}
.header-left>ul>li:hover>i{visibility: visible;
}.header-right{float: right;
}
.header-right li{float: left;
}
/* 购物车 */
.cart{width: 120px;height: 40px;background-color: rgba(96, 96, 96,0.3);text-align: center;position: relative;
}
.cart i{margin-right: 4px;
}
.cart:hover>a{color:#ff6700;
}
.cart:hover{background-color: #fff;
}
.cart-menu{z-index: 10;width: 316px;height: 0;overflow: hidden;text-align: center;position: absolute;line-height:80px ;top: 40px;right: 0;background-color: #fff;box-shadow: 0 2px 10px rgb(0 0 0 / 15%);transition: all .7s;}
.cart:hover .cart-menu{height: 80px;
}
/* 头部结束 */

如有错误，欢迎指正！

小米商城html/css相关推荐

HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
HTML期末大作业仿小米商城网页设计与制作(HTML+CSS+JavaScript) JavaScript期末大作业 web前端期末大作业 dw静态网页
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品常见网页设计作业题材有个人. 美食 ...
小米商城网页版（js+css）
js: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
文章目录前言一.登录页二.首页三.我的购物车页四.我的订单页五.确认订单页六.详情页七.整体结构和效果图总结前言仿小米商城官网项目是本人实训内容,实训老师带着做的首页和登录页,本 ...
网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) 文章目录 HTML5期末大作业:网页设计--小米商城官网首页(1页) 一.作品展示二.文件目录三.代码实现四.完整源码一.作品展示 ...
Web课程设计——小米商城页面实战（html，css，js实现）
主要完成了三个页面,效果如下: 主页面html部分源码: <!DOCTYPE html> <html lang="zh-cn"><head> ...
学习CSS——小米商城官网（第9、10天）
记录自己用所学全部前端知识完成模仿小米商城官网的全过程 1.目前所学全部知识的思维导图 2.小米商城官网原图+我的代码实现效果图 3.具体步骤用F12打开链接将需要的图保存下来,有些图标是用代码实现 ...
css伪元素实现小米商城顶部图标切换
小米商城顶部header图标效果:点击查看效果描述:鼠标划上,换成home图标, 思路:使用before和after伪元素设置图片,鼠标hover时改变margin值: html: <div ...

小米商城html/css

小米商城html/css相关推荐

最新文章

热门文章