小米官网首页标题制作持续更新中

对于小米官网商城的网页设计，我将以导航，主题，和结尾三部分陆续发布

关于导航栏，说难也不难，就是移入出现移除没有要费力一点

下面是HTML代码

   <!-- 头部开始 --><div class="header"><div id="n"><ul class="left"><li><a href="#">小米官网</a><span>|</span></li><li><a href="#">小米商城</a><span>|</span></li><li><a href="#">MIUI</a><span>|</span></li><li><a href="#">loT</a><span>|</span></li><li><a href="#">云服务</a><span>|</span></li><li><a href="#">天星数科</a><span>|</span></li><li><a href="#">有品</a><span>|</span></li><li><a href="#">小爱开放平台</a><span>|</span></li><li><a href="#">企业团购</a><span>|</span></li><li><a href="#">资质证照</a><span>|</span></li><li><a href="#">协议规则</a><span>|</span></li><li><a href="#">下载app</a><span>|</span><div class="erweima"><img src="./产品img/download.png"><p>小米商城APP</p></div>

其中移入下拉是用hover写的，对于全部的css代码，如下：

   *{margin: 0;padding: 0;list-style: none;text-decoration: none;}.header{width: 100%;height: 40px;background-color: #333;line-height: 40px;}#n{width: 1226px;margin: 0 auto;}.left{float: left;}.right{float: right;}.left>li{float: left;}.right>li{float: left;}#n li{float: left;position: relative;height: 40px;}li a{color: #b0b0b0;font-size: 12px;}#n span{color: #424242;margin: 0 3.6px;font-size: 12px;}a:hover{color: #fff;

购物车的样式：

 /*购物车样式*/.gouwuche{position: relative;width: 120px;height: 40px;background-color: #424242;margin-left: 25px;text-align: center;}.gouwuche:hover{background-color: #fff;}.gouwuche:hover>a{color: #ff6700;}.icon-gouwuche{background-color: #fff;border: 1px solid #b3b1b1;}.xiala{position: absolute;right: 0;top: 40px;width: 316px;/*隐藏的高度设置为0*/height: 0;line-height: 100px;background-color: #fff;box-shadow: 0 2px 10px rgba(0,0,0,.15);color: #424242;font-size: 12px;transition: all .3s;overflow: hidden;}.gouwuche:hover> .xiala{height: 100px;}

下载APP下拉界面二维码，其中用到了定位

 /* 二维码 */.erweima{position: absolute;z-index: 999;top: 40px;left: 50%;margin-left: -62px;width: 124px;height:0;overflow: hidden;background-color: #fff;box-shadow: 0 1px 5px #aaa;transition: all .3s;}.erweima>img{display: block;width: 90px;margin: 18px auto 12px;}.erweima>p{color: #333;font-size: 14px;line-height: 1;text-align: center;}.left>li:hover>.erweima{height: 148px;

还有下拉页面的三角形：

 /* 三角形 */.sanjiaoxing{display: none;position: absolute;bottom: 0;left: 50%;margin-left: -8px;width: 0;height: 0;border-bottom: 8px solid #fff;border-left: 8px solid transparent;/* 透明 */border-right: 8px solid transparent;}.left>li:hover>.sanjiaoxing{display: block;}

最后的样子就是这样

购物车

下一篇博客会持续更新下面的内容，敬请期待！！！

小米官网首页标题制作持续更新中相关推荐

【2021最新】各大公司招聘官网链接汇总（持续更新中）
序号公司名称招聘官网 1 阿里巴巴 https://job.alibaba.com/zhaopin/index.htm 2 腾讯 https://careers.tencent.com/jobop ...
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
android相关问题、网摘集锦（持续更新中...）
1,如何将不同大小的图片都设置成手机屏幕大小显示? http://topic.csdn.net/u/20101112/16/df392ae4-42e2-4fe3-bcb9-98c8c2430d52.h ...
小米官网登陆页面制作
1.效果图 2.所搭建文件 3.index.html文件 <!DOCTYPE html> <html lang="en"> <head> < ...
web前端大作业(基于HTML+CSS+JavaScript仿阴阳师游戏官网首页作业制作)
小米官网新头部logo保存CSS中显示不全问题
在学HTML5&CSS3中,项目练习:仿写小米商城主页做到logo部分,发现小米今年换了生命圆版新logo.图片尺寸为192*192,跟着老师代码敲logo只能显示一小部分. 视频中老师使用 ...
仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米官网右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
c语言编程之美输入二叉树,八方体育网址多少-官网首页
用户要不是最近换了工作的原因,我觉得我根本没有可能去用MSN,这部微软的老爷车99年开始发布到现在已经有10几个年头了,这么多年一直没有什么进步却还能一直活着,这的确是一个奇迹.12年底,微软证实 ...

小米官网首页标题制作持续更新中

小米官网首页标题制作持续更新中相关推荐

最新文章

热门文章

小米官网首页标题制作 持续更新中

小米官网首页标题制作 持续更新中相关推荐

最新文章

热门文章

小米官网首页标题制作持续更新中

小米官网首页标题制作持续更新中相关推荐