html+css制作小米商城官网初尝试
2024-04-15 21:16:28
看着攻略一点点摸索花了几个小时的时间用html+css制作了小米商城的官网，还有很多的不足之处，后面会继续进行修改完善。
1. 轮播图的小点点不知道怎么添加、设置样式、hover；
2. header最左边的“小米官网”不知道怎么设置向左偏移一些；
3. 第二行搜索栏中间没有和右侧垂直居中对齐；
4.因为是自学，一些定位、浮动、块元素等基础点还不是特别熟悉，需要一点点修改尝试。
还需要继续努力呀！
以下为小米官网预览图：
这是我对着官网敲出来的预览图
先敲出来该页面最初布局的HTML：
<body><!--设置整个容器：container--> <div class="container"><!--设置页面最上方：header--> <div class="header"><div class="header-left"><a href="#">小米官网 <span class="stick">|</span></a><a href="#">小米商城 <span class="stick">|</span></a><a href="#">MIUI <span class="stick">|</span></a><a href="#">loT <span class="stick">|</span></a><a href="#">云服务 <span class="stick">|</span></a><a href="#">天星数科 <span class="stick">|</span></a><a href="#">有品 <span class="stick">|</span></a><a href="#">小爱开放平台 <span class="stick">|</span></a><a href="#">企业团购 <span class="stick">|</span></a><a href="#">资质证照 <span class="stick">|</span></a><a href="#">协议规则 <span class="stick">|</span></a><a href="#">下载app <span class="stick">|</span></a><a href="#">Select Location</a></div><div class="header-right"><a href="#">登陆 <span class="stick">|</span></a><a href="#">注册 <span class="stick">|</span></a><a href="#" class="notice">消息通知</a><a href="#" class="shoppingcart"><i class="fas fa-shopping-cart"></i>购物车 (0)<div class="hidden">购物车中还没有商品，赶紧选购吧！</div></a></div></div><!--设置logo所在的一行logoline--> <div class="logoline"><div class="logoline-left"><a href="logo"><img src="./练习用图片/logo-小米.png" alt="logo-小米"> </a></div><div class="logoline-middle"><a href="#">Xiaomi手机</a><a href="#">Redmi手机</a><a href="#">电视</a><a href="#">笔记本</a><a href="#">平板</a><a href="#">家电</a><a href="#">路由器</a><a href="#">服务中心</a><a href="#">社区</a></div><div class="logoline-right"><form action="../07.html补充/target.html"><input type="text" placeholder="手机" class="input"><button class="search" type="button"><i class="fas fa-search"></i></button></form></div></div><!--设置该页面主要内容content--> <div class="content"><div class="content-left"><li> <a href="#">手机 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">电视 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">笔记本 平板 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">出行 穿戴 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">耳机 音响 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">家电<span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">智能 路由器 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">电源 配件 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">健康 儿童 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li><li> <a href="#">生活 箱包 <span class="arrow"><i class="fas fa-angle-right"></i></span></a></li></div><div class="content-right"><a href="#"><img src="./练习用图片/小米练习大图1.jpeg" alt=""></a></div></div><!--设置该页面最下方footer--> <div class="footer"><div class="footer-left"><div class="square"> <a href="#" class="Ssy"><img src="./练习用图片/小logo1.png" class="Spic"><br>保障服务</a></div><div class="square"> <a href="#" class="Ssy"><img src="./练习用图片/小logo2.png" class="Spic"><br>企业团购</a></div><div class="square"> <a href="#" class="Ssy"><img src="./练习用图片/小logo3.png" class="Spic"><br>F码通道</a></div><div class="square"> <a href="#" class="Ssy"><img src="./练习用图片/小logo4.png" class="Spic"><br>米粉卡</a></div><div class="square"> <a href="#" class="Ssy"><img src="./练习用图片/小logo 5.png" class="Spic"><br>以旧换新</a></div><div class="square"> <a href="#" class="Ssy"><img src="./练习用图片/小logo6.png" class="Spic"><br>以旧换新</a></div></div><div class="footer-right1"><a href="#" class="footer-img"> <img src="./练习用图片/小米中图1.jpeg" alt=""> </a></div><div class="footer-right2"><a href="#" class="footer-img"> <img src="./练习用图片/小米中图2.jpeg" alt=""> </a></div><div class="footer-right3"><a href="#" class="footer-img"> <img src="./练习用图片/小米中图3.jpeg" alt=""> </a></div></div>
</body>
接下来用CSS修改样式：
.container {width: 1250px;margin: 0 auto;}/* 设置header的CSS */.header {width: 100%;height: 40px;font-size: 12px;font-family: Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;background-color: #333;line-height: 40px;margin: 0 auto;position: relative;}.header a {text-decoration: none;color: #b0b0b0;}.header a:hover {color: white;}.header a .stick {font-size: 16px;color: #424242;margin: 0 0.3em;}.header-left {float: left;}.header-right {float: right;}.header-right .notice {padding: 0 10px;}.header-right .shoppingcart {display: block;float: right;padding: 0 15px;}.header-right .shoppingcart .hidden {width: 300px;height: 200px;color: black;background-color: white;position: absolute;display: none;}/*. logo所在行的CSS */.logoline {display: block;width: 100%;height: 88px;display: flex;justify-content: space-between;align-items: center;margin: 0 auto;}.logoline img {width: 56px;height: 56px;}.logoline-middle a {font-size: 16px;margin-left: 15px;color: #333;text-decoration: none;}.logoline-middle a:hover {color: #FF5B00;}.logoline-right .input {line-height: 14px;width: 245px;height: 50px;border: 1px solid #E0E0E0;margin-top: 22px;font-size: 14px;outline: none;float: left;}.logoline-right .input:hover {line-height: 14px;width: 245px;height: 50px;border: 1px solid #9b9898;margin-top: 22px;font-size: 14px;outline: none;float: left;}button:hover {margin-top: 22px;float: left;right: 0;width: 50px;height: 54px;font-size: 24px;background: #FF5B00;border: 1px solid #FF5B00;line-height: 24px;color: #FFFFFF;}.search {margin-top: 22px;float: left;right: 0;width: 50px;height: 54px;font-size: 24px;background: #ffffff;border: 1px solid #E0E0E0;line-height: 24px;}/*. 主要内容栏的CSS */.content {width: 100%;height: 460px;display: flex;justify-content: space-between;align-items: center;margin: 0 auto;}.content-left {background: rgba(105, 101, 101, .6);width: 234px;height: 420px;padding: 20px 0;}.content-left li {list-style: none;padding: 0 0 0 30px;position: relative;}.content-left li a {text-decoration: none;display: inline-block;width: 204px;height: 42px;font-size: 14px;line-height: 14px;color: white;}.arrow {font-size: 14px;line-height: 14px;position: absolute;left: 200px;}.content-right img {width: 1092px;height: 460px;}
/*. 设置footer的CSS */.footer {width: 100%;height: 210px;display: flex;justify-content: space-between;align-items: center;margin: 0 auto;}.footer-left {height: 170px;width: 234px;display: grid;grid-template-rows: 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;position: relative;}.square {width: 76px;height: 83px;background-color: #615750;text-align: center;border: #685E57 1px solid;}.Ssy {text-decoration: none;color: #FFFFFF;font-size: 12px;}.Spic {width: 24px;height: 24px;margin-top: 22px;}.Ssy:hover {color: #FFFFFF;font-size: 12px;}.footer-right1 img {height: 170px;width: 315px;}.footer-right2 img {height: 170px;width: 315px;}.footer-right3 img {height: 170px;width: 315px;}html+css制作小米商城官网初尝试相关推荐
- HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
- 静态小米官网主页html5设计,web案例-css制作小米官网产品展示
web前端群,189394454,有视频.源码.学习方法等大量干货分享 效果知识点: 企业布局思维的巧妙运用, DIV加CSS,css样式拆解与归类,css3过度与阴影,定位与动,常用如何搭配,开发标 ...
- HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业:商城网站设计--小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计 ...
- HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- 小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
文章目录 前言 一.登录页 二.首页 三.我的购物车页 四.我的订单页 五.确认订单页 六.详情页 七.整体结构和效果图 总结 前言 仿小米商城官网项目是本人实训内容,实训老师带着做的首页和登录页,本 ...
- 网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) 文章目录 HTML5期末大作业:网页设计--小米商城官网首页(1页) 一.作品展示 二.文件目录 三.代码实现 四.完整源码 一.作品展示 ...
- 学习CSS——小米商城官网（第9、10天）
记录自己用所学全部前端知识完成模仿小米商城官网的全过程 1.目前所学全部知识的思维导图 2.小米商城官网原图+我的代码实现效果图 3.具体步骤 用F12打开链接将需要的图保存下来,有些图标是用代码实现 ...
- 运用HTML+CSS+JS简单制作苹果官网首页
运用HTML+CSS+JS制作苹果官网首页 上次例会所留任务是用上HTML+CSS+JS做一个网页.内容自定. 我想的是做一个苹果官网首页的网页. 大概是这样的:苹果官网首页 我所做的和它相差不多 不 ...
- 项目实战：小米商城官网及秒杀高仿（html+css+js）
导读:秒杀的检索结果,小米官方网站包含秒杀价格及秒杀适配机型,官方推荐秒杀产品,帮助米粉挑选合适自己的秒杀商品. 仿小米手机商城的全套页面.包含首页,订单页,列表页,商品详情页,个人中心,购物车,等等 ...
- 游戏网站的设计与实现（HTML和CSS实现魔兽世界官网）
学习游戏网站的设计与实现(HTML和CSS实现魔兽世界官网),本文实现该系统的功能截图,HTML和CSS部分关键语句,系统功能图等供大家参考 整个页面是由很多很多DIV标签和ul标签构成 /*部分代码 ...
最新文章
- QIIME 2教程. 03老司机上路指南Experience(2020.11)
- 初识Vue，写的一些小练习
- KahanSummation算法
- 图解分布式系统架构演进之路
- iOS中NSString转换成HEX（十六进制）-NSData转换成int
- Android PermissionUtils：运行时权限工具类及申请权限的正确姿势
- C#备份数据和还原数据
- ThinkPHP整合百度Ueditor图文教程
- [转]Java常用概念解答
- 聚焦四大领域，恒生电子发布2022年金融科技技术与应用趋势
- 想说爱你不容易，浏览器缓存浅谈
- 又崩了？苹果发生大规模网络故障：多项服务受影响 目前已恢复
- Python 爬虫 (三) - Socket 网络编程
- android Fragment缓存问题
- 字节跳动-大数据研发面试准备
- 输出全靠画html5在线玩4399,输出全靠画
- 基于Python的GUI图形用户界面编程
- (文末送书)字符数组与字符串
- svg文件解析(python)
- 图片自适应父元素大小，并左右上下居中的css方法