利用HTML和CSS设计一个静态的“小米商城官网首页”

您所在的位置：网站首页 › 小米官网css代码 › 利用HTML和CSS设计一个静态的“小米商城官网首页”

利用HTML和CSS设计一个静态的“小米商城官网首页”

#利用HTML和CSS设计一个静态的“小米商城官网首页”| 来源: 网络整理| 查看: 265

当前位置：Gxl网 > APP开发 > 利用HTML和CSS设计一个静态的“小米商城官网首页” 利用HTML和CSS设计一个静态的“小米商城官网首页”

时间：2021-07-01 10:21:17 帮助过：8人阅读

一、小项目说明

　　这是个例行的小项目练习，主要利用html和css的基础知识，复刻一个缩减版的小米商城网页。包括【导航栏】、【头部logo区，快捷键、搜索框】、【网页主体】、【网页尾部】几个部分。目前只实现静态的网页显示。最终效果图如下：

二、程序框架

　　按照开发规范，先在sublime text3中创建【小米商城首页】文件夹，在此文件夹下创建【css】文件夹（放css文件）和【img】文件夹（放图片）和主要的html文件，如下图：

三、小米商城首页.html

1 2 3 4 5 小米商城首页 6 7 8 9 10 11 12 13 14 15 16 17 18 19 小米商城 20 | 21 MIUI 22 | 23 loT 24 | 25 云服务 26 | 27 金融 28 | 29 有品 30 | 31 小爱开放平台 32 | 33 政企服务 34 | 35 下载app 36 | 37 select Region 38 39 40 41 42 购物车 43 44 45 46 登陆 47 | 48 注册 49 | 50 消息通知 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 小米手机 66 红米 67 电视 68 笔记本 69 空调 70 新品 71 路由器 72 智能硬件 73 服务 74 社区 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 手机电话卡> 91 电视盒子> 92 笔记本平板> 93 家电插线板> 94 出行穿戴> 95 智能路由器> 96 电源配件> 97 健康儿童> 98 耳机箱包> 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 选购手机 115 企业团购 116 F码通道 117 米粉卡 118 以旧换新 119 话费充值 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 小米闪购 146 左右控件 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 预约维修服务 186 7天无理由退换货 187 15天免费换货 188 满150元包邮 189 520家售后网点 190 191 192 193 帮助中心 194 195 账户管理 196 购物指南 197 订单操作 198 199 200 服务支持 201 202 售后政策 203 自助服务 204 相关下载 205 206 207 线下门店 208 209 小米之家 210 服务网点 211 授权体验店 212 213 214 关于小米 215 216 了解小米 217 加入小米 218 投资者关系 219 220 221 关注我们 222 223 新浪微博 224 官方微信 225 联系我们 226 227 228 特色服务 229 230 F码通道 231 礼物码 232 防伪查询 233 234 235 236 400-100-5678周一至周日 8:00-18:00 237 联系客服 238 239 240 241 242 243 探索黑科技，小米为发烧而生！ 244 245 246 247 248 小米商城.html

四、CSS文件夹

