目标:
实现小米商城的静态实现
效果:


原版:


代码:
html

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>小米商城 - 小米9 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title><meta name="description" content="小米商城直营小米公司旗下所有产品，包括小米手机系列小米CC9 美图手机定制版、小米9、小米MIX Alpha，Redmi 红米系列Redmi K30、Redmi Note 8，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持"><meta name="keywords" content="小米,RedmiNote8Pro,小米cc9,Redmi K30,美图手机,小米MIX Alpha,小米商城"><link rel="stylesheet" href="CSS/index.css"><link rel="stylesheet" href="CSS/style.css">
</head>
<body><!--导航--><nav id="header"><div class="header-main"><div class="header-main-left"><ul><li><a href="">小米商城</a><span>|</span></li><li><a href="">MIUI</a><span>|</span></li><li><a href="">IoT</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></li><li><a href="">Select Location</a></li></ul></div><div class="header-main-right"><ul><li><a href="">登录<span>|</span></a></li><li><a href="">注册<span>|</span></a></li><li><a href="">消息通知</a></li><li><img src="data:images/shopping.png" alt=""><a href="">购物车(0)</a></li></ul></div></div></nav><!--主体--><section id="main"><div class="main-top"><div class="main-top-header"><div class="main"><ul><li><a href="">小米手机</a></li><li><a href="">Redmi红米</a></li><li><a href="">电视</a></li><li><a href="">笔记本</a></li><li><a href="">家电</a></li><li><a href="">路由器</a></li><li><a href="">智能硬件</a></li><li><a href="">服务</a></li><li><a href="">社区</a></li></ul></div><div class="left"><div class="left-logo"><img src="data:images/logo.jpg" alt=""></div></div><div class="right"><form action="https://blog.csdn.net/KaiSarH"><label><input name="goods" type="text"><input type="submit" value="查询"></label></form></div></div><div class="main-top-body"><div class="main-top-body-left"><ul><li><a href="">手机 电话卡<span class="icon-uniE901"></span></a></li><li><a href="">电视 盒子<span class="icon-uniE901"></span></a></li><li><a href="">笔记本 显示屏 平板<span class="icon-uniE901"></span></a></li><li><a href="">家电 插线板<span class="icon-uniE901"></span></a></li><li><a href="">出行 穿戴<span class="icon-uniE901"></span></a></li><li><a href="">智能 路由器<span class="icon-uniE901"></span></a></li><li><a href="">电源 配件<span class="icon-uniE901"></span></a></li><li><a href="">健康 儿童<span class="icon-uniE901"></span></a></li><li><a href="">耳机 音响<span class="icon-uniE901"></span></a></li><li><a href="">生活 箱包<span class="icon-uniE901"></span></a></li></ul></div><div class="main-top-body-right"><div class="header-main-right-img"><img src="data:images/商品1.jpg" alt=""></div></div></div><div class="main-top-footer"><div><a href=""><span>小米秒杀</span></a><a href=""><span>企业团购</span></a><a href=""><span>F码通道</span></a><a href=""><span>米粉卡</span></a><a href=""><span>以旧换新</span></a><a href=""><span>话费充值</span></a></div><div><img src="data:images/商品①.jpg" alt=""></div><div><img src="data:images/商品②.jpg" alt=""></div><div><img src="data:images/商品③.jpg" alt=""></div></div></div><div class="main-content"><div class="main-content-cell1"><div class="main-content-cell1-top"><span>手机</span><a href="">查看全部</a></div><div class="main-content-cell1-left"><img src="data:images/手机.jpg" alt=""></div><div class="main-content-cell1-right"><div><img src="data:images/手机1.jpg" alt=""><span>Redmi K30</span><br><span>120Hz流速屏,全速热爱</span><br><span>1599元起</span></div><div><img src="data:images/手机2.jpg" alt=""><span>Redmi K30 5G</span><br><span>双模5G,120Hz流速屏</span><br><span>1999元起</span></div><div><img src="data:images/手机3.jpg" alt=""><span>小米CC9 Pro</span><br><span>1亿像素 五摄四闪</span><br><span>2799元起</span></div><div><img src="data:images/手机4.jpg" alt=""><span>小米9 Pro 5G</span><br><span>5G双卡全网通,骁龙855Plus</span><br><span>3699元起</span></div><div><img src="data:images/手机5.jpg" alt=""><span>Redmi 8</span><br><span>5000mAh超长续航</span><br><span>749元起</span><span>799元</span></div><div><img src="data:images/手机6.jpg" alt=""><span>Redmi 8A</span><br><span>5000mAh超长续航</span><br><span>699元起</span></div><div><img src="data:images/手机7.jpg" alt=""><span>Redmi Note 8Pro</span><br><span>6400万全场景四摄</span><br><span>1299元起</span><span>1399元</span></div><div><img src="data:images/手机8.jpg" alt=""><span>Redmi Note8</span><br><span>千元4800万四摄</span><br><span>999元起</span></div></div></div></div></section><!--尾部--><footer id="footer"><div class="footer-content"><div class="footer-content-top"><div class="footer-content-top-1"><div><img src="data:images/维修.png" alt=""><a href="">预约维修服务</a>></div><div><img src="data:images/7天退换.png" alt=""><a href="">7天无理由退货</a></div><div><img src="data:images/15天无理由退货.png" alt=""><a href="">15天免费换货</a></div><div><img src="data:images/礼物.png" alt=""><a href="">满150元包邮</a></div><div><img src="data:images/定位.png" alt=""><a href="">520余家售后网点</a></div></div><hr><div class="footer-content-top-2"><div class="footer-content-top-2-left"><div><ul><li>帮助中心</li><li><a href="">账户管理</a></li><li><a href="">购物指南</a></li><li><a href="">订单操作</a></li></ul></div><div><ul><li>服务支持</li><li><a href="">售后政策</a></li><li><a href="">自助服务</a></li><li><a href="">相关下载</a></li></ul></div><div><ul><li>线下门店</li><li><a href="">小米之家</a></li><li><a href="">服务网点</a></li><li><a href="">授权体验店</a></li></ul></div><div><ul><li>关于小米</li><li><a href="">了解小米</a></li><li><a href="">加入小米</a></li><li><a href="">投资者关系</a></li></ul></div><div><ul><li>关注我们</li><li><a href="">新浪微博</a></li><li><a href="">官方微信</a></li><li><a href="">联系我们</a></li></ul></div><div><ul><li>特色服务</li><li><a href="">F码查询</a></li><li><a href="">礼物码</a></li><li><a href="">防伪查询</a></li></ul></div></div><div class="footer-content-top-2-right"><span>400-100-5678</span><br><span>周一至周日 8:00-18:00</span><br><span>（仅收市话费)</span><br></div></div></div><div class="footer-content-middle"></div><div class="footer-content-bottom"><span>探索黑科技,小米为发烧而生!</span></div></div></footer>
</body>
</html>

