商城静态页面（仿小米官网）

这是一个仿小米商城静态首页的小练习，后续我会继续添加相应的一些动态效果。
最终效果（目前还不太完善）

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网站项目</title><link rel="stylesheet" href="website1.css">
</head>
<body><!-- crucial infrom --><div class="yiqing"><a href="https://www.mi.com/a/h/13931.html"><h1>应对疫情小米业务调整通知</h1></a></div><!-- 导航开始 --><div class="top"><div class="logo"><a href="html+css项目练手.html"><img src="data:images/logo.png" alt=""></a><div class="logo-con"></div></div><ul class="nav"><li><a href="#">博客首页</a></li><li><a href="#">web前端</a></li><li><a href="#">Python</a></li><li><a href="#">JavaScript</a></li><li><a href="#">MindMaster</a></li></ul>  </div><!-- <button>登录/注册</button> --><!-- 导航结束 --><!-- 轮播图开始 --><div class="shift"><ul class="img"><img src="data:images/shift3.png" alt=""></ul><ul class="page"><li></li><li></li><li></li></ul><span class="span-left"><img src="data:images/arrow-left.png" alt=""></span><span class="span-right"><img src="data:images/arrow-right.png" alt=""></span></div><!-- 轮播图结束 --><div class="insert"><img src="data:images/insert.png" alt=""></div><!-- 版心主要内容开始 --><div class="banner"><div class="banner-left"><img src="data:images/阿尔法.png" alt=""></div><div class="banner-middle"><div class="middle-top"><img src="data:images/watch.png" alt="">      </div><div class="middle-down"><div class="middle-down-left"><video src="data:images/MP4c.mp4" controls="controls" height=""></video></div><div class="middle-down-right"><img src="data:images/shaver.png" alt=""></div></div></div><div class="banner-right"><div class="right-top"><img src="data:images/glass.png" alt=""></div><div class="right-down"><img src="data:images/平衡车.png" alt=""></div></div></div><!-- 版心主要内容结束 --><div class="insert"><img src="data:images/insert2.png" alt=""></div><!-- 产品介绍开始 --><div class="products clearfix"><div class="pro1 fl"><img src="data:images/product1.png" alt=""></div><div class="des fr"><h2><strong>小米CC9 Pro</strong></h2><p>&nbsp&nbsp「分期享6期免息，购机享1TB小米云空间1年使用权，+1元得撞色飘带保护套，+99元得冰封散热背夹」1亿像素主摄 / 全场景五摄像头 / 四闪光灯 / 3200万自拍 / 10 倍混合光学变焦，50倍数字变焦 / 5260mAh ⼤电量 / 标配 30W疾速快充 / ⼩米⾸款超薄屏下指纹 / 德国莱茵低蓝光认证 / 多功能NFC / 红外万能遥控 / 1216超线性扬声器</p></div></div><div class="products clearfix"><div class="pro1 fr"><img src="data:images/product2.png" alt=""></div><div class="des fl"><h2><strong>小米手环 4</strong></h2><p>&nbsp&nbsp大屏彩显还有 380 多种个性组合*6 轴传感器从日常健身到专业运动游泳教练泳姿识别，50 米防水*心率预警24 小时高精准心率监测NFC版人工智能语音遥控手环、手机智能家居控制语音控制家中电器*小爱同学102 种智能语音场景*伸手刷卡公交卡、门禁卡、支付宝</p></div></div><div class="products clearfix"><div class="pro1 fl"><img src="data:images/product3.png" alt=""></div><div class="des fr"><h2><strong>Redmi Note8 Pro</strong></h2><p>&nbsp&nbsp6400万四摄小金刚拍照新旗舰超强解析力，超震撼8K分辨率的近2倍*6400万超高清主摄手机直出3.26米高印刷海报拍张照片放大至点对点，近手机屏幕25倍*，同时支持拍摄4K视频、960帧慢动作。</p></div></div><!-- 产品介绍结束 --><div class="insert"><img src="data:images/insert3.png" alt=""></div><!-- 底部版权信息 --><div class="foot"><div class="con"><div class="navfoot"><div class="top"><a href="#">隐私政策</a>|<a href="#">问题反馈</a>|<a href="#">联系我们</a>|<a href="#">相关服务</a>|</div><div class="main clearfix"><div class="phone fl"><h4>123456</h4></br><span>fjghkjfdhjkgz</span></div><div class="qrcode fr"><img src="data:images/code1.png" alt=""><img src="data:images/code2.png" alt=""></div></div></div><div class="hhh"><h3>探索黑科技，小米为发烧而生</h3></div><div class="copyright"><p>互联网药品信息服务资格证 (京)-非经营性-2014-0090</p></div></div></div>
</body>
</html>

CSS代码：