1 /*清除默认样式*/ 2 *{ 3 padding: 0; 4 margin: 0; 5 } 6 ul{ 7 list-style: none; 8 } 9 /*顶部广告栏*/ 10 .sep { 11 width: 3.22px; 12 font: 16px/40px "Microsoft YaHei"; 13 color: #424242; 14 margin: auto 6px; 15 } 16 /*导航栏*/ 17 .topBar{ 18 height: 40px; 19 background: #333; 20 } 21 .container1{ 22 width: 1226px; 23 height: 40px; 24 margin: 0 auto; 25 } 26 .topBar-nav{ 27 width: 750px; 28 height: 40px; 29 float:left; 30 text-align: center; 31 } 32 .topBar-nav a{ 33 font-size: 14px; 34 font-weight: border; 35 color: #b0b0b0; 36 text-decoration: none; 37 } 38 .topBar-nav a:hover{ 39 color: #fff; 40 } 41 .topBar-cart{ 42 width: 120px; 43 height: 40px; 44 background-color: gray; 45 float:right; 46 text-align: center; 47 } 48 .topBar-cart a{ 49 font-size: 14px; 50 font-weight: border; 51 color: #b0b0b0; 52 text-decoration: none; 53 margin: 5px auto; 54 } 55 .topBar-cart a:hover{ 56 color: #fff; 57 } 58 .topBar-cart #t-cart{ 59 width: 22px; 60 height: 22px; 61 position: relative; 62 top: 8px; 63 } 64 .user-info{ 65 width: 200px; 66 height: 40px; 67 float:right; 68 margin-right:15px; 69 } 70 .user-info a{ 71 font-size: 14px; 72 font-weight: border; 73 color: #b0b0b0; 74 text-decoration: none; 75 } 76 .user-info a:hover{ 77 color: #fff; 78 } topBar.css 1 .head{ 2 width:100%; 3 height: 110px; 4 } 5 .container2{ 6 width: 1226px; 7 height: 110px; 8 margin: 0 auto; 9 } 10 .logo{ 11 margin-top: 24px; 12 margin-right: 24px; 13 width: 55px; 14 height: 55px; 15 float: left; 16 } 17 .nav{ 18 width: 820px; 19 height: 110px; 20 float: left; 21 } 22 .nav .sub-nav{ 23 width: 580px; 24 height: 30px; 25 margin: 40px auto 40px; 26 } 27 .nav .sub-nav a{ 28 font-size: 17px; 29 font-weight: border; 30 color: black; 31 text-decoration: none; 32 text-align: center; 33 } 34 .nav .sub-nav a:hover{ 35 color: #ff6700; 36 } 37 .search{ 38 margin-top: 25px; 39 width: 300px; 40 height: 50px; 41 float: right; 42 } 43 .search #s1{ 44 width: 240px; 45 height: 50px; 46 text-align: right; 47 font-weight: border; 48 } 49 .search #s2{ 50 width: 50px; 51 height: 50px; 52 } head.css 1 .content{ 2 width: 1226px; 3 height: 460px; 4 margin: 0 auto 20px; 5 } 6 .content-list{ 7 float: left; 8 width: 234px; 9 height: 460px; 10 background-color: #355 11 } 12 .content-list .sub-content{ 13 width: 200px; 14 height: 380px; 15 margin:50px auto; 16 color: white; 17 } 18 .viewpager{ 19 float: left; 20 width: 992px; 21 height: 460px; 22 } 23 24 .shop{ 25 width: 1226px; 26 height: 170px; 27 margin: 0 auto 30px; 28 } 29 .channel { 30 width: 225px; 31 height:170px; 32 float: left; 33 } 34 .channel ul li{ 35 background-color: #5f5750; 36 width: 75px; 37 height: 85px; 38 font: 12px/85px "Microsoft YaHei"; 39 text-align: center; 40 float: left; 41 } 42 .channel ul li a { 43 display: block; 44 width: 75px; 45 height: 85px; 46 color: whitesmoke; 47 } 48 .channel ul li a:hover { 49 display: block; 50 width: 75px; 51 height: 85px; 52 color:white; 53 } 54 55 .shop .advertise{ 56 float: left; 57 width: 992px; 58 height: 170px; 59 } 60 .shop .advertise ul li{ 61 width:316px; 62 height: 170px; 63 float: right; 64 margin-left: 14px; 65 } 66 67 .tag{ 68 width: 1226px; 69 height: 40px; 70 margin: 0 auto; 71 } 72 .tag .letter{ 73 width: 90px; 74 height: 25px; 75 float: left; 76 font-size: 20px; 77 margin-top: 15px; 78 } 79 .tag .form{ 80 width: 70px; 81 height: 25px; 82 background-color: red; 83 float: right; 84 margin-top: 15px; 85 } 86 87 .limit-shop{ 88 width: 1226px; 89 height: 340px; 90 margin: 0 auto; 91 } 92 .limit-shop .shangou{ 93 width: 234px; 94 height: 340px; 95 float: left; 96 background-image: url(../img/bd.png); 97 background-size: 234px 340px; 98 } 99 100 .limit-shop .shangpin{ 101 width: 992px; 102 height: 340px; 103 float: left; 104 } 105 .limit-shop .shangpin ul li{ 106 width: 233px; 107 height: 340px; 108 float: right; 109 margin-left: 15px; 110 } body.css 1 .foot { 2 margin-top: 20px; 3 } 4 .foot a{ 5 text-decoration: none; 6 } 7 .foot .f1 { 8 height: 50px; 9 border-bottom: 1px solid #DDDDDD; 10 margin:0 auto; 11 } 12 .foot .f1 .f11 { 13 width: 245.2px; 14 height: 25px; 15 border-right: 1px solid #DDDDDD; 16 } 17 .foot .f1 .f12 { 18 width: 245.2px; 19 height: 25px; 20 } 21 22 .foot ul li { 23 width: 243.5px; 24 float: left; 25 text-align: center; 26 } 27 .foot ul li a { 28 font: 16px/25px "Microsoft YaHei"; 29 color: black; 30 } 31 .foot ul li a:hover{ 32 color:#FF6700; 33 } 34 .foot .f2 { 35 height: 112px; 36 padding: 40px 0; 37 } 38 .foot .f2 .f21 { 39 width: 160px; 40 height: 112px; 41 float: left; 42 } 43 .foot .f2 .f22 { 44 width: 150px; 45 height: 17px; 46 text-align: right; 47 margin-bottom: 20px; 48 } 49 .f21 ul li a { 50 color: #666666; 51 } 52 #f21 { 53 width: 250px; 54 height: 112px; 55 margin-left: 20px; 56 border-left: 1px solid #DDDDDD; 57 text-align: center; 58 } 59 .spf21 { 60 color: #FF6700; 61 font-size: 20px; 62 } 63 .f212 { 64 width: 120px; 65 height: 30px; 66 border: 1px solid #FF6700; 67 margin: 20px 70px; 68 } 69 .f212 a { 70 display: block; 71 width: 120px; 72 height: 30px; 73 font: 12px/30px "Microsoft YaHei"; 74 color: #FF6700; 75 } 76 .f212 a:hover{ 77 display: block; 78 width: 120px; 79 height: 30px; 80 font: 16px/30px "Microsoft YaHei"; 81 color: #fff; 82 background-color: #FF6700; 83 } 84 .f3 { 85 height: 73px; 86 color: #BEBEBE; 87 text-align: center; 88 background-color: #FAFAFA; 89 font: 20px/73px "Microsoft YaHei"; 90 } foot.css

五、img文件夹

　　小米官网的图片直接另存为在这个文件夹中，然后重命名成自己需要的就行。如有需要，也可以评论中告知。

标签分享图片小米

安卓点击home键重启

下一篇 >

安卓多个RecyclerView滑动与显示问题

相关教程分享一个VUE页面声音+标题闪烁通知的组件分享Laradock中Laravel Octane与WebSocket的nginx配置分享ChatGPT的初步使用（laravel与go示例）分享PHP函数使用小工具（附代码示例）分享OSS云环境文件上传与签名的重点代码分享一道不错的TS面试题（含3层），看看能答到第几层！分享一个git工作流优雅的玩法分享一个重要的Git技巧，能保护核心代码！分享Laravel是怎么操作宝塔面板API 分享一个非常好用的GO并发控制库！

【本文地址】

利用HTML和CSS设计一个静态的“小米商城官网首页”

利用HTML和CSS设计一个静态的“小米商城官网首页”

今日新闻

推荐新闻