CSS

/*公共样式---start*/
*{margin: 0;padding: 0;text-decoration: none;list-style: none;box-sizing: border-box;
}html{font-size: 10px;
}
body{font-size: 1.6rem;
}
/*公共样式---end*//*导航---start*/
nav{width: 100%;height: 4rem;background-color: #333;
}nav .header-main{height: 4rem;width: 122.6rem;/*background-color: red;*/margin: 0 auto;display: flex;font-size: 1.2rem;
}nav .header-main .header-main-left{/*background-color: yellow;*/flex:7.5;vertical-align: top;}
nav .header-main .header-main-left ul{display: flex;
}
nav .header-main .header-main-left ul li{margin: 1.2rem 0;
}
nav .header-main .header-main-left ul li span{margin: 1.2rem 0.5rem;color: #424242;
}
nav .header-main .header-main-left ul li a{color: #b0b0b0;
}nav .header-main .header-main-left ul li a:hover{color: white;
}nav .header-main .header-main-right{/*background-color: green;*/flex:2.5;
}
nav .header-main .header-main-right ul{display: flex;
}
nav .header-main .header-main-right ul li{margin: 1.2rem 0;
}nav .header-main .header-main-right ul li:last-child{margin: 0 auto;line-height: 4rem;padding: 0 2rem;background-color: #424242;
}
nav .header-main .header-main-right ul li:last-child img{height: 1.8rem;width: 1.8rem;
}nav .header-main .header-main-right ul li:last-child a{vertical-align: top;
}
nav .header-main .header-main-right ul li:last-child a:hover{color: darkorange;
}
nav .header-main .header-main-right ul li a{color: #b0b0b0;
}
nav .header-main .header-main-right ul li a:hover{color: white;
}
nav .header-main .header-main-right ul li span{margin: 1.2rem 0.5rem;color: #424242;
}/*导航---end*//*主题---start*/section{height: 100%;width: 100%;/*background-color: red;*/background: #f5f5f5;
}section .main-top{height: 75rem;width: 100%;
}section .main-top .main-top-header{height: 10rem;width: 122.6rem;min-width: 122.6rem;/*background-color: yellow;*/padding: 0 40rem 0 20rem;margin: 0 auto;
}section .main-top .main-top-header .main{width: 100%;height: 10rem;/*background-color: red;*/float: left;
}section .main-top .main-top-header .main ul li{float: left;
}
section .main-top .main-top-header .main ul li a{line-height: 10rem;margin: 0 1rem;color: #333;
}
section .main-top .main-top-header .main ul li a:hover{color: #ff6700;
}
section .main-top .main-top-header .left{width: 20rem;height: 10rem;/*background-color: green;*/float: left;margin-left: -100%;position: relative;left: -20rem;}section .main-top .main-top-header .left .left-logo{height: 100%;width: 100%;/*background-color: red;*/
}section .main-top .main-top-header .left .left-logo img{height: 6rem;width: 6rem;margin: 2rem 1rem;
}section .main-top .main-top-header .right{width: 40rem;height: 10rem;/*background-color: green;*/float: left;margin-left: -40rem;position: relative;right: -40rem;
}section .main-top .main-top-header .right form{height: 10rem;width: 50rem;/*background-color: red;*/
}
section .main-top .main-top-header .right form input:first-child{margin: 3rem 0 3rem 2rem;height: 5rem;width: 29rem;/*background-color: red;*/border: 1px solid #b0b0b0;
}
section .main-top .main-top-header .right form input:last-child{height: 5rem;width: 4rem;margin: 0;background-color: white;border: 1px solid #b0b0b0;
}section .main-top .main-top-header .right form input:first-child:hover,
section .main-top .main-top-header .right form input:last-child:hover{border: 1px solid #696969;
}section .main-top .main-top-body{height: 46rem;width: 122.6rem;/*background-color: red;*/margin: 0 auto;
}
section .main-top .main-top-body .main-top-body-left{height: 46rem;width: 23.6rem;padding: 2rem 0;background-color: rgba(105,101,101,.6);font-size: 14px;float: left;
}
section .main-top .main-top-body .main-top-body-left:hover{cursor: pointer;
}section .main-top .main-top-body .main-top-body-left ul{width: 100%;
}
section .main-top .main-top-body .main-top-body-left ul li{width: 100%;height: 4.2rem;line-height: 4.2rem;position: relative;
}
section .main-top .main-top-body .main-top-body-left ul li:hover{background-color: #ff6700;
}
section .main-top .main-top-body .main-top-body-left ul li a{color: white;padding-left: 3rem;
}
section .main-top .main-top-body .main-top-body-left ul li span{position: absolute;right: 1rem;top: 30%;
}
section .main-top .main-top-body .main-top-body-right{height: 46rem;width: 99rem;/*background-color: red;*/font-size: 14px;float: left;
}
section .main-top .main-top-body .main-top-body-right img{height: 46rem;width: 100%;top: 0;
}
section .main-top .main-top-footer{height: 17rem;width: 122.6rem;display: flex;margin: 0 auto;/*background-color: red;*/padding: 2rem 0 0 0 ;justify-content: space-between;
}
section .main-top .main-top-footer div{height: 15rem;width: 20rem;background-color: yellow;
}
section .main-top .main-top-footer div:nth-child(n+2){display: inline-block;height: 15rem;width: 31.6rem;
}section .main-top .main-top-footer div:nth-child(1){height: 15rem;width: 23.6rem;background-color: #5f5750;font-size: 1.2rem;
}section .main-top .main-top-footer div:nth-child(1) span{display: inline-block;height: 8.2rem;width: 7.6rem;color: #fff;padding-top: 2.5em;padding-left: 1rem;
}section .main-top .main-top-footer div:nth-child(n+2) img{height: 100%;width: 100%;
}section .main-content{height: 75rem;width: 122.6rem;/*background: red;*/margin: 0 auto;
}
section .main-content .main-content-cell1-top{height: 5.733rem;width: 100%;/*background-color: yellow;*/line-height: 5.733rem;position: relative;
}
section .main-content .main-content-cell1-top a{position: absolute;right: 0;color: #333;font-size: 1rem;
}
section .main-content .main-content-cell1-top a:hover{color: #ff6700;
}section .main-content .main-content-cell1-left{height: 61.4rem;width: 23.4rem;float: left;
}
section .main-content .main-content-cell1-left img{height: 100%;width: 100%;
}section .main-content .main-content-cell1-right{height: 61.4rem;width: 99.2rem;/*background-color: red;*/float: left;display: flex;flex-wrap: wrap;
}
section .main-content .main-content-cell1-right div{height: 30rem;width: 23.4rem;margin: 0 0 1.4rem 1.4rem;/*background-color: yellow;*/text-align: center;
}
section .main-content .main-content-cell1-right div img{height: 16rem;width: 16rem;margin: 3rem 3.7rem 3rem 3.7rem;
}
section .main-content .main-content-cell1-right div span:nth-of-type(1){font-size: 1.4rem;color: #333
}
section .main-content .main-content-cell1-right div span:nth-of-type(2){font-size: 1.2rem;color: #b0b0b0;/*color: red;*/
}
section .main-content .main-content-cell1-right div span:nth-of-type(3){font-size: 1.2rem;color: #ff6700;
}
section .main-content .main-content-cell1-right div span:nth-of-type(4){font-size: 1.2rem;color: #b0b0b0;text-decoration: line-through
}footer{height: 100%;width: 100%;
}
footer .footer-content{height: 100rem;width: 122.6rem;margin: 0 auto;/*background-color: red;*/
}
footer .footer-content .footer-content-top{height: 27.2rem;width: 100%;/*background-color: yellow;*/
}
footer .footer-content .footer-content-top .footer-content-top-1{height: 8rem;width: 100%;/*background-color: green;*/display: flex;justify-content:space-around
}
footer .footer-content .footer-content-top .footer-content-top-1 div{height: 8rem;line-height: 8rem;
}footer .footer-content .footer-content-top .footer-content-top-1 div a{color: #616161;font-size: 1.3rem;
}
footer .footer-content .footer-content-top .footer-content-top-1 div img{height: 2rem;width: 2rem;
}
footer .footer-content .footer-content-top hr{color: #616161;
}
footer .footer-content .footer-content-top .footer-content-top-2{height: 19.2rem;width: 70%;position: relative;/*background-color: red;*/
}
footer .footer-content .footer-content-top .footer-content-top-2-left{display: flex;justify-content: space-between;
}
footer .footer-content .footer-content-top .footer-content-top-2-left ul li:nth-child(1){height: 8rem;line-height: 8rem;font-size: 1.4rem;color: #424242;margin-left: 0.5rem;
}
footer .footer-content .footer-content-top .footer-content-top-2-left ul li:nth-child(2),
footer .footer-content .footer-content-top .footer-content-top-2-left ul li:nth-child(3),
footer .footer-content .footer-content-top .footer-content-top-2-left ul li:nth-child(4){height: 3rem;font-size: 1rem;line-height: 3rem;margin-left: 0.5rem;
}
footer .footer-content .footer-content-top .footer-content-top-2-left ul li a{color:#757575;
}
footer .footer-content .footer-content-top .footer-content-top-2-right{text-align: center;position: absolute;width: 100%;left : 67rem;top: 7rem;
}
footer .footer-content .footer-content-top .footer-content-top-2-right span:first-child{font-size: 1.8rem;color: #ff6700;
}
footer .footer-content .footer-content-top .footer-content-top-2-right span:nth-child(3),
footer .footer-content .footer-content-top .footer-content-top-2-right span:nth-child(5){font-size: 1.2rem;color:#757575;
}.footer-content-bottom{text-align: center;
}
.footer-content-bottom span{color: #cdcdcd;font-size: 2rem;
}