*{padding: 0;margin: 0;list-style: none;
}
body{background-color: skyblue;width: 100%;
}
.yiqing{width: 100%;height: 120px;background-color: #ff6700;
}
.yiqing h1{color: #fff;text-align: center;line-height: 120px;
}
.yiqing a{text-decoration: none;
}
.top{position: relative;width: 1000px;margin:0 auto;overflow: hidden;
}
.top .logo{float: left;position: absolute;margin-top: 25px;
}
.logo .logo-con{top: 90px;width: 200px;height: 50px;float: left;left: 0;display: none;z-index: 2;background-color: pink;}
.top .nav{float: right;
}
.top .nav li{float: left;width: 150px;font-size: 18px;height: 110px;line-height: 110px;text-align: center;
}
.top .nav a{text-decoration: none;color: #fff;display: block;
}
.nav a:hover{color: red;position: relative;
}
.nav a:hover:after{content: "";width: 0;height: 0;border: 10px solid transparent;border-bottom-color: red;position: absolute;left: 50%;bottom: 0;margin-left: -10px;
}
/*button{padding: 10px;margin-top: 30px;font-size: 20px;
}*/
.shift{margin: 0 auto;width: 1000px;height: 400px;position: relative;margin-top: 10px;
}
.shift .img img{width: 1000px;height: 400px;position: absolute;
}
.shift .page{position: absolute;bottom: 20px;left: 50%;margin-left: -60px;/*border: 1px solid #fff;*/border-radius: 16px;background-color: #ffffff50;}
.shift .page li{width: 16px;height: 16px;/*position: absolute;*/border-radius: 8px;background-color: #fff;margin: 8px;float: left;
}
.page li:hover{background-color: red;
}
span{position: absolute;
}
.span-left{top: 50%;left: 20px;
}
.span-right{top: 50%;right: 20px;
}
.banner{width: 1000px;/*position: relative;*/margin: 0 auto;overflow: hidden;margin-top: 8px;
}
.banner-left img{/*position: absolute;*/height: 500px;float: left;
}
.banner-middle{width: 600px;float: left;
}
.middle-top img{/*position: absolute;*/float: left;margin:0 5px;width: 590px;height: 295px;
}
.middle-down-left video{float: left;margin-top: 5px;margin-left: 5px;margin-right:5px;/*width: 292.5px;*/height: 200px;
}
.middle-down-right img{float: left;/*background-size: 100%;*/margin-top: 5px;width: 230.55px;height: 200px;
}
.banner-right{float: right;
}
.right-top img{margin-bottom: 5px;float: right;width: 209px;height: 247.5px;
}
.right-down img{float: right;width: 209px;height: 247.5px;
}
.insert{width: 1000px;margin: 10px auto;
}
.insert img{width: 1000px;
}
.products{width: 1000px;margin: 0 auto;/*position: relative;*/
}
.fl{float: left;
}
.fr{float: right;
}
.des{padding-top: 15px;width: 550px;color: #fff;
}
.products img{width: 420px;
}
.clearfix{*zoom:1;
}
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.des h2{color: #ff6700;padding-bottom: 13px;
}
.des p{line-height: 2em;
}
.foot{/*background-color: #00000060;*/height: 200px;
}
.con{width: 1000px;height: 200px;margin: 0 auto;background-color: #00000090;
}
.foot img{height:100px;width: 100px;
}
.top a{text-decoration: none;margin: 2px 10px;color: #fff;
}
.con .hhh h3{text-align: center;    font-size: 25px;display: block;font-family: "华文行楷";color: #ffffff80;
}
.main{color: #ffffff30  ;
}
.phone{padding-top: 15px;
}

商城静态页面（仿小米官网）相关推荐

Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
仿小米官网源码，2021年9月最新版
部分源码: <div class="header"><div class="page-top"><div class=" ...
仿小米官网登录功能的实现
效果图如下: 首先我们需要搭建好页面布局 html的代码如下: <div class="contentrightbottom"><div class=&quo ...
电商项目：仿小米官网纯HTML+css布局
前言时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
仿小米官网php源码,精仿小米官网商城整站完美运营版源码Laravel内核
源码预览源码介绍运行环境:WIN-LINUX+APACHE2.4+PHP7.0+MYSQL5.5+伪静态服务器要求: 本系统Laravel框架对PHP版本和扩展有一定要求,有必要了解下这些以便确 ...
仿猫眼官网静态页面（纯HTML）
仿猫眼官网静态页面(纯HTML) 准备工作正文 HTML CSS 小结准备工作用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果正文 HTML <!DOCTY ...
实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...
项目三《小米官网仿写》
文章目录前言一.下载APP 二.下拉菜单三. 小米侧边栏四.登录注册界面五.lation实现界面切换总结前言本次小米官网仿写复习了之前学到的知识点,运用HTML+CSS+JavaScr ...

商城静态页面（仿小米官网）

商城静态页面（仿小米官网）相关推荐

最新文章

热门文章