使用html和css制作一个小米商城页面

创作不易，可否给作者点个赞再走

html部分：

/**
* author 阿木木
* date 10/01  14:32
* /
`<html><head><title>title</title><link href="css/style.css" type="text/css" rel="stylesheet" /></head><body><div class="header"><div class="middle"><div class="navlist fl"><ul><li><a href="">小米商城</a> </li><li><a href="">MIUI</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="login fr"><ul><li><a href="">登录</a> </li><li><a href="">注册</a> </li><li> </li><li class="orange"><a href="">购物车</a> </li></ul></div><div class="clear"></div></div></div><div class="main"><div class="first"><div class="logo fl"><a href=""><img src="img/logo_top.png"/></a></div><div class="menu fl"><div class="fl"><a href="">小米手机</a></div><div class="fl"><a href="">红米手机</a></div><div class="fl"><a href="">智能电视</a></div><div class="fl"><a href="">笔记本</a></div><div class="fl"><a href="">智能家电</a></div><div class="fl"><a href="">路由器</a></div><div class="fl"><a href="">智能硬件</a></div><div class="fl"><a href="">服务</a></div><div class="fl"><a href="">社区</a></div></div><div class="search fr"></div><div class="clear"></div></div><div class="second"><div class="black fl"><a href=""><img src="img/listbanner01.jpg"/></a></div><div class="clear"></div></div><div class="third"><div class="one fl"><div class="o fl"><a href=""><img src="img/hjh_01.gif"/></a></div><div class="o fl"><a href=""><img src="img/hjh_02.gif"/></a></div><div class="o fl"><a href=""><img src="img/hjh_03.gif"/></a></div><div class="clear"></div><div class="o fl"><a href=""><img src="img/hjh_04.gif"/></a></div><div class="o fl"><a href=""><img src="img/hjh_05.gif"/></a></div><div class="o fl"><a href=""><img src="img/hjh_06.gif"/></a></div></div><div class="two fl"><a href=""><img width="316px 170px" src="img/ban1.jpg"/></a></div><div class="three fl"><a href=""><img width="316px 170px" src="img/ban2.jpg"/></a></div><div class="threefour fr"><a href=""><img width="316px 170px" src="img/ban3.jpg"/></a></div><div class="clear"></div></div><div class="four"><div class="banner1"><a href=""><img src="img/banner01.jpg"/></a></div></div><div class="five"><div class="title1 fl">明星单品</div><div class="title2 fl"><a href=""><img width="235px 340px" src="img/pinpai6.png"/>小米9</a><div class="titlemodul1">7月9日-21日享花呗12分期免息</div><div class="titlemodul2">2999元起</div></div><div class="title3 fl"><a href=""><img width="235px 340px" src="img/pinpai7.png"/>小米CC9</a><div class="titlemodul1">8月9日-10日，下单立减200元</div><div class="titlemodul2">1999元</div></div><div class="title3 fl"><a href=""><img width="235px 340px" src="img/pinpai8.png"/>小米壁画电视65英寸</a><div class="titlemodul1">7月9日，下单立减100元</div><div class="titlemodul2">6999元</div></div><div class="title3 fl"><a href=""><img width="235px 340px" src="img/pinpai9.png"/>小米MIX3</a><div class="titlemodul1">10月9日-10日，下单立减100元</div><div class="titlemodul2">2999元</div></div><div class="title2 fr"><a href=""><img width="235px 340px" src="img/pinpai10.png"/>小米游戏本</a><div class="titlemodul1">第八代酷睿处理器，双烤不限频不降频</div><div class="titlemodul2">3599元</div></div><div class="clear"></div></div><div class="six"><div class="banner2"><a href=""><img src="img/banner02.jpg" /></a></div></div><div class="seven"><div class="titlex">热门配件</div><div class="modue1 fl"><a href=""><img width="235px 300px" src="img/peijian1.jpg"/></a></div><div class="modue2 fl"><a href=""><img width="235px 300px" src="img/peijian11.jpg"/>小米无线车充</a><div class="titlemodul3">169元</div><div class="titlemodul4">1372人评价</div></div><div class="modue2 fl"><a href=""><img width="235px 300px" src="img/peijian3.jpg"/>小米手机4c 小米4c 智能</a><div class="titlemodul3">29元</div><div class="titlemodul4">372人评价</div></div><div class="modue2 fl"><a href=""><img width="235px 300px" src="img/peijian4.jpg"/>红米note4 4x 红米note4x</a><div class="titlemodul3">19元</div><div class="titlemodul4">372人评价</div></div><div class="modue2 fr"><a href=""><img width="235px 300px" src="img/peijian5.jpg"/>小米支架式自拍杆</a><div class="titlemodul3">89元</div><div class="titlemodul4">372人评价</div></div><div class="clear"></div><div class="modue3 fl"><a href=""><img width="235px 300px" src="img/peijian6.png"/></a></div><div class="modue4 fl"><a href=""><img width="235px 300px" src="img/peijian12.jpg"/>九号平衡车</a><div class="titlemodul3">3999元</div><div class="titlemodul4">372人评价</div></div><div class="modue4 fl"><a href=""><img width="235px 300px" src="img/peijian8.jpg"/>米家随身风扇</a><div class="titlemodul3">19.9元</div><div class="titlemodul4">372人评价</div></div><div class="modue4 fl"><a href=""><img width="235px 300px" src="img/peijian9.jpg"/>红米4X高透软胶保护套</a><div class="titlemodul3">59元</div><div class="titlemodul4">775人评价</div></div><div class="modue5 fr"><a href=""><img width="235px 300px" src="img/hongmin4.png"/></a></div><div class="modue5 fr"><a href=""><img width="235px 300px" src="img/liulangengduo.png"/></a></div></div><div class="clear"></div></div></div><div class="footer"><div class="middle1"><ul><li><a href="">小米商城</a></li><li><a href="">小米网盟</a></li><li><a href="">小米移动</a></li><li><a href="">隐私政策</a></li></ul><div class="banquan">却家庭 © 版权所有 2019</div></div></div></body>
</html>`

css部分

/**全局样式**/
*{margin: 0px;padding: 0px;
}
body{font-size: 14px;
}
li{list-style: none;
}
a{color: #000;text-decoration: none;
}
.fl{float:left;
}
.fr{float:right;
}
.clear{clear: both;
}
/**index.html**/
.header{width:100%;background-color: #333333;margin: 0px auto;
}
.middle{height: 40px;width: 1227px;margin: 0px auto;
}
.navlist{width:401px;height: 40px;margin: 0px auto;
}
.navlist ul{padding: 15px 0px;
}
.navlist ul li {width: 55px;height: 11px;float: left;text-align: center;line-height: 7px;
}
.navlist ul li:nth-child(1),.navlist ul li:nth-child(2),.navlist ul li:nth-child(3),.navlist ul li:nth-child(4),.navlist ul li:nth-child(5),.navlist ul li:nth-child(6)
{ border-right:1px #B0B0B0 solid;}
.navlist ul li a{font-size: 10px;color: #B0B0B0;
}
.login{width: 302px;height: 40px;
}
.login ul{padding: 15px 0px;
}
.login ul li{width: 55px;height:11px;float: left;text-align: center;line-height: 7px;
}
.login ul li:nth-child(1)
{border-right:1px #B0B0B0 solid ;}
.login ul li a{font-size: 10px;color: #B0B0B0;
}
.main{width: 100%;height: 2170px;margin: 0px auto;
}
.first{width: 1227px;height: 54px;margin: 0px auto;padding-top: 26px;
}
.logo{width: 234px;height: 54px;
}
.menu{width: 643px;height: 54px;font-size: 15px;margin-top: 20px;
}
.menu a{margin-left: 20px;
}
.search{height: 54px;width: 310px;
}
.second{width: 1227px;height: 460px;background-color: #FFFF00;margin: 23px auto;
}
.black{width: 1226px;height: 460px;background-color: black;
}
.third{width: 1227px;height: 170px;margin: 17px auto;
}
.one{width: 234px;height: 170px;background-color: #FF00FF;
}
.one.o{width: 78px;height: 85px;background-color: aqua;
}
.two{width: 315px;height: 170px;background-color: #FF00FF;margin-left: 15px;
}
.three{width: 315px;height: 170px;background-color: #FF00FF;margin-left: 15px;
}
.threefour{width: 315px;height: 170px;background-color: #FF00FF;margin-left: 15px;
}
.four{width: 1227px;height: 120px;margin: 22px auto;
}
.banner1{height: 120px;width: 1227px;background-color: aqua;
}
.five{width: 1227px;height: 400px;margin: 25px auto;
}
.title1{width:1227px;height: 59px;background-color: #f5f5f5;font-size: 22px;line-height: 60px;
}
.titlemodul1{font-size: 13px;color: #b0b0c0;margin-top: 15px;
}
.titlemodul2{font-size: 15px;color: #fe674c;margin-top: 15px;
}
.title2{width: 235px;height: 340px;background-color: #F5F5F5;border-top: 1px orange solid;text-align: center;
}
.title3{width: 235px;height: 340px;background-color: #F5F5F5;margin-left: 13px;border-top: 1px solid green;text-align: center;
}
.six{width: 1227px;height: 120px;margin: 25px auto;
}
.banner2{width: 1227px;height: 120px;background-color: #00FFFF;
}
.seven{width: 1227px;height: 672px;margin: 20px auto;background-color: #F5F5F5;
}
.titlex{font-size: 22px;
}
.titlemodul3{font-size: 13px;color: #fe674c;
}
.titlemodul4{font-size: 15px;color: #b0b0c0;
}
.modue1{margin-top: 28px;background-color: #FAFAFA;width: 235px;height: 300px;text-align: center;
}
.modue2{margin-top: 28px;background-color: #FAFAFA;width: 235px;height: 300px;margin-left: 13px;text-align: center;
}
.modue3{margin-top: 15px;background-color: #FAFAFA;width: 235px;height: 300px;text-align: center;
}
.modue4{margin-top: 15px;background-color: #FAFAFA;width: 235px;height: 300px;margin-left: 13px;text-align: center;
}
.modue5{margin-top: 15px;background-color: #FAFAFA;width: 235px;height: 143px;margin-left: 13px;text-align: center;
}
.footer{width: 100%;height: 140px;background-color: #fafafa;margin: 0px auto;
}
.middle1{width: 260px;height: 140px;background-color: #fafafa;margin: 0px auto;
}
.middle1 ul{padding: 50px 0px;
}
.middle1 ul li{width: 64px;float: left;font-size: 13px;text-align: center;
}
.middle1 ul li:nth-child(1),.middle1 ul li:nth-child(2),.middle1 ul li:nth-child(3)
{ border-right:1px black solid;}
.banquan{font-size: 12px;text-align: center;
}

效果图：
源码：
链接: https://pan.baidu.com/s/1UEQhM1y0YJSCyHhfx_QWYA?pwd=2tvd
提取码: 2tvd

使用html和css制作一个小米商城页面相关推荐

九宫格——用html+css制作一个网页
自用(仅供参考,如有错误欢迎指出) 要求: 1.通过html和css制作一个可以根据页面缩放进行变化的九宫格. 2.并且可以通过手机浏览器访问. 过程: 1.网页制作先不管通过网页访问这一项,先写一 ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
使用element UI 快速制作一个列表页面
使用element制作一个列表页面,并且当点击"查看调查问卷"时弹出弹框. (图一) (图二) (图三) 1. 制作一个名叫DataListTable <DataListTa ...
HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
DIV布局艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个 ...
HTML5期末大作业：艺术品商城网站设计——艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个 ...
HTML+CSS静态页面网页设计作业——洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:洪江市旅游网站设计--洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司. ...

使用html和css制作一个小米商城页面

使用html和css制作一个小米商城页面

创作不易，可否给作者点个赞再走

使用html和css制作一个小米商城页面相关推荐

最新文章

热门文章