很多细节没有做,刚开始正式接触前端这款,属实还非常菜.

实战CSS：小米商城静态实现相关推荐

  1. java Web程序使用wro4j合并、压缩js、css等静态资源

    在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...

  2. js合并压缩 java_Java Web程序使用wro4j合并、压缩js、css等静态资源

    在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...

  3. java css js 合并_java Web程序使用wro4j合并、压缩js、css等静态资源

    在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...

  4. HTML+CSS+JavaScript 静态网页实例

    HTML+CSS+JavaScript 静态网页实例 静态网页链接 网页 源码地址

  5. 通过实战探究 GraalVM 静态编译

    通过实战探究 GraalVM 静态编译 GraalVM 是什么 什么是 Java 静态编译 GraalVM 静态编译优点 GraalVM 静态编译缺点 Substrate VM 是什么 native ...

  6. 食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作

    HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作 文章目录 HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) ...

  7. uni-app实战仿小米商城app开发

    uni-app实战仿小米商城app开发 关注公众号:码农那些年 回复"uni-app商城",免费获取. 微信公众号: 打开微信扫一扫

  8. HTML5期末大作业：食品商城网站设计——食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作

    HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...

  9. HTML与CSS之小米商城静态界面（未用JS版本）

    这是小米商城的无JS版本(纯静态页面)--如下: <!DOCTYP1E html> <html lang="en"> <head><met ...

  10. 仿效小米商城静态页码html+css

    目录 一  实现效果 完整代码 1 HTML 2 CSS 一  实现效果 完整代码 1 HTML <!DOCTYPE html> <html lang="en"& ...

