小米商城网页版(js+css)
js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="" content=""/>
<title>小米商城</title>
<link rel="stylesheet" type="text/css" href="css/xiaomi.css"/>
</head>
<body>
<div>
<!--1 导航1-->
<div class="header">
<div class="top center">
<!--1.1左-->
<div class="left fl">
<ul>
<li><a href="#">小米商城</a></li>
<li>|</li>
<li><a href="#">MIUI</a></li>
<li>|</li>
<li><a href="#">米聊</a></li>
<li>|</li>
<li><a href="#">游戏</a></li>
<li>|</li>
<li><a href="#">多看阅读</a></li>
<li>|</li>
<li><a href="#">云服务</a></li>
<li>|</li>
<li><a href="#">金融</a></li>
<li>|</li>
<li><a href="#">移动端APP</a></li>
<li>|</li>
<li><a href="#">问题反馈</a></li>
<li>|</li>
<li><a href="#">areyouok</a></li>
<div class="clear"></div>
</ul>
</div>
<!--1.2右-->
<div class="right fr">
<div class="gouwuche fr"><a href="#">购物车</a></div>
<div class="fr">
<ul>
<li><a href="#">登陆</a></li>
<li>|</li>
<li><a href="#">注册</a></li>
<li>|</li>
<li><a href="#">消息通知</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--2 导航2-->
<div class="header2">
<div class="header2 center">
<!--2.1 logo-->
<div class="images">
<img src="img/logo_foot.png"/>
<img src="img/yyymix.gif" />
</div>
<!--2.2 ul文本-->
<div class="text">
<ul>
<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>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<!-- 2.3 搜索框-->
<div class="search">
<input type="text" placeholder="小米6小米MIX现货" style="height: 60px;width: 240px;"/>
<input type="button" value="搜索" style="width: 50px;height: 66px;"/>
</div>
</div>
</div>
<!-- 3 轮播图-->
<div class="main center">
<!--左列表-->
<div class="main_left fl">
<ul>
<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>
<li><a href="#">线材 支架 储存卡</a></li>
<li><a href="#">箱包 服饰 鞋</a></li>
<li><a href="#">米兔 生活周边</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--4 广告页面-->
<div class="ad center">
<div class="ad_left fl">
<div class="ad_small fl"><img src="img/hjh_01.gif"><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_02.gif"/><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_03.gif"/><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_04.gif"/><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_05.gif"/><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_06.gif"/><a href="#"></a></div>
<div class="clear"></div>
</div>
<div class="ad_big fl">
<a href="#"><img src="img/hongmi4x.png" ></a>
</div>
<div class="ad_big fl">
<a href="#"><img src="img/pinghengche.jpg" ></a>
</div>
<div class="ad_big fl">
<a href="#"><img src="img/xiaomi5.jpg" ></a>
</div>
<div class="clear"></div>
</div>
<!--5 小米明星单品-->
<div class="star center">
<!-- 总体标题 -->
<div class="title">
小米明星单品
</div>
<!-- 展览图片 -->
<div class="pds">
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai1.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米MIX</p></a>
<p>5月9日-12人享花呗12期分期免息</p>
<p>3499元起</p>
</div>
</div>
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai2.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米5s</p></a>
<p>5月9日-10日,下单立减200元</p>
<p>1999元</p>
</div>
</div>
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai3.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米手机5 64GB</p></a>
<p>5月9日-10日,下单立减100元</p>
<p>1799元</p>
</div>
</div>
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai4.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米电视3s 55英寸</p></a>
<p>5月9日,下单立减200元</p>
<p>3999元</p>
</div>
</div>
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai5.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米笔记本</p></a>
<p>更轻更薄,像杂志一样随身携带</p>
<p>3599元起</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!--6 配件-->
<div class="parts center">
<!--总体标题-->
<div class="title">
配件
</div>
<!--物品-->
<div class="pd">
<!--无字图片-->
<div class="pd_left fl">
<div><a href="#"><img src="img/peijian1.jpg"/></a></div>
<div><a href="#"><img src="img/peijian6.png"/></a></div>
</div>
<!--描述图片-->
<div class="pd_right fr">
<div class="pd_top">
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian2.jpg"/>
</div>
<div class="sosi">
<a href="#">小米6 硅胶保护套</a>
<p>49元</p>
<p>372人评价</p>
</div>
</div>
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian3.jpg"/>
</div>
<div class="sosi">
<a href="#">小米手机4c 小米4c 智能</a>
<p>69元</p>
<p>42人评价</p>
</div>
</div>
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian4.jpg"/>
</div>
<div class="sosi">
<a href="#">红米NOTE 4X 红米note4X</a>
<p>29元</p>
<p>32人评价</p>
</div>
</div>
<div class="one_pd fr">
<div class="pic">
<img src="img/peijian5.jpg"/>
</div>
<div class="sosi">
<a href="#">小米支架式自拍杆</a>
<p>99元</p>
<p>972人评价</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="pd_bot">
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian7.jpg"/>
</div>
<div class="sosi">
<a href="#">小米指环支架</a>
<p>77元</p>
<p>88人评价</p>
</div>
</div>
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian8.jpg"/>
</div>
<div class="sosi">
<a href="#">小米随身风扇</a>
<p>33元</p>
<p>66人评价</p>
</div>
</div>
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian9.jpg"/>
</div>
<div class="sosi">
<a href="#">一只黑杆</a>
<p>59元</p>
<p>39人评价</p>
</div>
</div>
<div>
<div>
<a href="#"><img src="img/hongmin4.png" ></a></a>
</div>
<div>
<a href="#"><img src="img/liulangengduo.png" ></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!--7 底部链接-->
<div class="footer center">
<p>
<a href="#">小米商城</a>
<span>|</span>
<a href="#">MIUI</a>
<span>|</span>
<a href="#">米聊</a>
<span>|</span>
<a href="#">多看书城</a>
<span>|</span>
<a href="#">小米路由器</a>
<span>|</span>
<a href="#">视频电话</a>
<span>|</span>
<a href="#">小米天猫店</a>
<span>|</span>
<a href="#">小米淘宝直营店</a>
<span>|</span>
<a href="#">小米网盟</a>
<span>|</span>
<a href="#">小米移动</a>
<span>|</span>
<a href="#">隐私政策</a>
<span>|</span>
<a href="#">Select Region</a>
</p>
<p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
<p>违法和不良举报电话:185-0130-1238,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
</div>
</div>
</body>
</html>
css:
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-size: 12px;
font-family: 微软雅黑;
color: #000000;
border-style: none;
border-collapse: collapse;
}
.center{
margin: 0 auto;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
.ml{
margin-left: 8px;
}
a{
color: white;
}
button{
cursor: pointer;
}
/*---------------------------------------------------------*/
/*导航1*/
.header{
width: 100%;
background: #333;
height: 40px;
}
.header .top{
width: 1226px;
height: 40px;
line-height: 40px;
}
.header .top .left ul li{
float: left;
color: #ccc;
font-size:12px;
}
.header .top .left ul li a{
display: block;
color: #b0b0b0;
padding: 0 8px;
}
.header .top .left ul li a:hover{
color: #fff;
}
.header .top .right ul li{
float: left;
font-size:12px;
color: #CCCCCC;
}
.header .top .right ul li a{
display: block;
color: #b0b0b0;
padding: 0 8px;
}
.header .top .right ul li a:hover{
color: #fff;
}
.gouwuche a{
color:#fff;
font-size: 15px;
}
.gouwuche{
margin:0 20px;
background: #424242;
width: 120px;
text-align: center;
cursor: pointer;
background: #FF6700;
color: #fff;
}
.gouwuche:hover{
background: #666;
color: #000;
}
/*---------------------------------------------------------*/
/*导航2*/
.header2{
width: 100%;
height: 100px;
}
.header2 .center{
width: 1226px;
height: 100px;
line-height: 100px;
margin: 10px auto;
}
height: 100px;
padding: 20px;
float: left;
}
.header2 .center .text ul li{
float: left;
color: #ccc;
font-size:15px;
}
.header2 .center .text ul li a{
display: block;
color: #000;
padding: 0 8px;
}
.header2 .center .text ul li a:hover{
color: pink;
}
.header2 .center .search{
padding: 0;
float: right;
}
/*---------------------------------------------------------*/
/*轮播图*/
.main{
margin-top: 25px;
width: 1226px;
height: 460px;
background: url(../img/banner.jpg) no-repeat;
position: relative;
}
.main_left{
background: #0C0C13;
width: 235px;
height: 460px;
position: absolute;
float: left;
}
.main .main_left ul li{
width: 235px;
height: 46px;
}
.main .main_left ul li a{
display: inline-block;
line-height: 46px;
margin-left: 16px;
}
.main .main_left ul li:hover{
background: #FF6700;
}
/*---------------------------------------------------------*/
/*广告页*/
.ad{
width: 1226px;
height: 170px;
margin-top: 15px;
}
.ad_left{
width: 235px;
height: 170px;
}
.ad_small{
width: 78px;
height: 85px;
}
.ad_big{
width: 330px;
height: 170px;
text-align: center;
}
.ad .ad_big img{
width: 325px;
height: 170px;
float: left;
}
/*---------------------------------------------------------*/
/*明星单品*/
.star{
width: 1226px;
height: 300px;
margin-top: 15px;
}
.title{
height: 30px;
font-size: 20px;
font-weight: 900;
}
/* 商品 */
.products{
width: 1226px;
height: 220px;
text-align: center;
margin-top: 10px;
}
.one_pds{
width: 245px;
height: 220px;
}
.pic{
width: 245px;
}
.star .pds .one_pds .pic img{
border-top: 1px solid pink;
width: 120px;
height: 120px;
}
.star .pds .one_pds .sosi p{
margin-top: 10px;
}
.star .pds .one_pds .sosi p:nth-child(1){
font-size: 12px;
}
.star .pds .one_pds .sosi p:nth-child(2){
color: #B0B0B0;
font-size: 10px;
}
.star .pds .one_pds .sosi p:nth-child(3){
color: red;
}
.star .pds .one_pds .sosi a p:hover{
color: red;
}
/*---------------------------------------------------------*/
/*配件*/
.parts{
width: 1226px;
height: 630px;
margin-top: 15px;
}
.pd{
width: 1226px;
height: 600px;
text-align: center;
margin-top: 10px;
}
.pd_left{
width: 230px;
height: 600px;
}
.parts .pd .pd_left img{
width: 230px;
height: 300px;
}
.pd_right{
width: 996px;
height: 600px;
}
.pd_top{
width: 996px;
height: 300px;
}
.pd_bot{
width: 996px;
height: 300px;
}
.one_pd{
width: 249px;
height: 300px;
}
.parts .pd .pd_right .one_pd .sosi p{
margin-top: 15px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(1){
font-size: 12px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(2){
color: red;
font-size: 10px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(3){
color: #B0B0B0;
}
.parts .pd .pd_right .one_pd .sosi a p:hover{
color: red;
}
/*---------------------------------------------------------*/
/*底部链接*/
.footer{
width: 1226px;
height: 250px;
margin-top: 150px;
}
.footer p{
font-family: 微软雅黑;
text-align: center;
margin: 10px auto;
}
.footer p a{
color: #000000;
}
.footer p a:hover{
color: #FF0000;
}
转载于:https://www.cnblogs.com/sonerwx/p/10385979.html
小米商城网页版(js+css)相关推荐
- 网页版JS游戏五子棋单机版也可以改版成网络版
网页版JS游戏五子棋单机版也可以改版成网络版 2个文件,界面wuziqi.html 脚本wuziqi.js 新手可以去我下载中心下, <!DOCTYPE html> <html ...
- 手机网页版JS压缩上传图片--base64位 兼容IOS和安卓
首先,我用到了一款插件,是纯JS压缩上传插件,第一次用CSDN,不太会用,我把插件所有代码拷贝在文章末尾. 加载JS插件<script src="__JS__/dist/lrz.mob ...
- 网页html/js/css错误代码在线检测网站汇总
在用IE浏览网站时,发现下面显示"网页上有错误",虽然不影响浏览,但总归让人感觉不舒服,大概多数站长都遇到过.而如果你的代码基础不是很好的话也许根 本找不到办法去解决这个问题,以致 ...
- HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
- HTML期末大作业 仿小米商城网页设计与制作(HTML+CSS+JavaScript) JavaScript期末大作业 web前端期末大作业 dw静态网页
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
- 网页版2048html制作,基于HTML+CSS+JS的网页版2048的实现
ELECTRONICS WORLD·j6: 雾 与 粤 赛 基 于HTM L+CSS+J S的网页:I~2 048的实现 [摘要 ]描述了一个使用HTML和css进行uI界面设计,使用Js进行后台逻辑 ...
- 网页版2048html制作,基于HTML+CSS+JS的网页版2048的实现.pdf
ELECTRONICS WORLD ・探索与观察 基于HTML+CSS+JS的网页版2048的实现 山西农业大学 王艺燕 [摘要] 描述了一个使用HTML和CSS进行UI界面设计,使用JS进行后台逻辑 ...
- 花了两天时间用html+css+js做了一个网页版坦克大战游戏
大家好,我是孙叫兽,本期内容给大家分享如何用html+css+javaScript去做一个简易网页版坦克游戏. 目录 坦克游戏玩法及介绍 项目结构 源码地址: 坦克游戏玩法及介绍 我们先来看一下首页. ...
- 网页版简单点名系统的实现(HTML5、CSS、JS、jQuery)
网页版点名 实现的步骤: 1.搭建环境 2. 编写HTML和CSS代码把网页效果先写出来 3. 编写JS代码实现逻辑 4. 测试点名系统 搭建环境 创建一个HTML文件,导入JQuery文件,如下图: ...
最新文章
- spring-data-mongodb必须了解的操作
- HTML简单的自定义属性制作tab切换
- Dmoz介绍及怎么提交?
- Linux磁盘格式化和挂载
- win32应用程序创建流程
- 2017(深圳) .NET技术分享交流会 第二期,将有网络直播
- C++关于引用的注意事项 总结知识点
- LeetCode 935. 骑士拨号器(动态规划)
- Keepalived原理详解
- POJ1007 UVA612 UVALive5414 ZOJ1188 HDU1379 Bailian4086 DNA Sorting【排序+逆序数】
- hdu5652:India and China Origins(并查集)
- 操作系统中的hosts文件
- 编译U-boot时,make[1]: *** 没有规则可以创建mkimage.o”
- python是免费的、开源的、跨平台的_NovalIDE是一款开源,跨平台,而且免费的国产Python IDE。...
- UniWebView插件的使用
- 计算机系统应用 莫军,ARINC653分区操作系统多核处理器任务调度设计
- 单片机c语言编写一个时钟程序,单片机基于c语言编写时钟.doc
- OCI跨租户(Tenancy)Object Storage文件复制
- 从虚拟光驱启动计算机,手把手教你使用win10/win8自带的”虚拟光驱“(资源管理器)挂载打开ISO镜像文件-系统操作与应用
-亦是美网络...
- Ajax获取服务器端响应数据的两种方式
热门文章
- 12.2 关闭DLM 自动收集统计信息 (SCM0)ORA-00600之[ksliwat: bad wait time]
- 机器人SLAM与自主导航——(四)Gazebo仿真机器人导航
- Flask项目之手机端租房网站的实战开发(一)
- 计算机蓝屏 代码0000a,win7电脑蓝屏代码显示0x0000001A的解决方法
- 计算机二级 公共基础知识资料
- Ubuntu安装桌面
- 微信小游戏《飞机打方块》源码分享
- mysql rls_DBMS_RLS包实现数据库表行级安全控制
- js点击获取—通过JS获取图片的相对坐标位置
- PROE/Croe如何编辑已完成的草图,让其再次进入草绘状态