最新文章

  1. 小插件 打开Android程序动画,android-单击小部件后如何启动活动？
  2. 如何理解Transformer论文中的positional encoding，和三角函数有什么关系？
  3. nginx源码分析configure脚本详解
  4. 我的世界java版forge怎么用_我的世界电脑版MOD怎么用 我的世界pc版forge怎么安装...
  5. C++ 基类和派生类的析构函数
  6. redhat6.5配置阿里云yum源
  7. 【verilog教程】第9篇：verilog常见问题合集
  8. ios苹果开发者账号申请流程(公司类型)
  9. Winner-Take-All Autoencoders （ 赢者通吃自编码器）
  10. 证明：无理数的无理数次方是否还是无理数
  11. Lazada（来赞达）：就三个步骤！搞定Lazada店铺装修
  12. 爬虫入门教程-Spider
  13. 用phpcms切换中英文网页的方法（不用解析二级域名）、phpcms完成pc和手机端切换（同一域名）...
  14. 12.11 蜜蜂路线
  15. MCC(移动国家码)和 MNC(移动网络码)
  16. 某计算机地址总线宽度为32位,这台计算机能够寻址的内存单元是多少?,某计算机地址总线宽度为32位,这台计算机能够寻址的内存单元是多少?...
  17. 合肥 python培训
  18. 6个 C 语言项目的自动化构建和测试工具。（文末有位小可爱）
  19. 计算机控制系统模拟设计,计算机控制系统设计.doc
  20. 【调剂】上海海事大学2022年硕士研究生调剂公告

热门文章

  1. 22.c语言各种输入输出与错误处理
  2. 8. 工厂设计模式(factory pattern)
  3. 插入保存？展现show的顺序
  4. 应用安全 - 工具使用 - Nmap
  5. Migrations有两个文件迁移数据的方法
  6. vim创建程序文件自动添加头部注释/自动文件头注释与模板定义
  7. Python学习之路day3-文件操作
  8. uni-app两种方法解决跨域问题【已验证】
  9. 在Vue中使用Echarts可视化库的完整步骤记录
  10. 从设计模式到恋爱宝典，程序员们的福利来了