仿小米商城和登录的静态页面
- 以下仅为参考，下载学习请前往本人gitee仓库
- 主页(index).html
- index.css
- search.js
- login.html
- login.css
- login.js
以下仅为参考，下载学习请前往本人gitee仓库
主要使用了html css 原生js jquery bootstrap，以下仅为参考，下载学习请前往本人gitee仓库
下载链接: gitee仓库
主页(index).html
下面展示一些 主页图片。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title><link rel="stylesheet" href="./css/iconfont.css"><link rel="stylesheet" href="./css/bootstrap.css"><script src="./js/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="./js/bootstrap.js"></script><link rel="stylesheet" href="./css/index.css"><link rel="shortcut icon" href="./-1367494811.jpg" type="image/x-icon" /> <!--IE 地址栏前的图标--><link rel="Bookmark" href="./-1367494811.jpg" type="image/x-icon"> <!--收藏夹的图标-->
</head><body><div class="top"><!-- 顶部导航 --><div class="firstNav "><div class="w"><ul class="w"><li><a href="">小米官网</a><span>|</span></li><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 class="QR"><a href="">下载app</a><span>|</span><div class="QR_code"><img src="./img/OR_Code.png" alt="" style="height: 150px;"></div><div class="triangle"></div></li><li><a href="">Select Location</a></li><ul class="login w"><li><a href=""><i class="iconfont icon-gouwucheman"></i> 购物车（0）</a><div class="gwc"><p>购物车中还没有商品，赶紧选购吧！</p></div></li><li><a href="">消息通知</a></li><li><a href="./login.html">注册</a><span>|</span></li><li><a href="./login.html">登录</a><span>|</span></li></ul></ul></div></div><div class="secondNav"><div class="secondNav_main w"><!-- logo --><div class="logo"><h1><a href="" title="小米官网">小米官网</a></h1></div><!-- nav --><div class="s_Nav"><ul><a href="" class="XiaomiPhone"><li>Xiaomi手机</li></a><a href="" class="RedmiPhone"><li>Redmi手机</li></a><a href="" class="TV"><li>电视</li></a><a href="" class="NoteBook"><li>笔记本</li></a><a href="" class="Ipad"><li>平板</li></a><a href="" class="Appliances"><li>家电</li></a><a href="" class="Rooter"><li>路由器</li></a><a href=""><li>服务中心</li></a><a href=""><li>社区</li></a></ul></div><!-- search --><div class="search"><input type="text" placeholder="冰箱" id="text"><button id="btn_search"><i class="iconfont icon-fangdajing"></i></button><div class="more_search" id="more_search"><ul><li>全部商品</li><li>手机</li><li>手机</li><li>手机</li><li>手机</li><li>手机</li><li>手机</li><li>手机</li></ul></div></div></div><!-- 下滑菜单 --><div class="Xiaomi"><ul class="w Xiaomi_Phone"><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><span class="border"></span></li></a></ul><ul class="w Redmi_Phone"><a href=""><li><img src="./img/OR_Code.png" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><span class="border"></span></li></a></ul><ul class="w T_V"><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><span class="border"></span></li></a></ul><ul class="w Note_Book"><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><span class="border"></span></li></a></ul><ul class="w I_pad"><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><span class="border"></span></li></a></ul><ul class="w App_liances"><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><span class="border"></span></li></a></ul><ul class="w Root_er"><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><i class="border"></i></li></a><a href=""><li><img src="./img/phone.webp" alt=""><span class="goods">Xiaomi 13 限量定制色</span><span>4999元</span><span class="border"></span></li></a></ul></div></div><!-- main --><div class="main w"><div id="demo" class="carousel slide" data-ride="carousel"><!-- 指示符 --><ul class="carousel-indicators"><li data-target="#demo" data-slide-to="0" class="active"></li><li data-target="#demo" data-slide-to="1"></li><li data-target="#demo" data-slide-to="2"></li></ul><!-- 轮播图片 --><div class="carousel-inner"><div class="carousel-item active"><img src="./img/01.jpg"></div><div class="carousel-item"><img src="./img/02.webp"></div><div class="carousel-item"><img src="./img/03.webp"></div></div><!-- 左右切换按钮 --><a class="carousel-control-prev" href="#demo" data-slide="prev"><span class="carousel-control-prev-icon"></span></a><a class="carousel-control-next" href="#demo" data-slide="next"><span class="carousel-control-next-icon"></span></a></div><div class="main_l"><ul><a href=""><li>手机<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>电视<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>家电<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>笔记本 平板<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>出行穿搭<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>耳机 音箱<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>健康 儿童<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>生活 箱包<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>智能 路由器<i class="iconfont icon-youjiantou"></i></li></a><a href=""><li>电源 配件<i class="iconfont icon-youjiantou"></i></li></a></ul></div></div><div class="main_b w"><div class="mb_l"><ul><a href=""><li><img src="./img/xiao1.png" alt=""><br><i>保障服务</i></li></a><a href=""><li><img src="./img/xiao2.png" alt=""><br><i>企业团购</i></li></a><a href=""><li><img src="./img/xiao3.png" alt=""><br><i>F码通道</i></li></a><a href=""><li><img src="./img/xiao4.png" alt=""><br><i>米粉卡</i></li></a><a href=""><li><img src="./img/xiao5.png" alt=""><br><i>以旧换新</i></li></a><a href=""><li><img src="./img/xiao6.png" alt=""><br><i>话费充值</i></li></a></ul></div><div class="mb_r"><ul><a href=""><li><img src="./img/05.jpg" alt=""></li></a><a href=""><li><img src="./img/06.jpg" alt=""></li></a><a href=""><li><img src="./img/07.jpg" alt=""></li></a></ul></div></div></div><div class="mid"><a href="" class="kt w"><img src="./img//kt.webp" alt=""></a><!-- 商品栏目 --><div class="Mi_goods w"><div class="Mi_more_goods"><div class="Mi_more_goods_top"><span>手机</span><span><a href="">查看更多<i class="iconfont icon-youjiantou"></i></a></span></div><div class="Mi_more_goods_l"><a href=""><img src="./img/lang.webp" alt=""></a></div><div class="Mi_more_goods_r"><ul><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a></ul></div></div></div><div class="Mi_goods w"><div class="Mi_more_goods"><div class="Mi_more_goods_top"><span>手机</span><span><a href="">查看更多<i class="iconfont icon-youjiantou"></i></a></span></div><div class="Mi_more_goods_l"><a href=""><img src="./img/lang.webp" alt=""></a></div><div class="Mi_more_goods_r"><ul><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a><a href=""><li><img src="./img/goods.png" alt=""></li></a></ul></div></div></div><a href="" class="kt w"><img src="./img//pen.webp" alt="" class="pen"></a></div><div class="bottom"><h1 class="w"><ul class="Serve"><a href=""><li><i class="iconfont icon-editor2"></i><p style="display: inline;">预约维修服务</p></li></a><a href=""><li><span class="border_2"></span><i class="iconfont icon-7"></i><p style="display: inline;">7天无理由退货</p></li></a><a href=""><li><span class="border_2"></span><i class="iconfont icon-15"></i><p style="display: inline;">15天免费换货</p></li></a><a href=""><li><span class="border_2"></span><i class="iconfont icon-liwu"></i><p style="display: inline;">满69元包邮</p></li></a><a href=""><li><span class="border_2"></span><i class="iconfont icon-ditu"></i><p style="display: inline;">1100余家售后网点</p></li></a></ul></h1><div class="more_Serve w"><div class="more_Serve_l"><ul class="category"><h4>选购指南</h4><a href=""><li>手机</li></a><a href=""><li>电视</li></a><a href=""><li>笔记本</li></a><a href=""><li>平板</li></a><a href=""><li>穿戴</li></a><a href=""><li>耳机</li></a><a href=""><li>家电</li></a><a href=""><li>路由器</li></a><a href=""><li>音响</li></a><a href=""><li>配件</li></a></ul><ul class="category"><h4>服务中心</h4><a href=""><li>申请售后</li></a><a href=""><li>售后政策</li></a><a href=""><li>维修服务价格</li></a><a href=""><li>订单查询</li></a><a href=""><li>以旧换新</li></a><a href=""><li>保障服务</li></a><a href=""><li>防伪查询</li></a><a href=""><li>F码通道</li></a></ul><ul class="category"><h4>线下门店</h4><a href=""><li>小米之家</li></a><a href=""><li>服务网点</li></a><a href=""><li>授权体验店/专区</li></a></ul><ul class="category"><h4>关于小米</h4><a href=""><li>了解小米</li></a><a href=""><li>加入小米</li></a><a href=""><li>投资者关系</li></a><a href=""><li>环境，社会及管治</li></a><a href=""><li>廉洁举报</li></a></ul><ul class="category"><h4>关注我们</h4><a href=""><li>新浪微博</li></a><a href=""><li>官方微信</li></a><a href=""><li>联系我们</li></a><a href=""><li>公益基金会</li></a></ul></div><div class="more_Serve_r"><span class="border_3"></span><h4>400-100-5678</h4><p>8:00-18:00（仅收市话费）</p><div class="customer"><a href=""><i class="iconfont icon-xinxi"></i><span>人工客服</span></a></div></div></div></div><div class="last"><div class="last_logo w"><img src="./img/logo-mi2.png" alt=""></div><div class="last_more">小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 音乐 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 |SelectLocation<br>北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2023]0169-004 <br>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 <br>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证 <br>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p></div><p class="final_words">探索黑科技，小米为发烧而生</p></div><script src="./js/jquery.min.js"></script><script src="./js/search.js"></script>
</body></html>
index.css
* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;
}body {/* background-color: #fe7171; */width: 100% !important;min-width: 1226px;
}a {text-decoration: none !important;
}.top {padding-bottom: 25px;
}/* 主体宽度 */
.w {margin: 0 auto !important;width: 1226px;
}/* 顶部导航 */
.firstNav {/* text-align: center; */background-color: #333333;height: 40px;}.firstNav li {float: left;
}.firstNav a {color: #b0b0b0;line-height: 40px;font-size: 12px;margin-right: 5px;margin-left: 5px;
}.firstNav li span {color: #424242;
}.firstNav a:hover {color: white;transition: all 0.4s ease 0s;
}/* 下拉二维码 */
.QR {position: relative;
}.QR_code {overflow: hidden;position: absolute;right: -28px;/* top: 5px; */background-color: #fff;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);height: 0px;transition: 0.5s;z-index: 10;width: 125px;
}.QR:hover .triangle {display: block;
}.QR:hover .QR_code {height: 150px;z-index: 10;
}/* 下拉二维码三角 */
.triangle {display: none;position: absolute;width: 0;height: 0;border: 10px solid;border-color: transparent transparent rgb(255, 255, 255) transparent;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);top: 20px;left: 17px;
}/* 右侧登录 */
.login li {float: right;height: 40px;
}.login li a {margin: 0 5px 0 5px;
}.login li:nth-child(1) {position: relative;width: 120px;background-color: #424242;text-align: center;margin-left: 10px;
}/* 购物车下拉框 */.gwc {position: absolute;overflow: hidden;height: 0px;width: 320px;background-color: #fff;top: 40px;left: -200px;transition: 0.5s;box-shadow: 1px 10px 10px 0px rgba(0, 0, 0, 0.2);z-index: 10;
}.gwc p {text-align: center;line-height: 95px;font-size: 10px;
}.login li:nth-child(1):hover {background-color: #fff;}.login li:nth-child(1):hover a {color: #ff6702;
}.login li:nth-child(1):hover .gwc {height: 95px;z-index: 10;}/* 二级导航栏 */
.secondNav {/* position: relative; *//* background-color: #be5353; */height: 100px;
}.secondNav_main {position: relative;/* background-color: #be5353; */height: 100px;
}/* logo */
.logo {position: absolute;width: 56px;height: 56px;top: 20px;margin-right: 178px;
}.logo a {display: block;width: 56px;height: 56px;background: url(../img/logo-mi2.png);background-size: cover;font-size: 0px;
}/* 二层nav
*/
.s_Nav {/* height: 100px; *//* width: 630px; */margin-left: 228px;
}.s_Nav a {float: left;/* display: block; */line-height: 100px;color: #000000;margin: 0 10px 0 10px;
}.s_Nav li {height: 50px;
}.s_Nav a:hover {color: #ff6700;transition: all 0.4s ease 0s;
}/* search */
.search {transition: 0.3s;
}.search input {width: 245px;height: 50px;margin-top: 25px;margin-left: 78px;border: 1px solid #e0e0e0;border-right: none;outline: none;padding-left: 10px;color: #6f6f6f;transition: 0.3s;
}.search button {position: absolute;border: 1px solid#e0e0e0;/* border-left: none; */width: 50px;height: 50px;top: 25px;right: 0;background-color: #fff;font-weight: 1000;transition: 0.3s;}.search:hover input {border: 1px solid#8a8a8a;border-right: none;
}.search:hover button {border: 1px solid #8a8a8a;/* border-left: none; */
}.search button:hover {background: #ff6600;border: none;color: #fff;
}.search button:hover input {border-right: none !important;
}/* 搜索框下拉 */
.more_search {display: none;position: absolute;top: 75px;right: 50px;background-color: #fff;width: 245px;height: 241px;border: 1px solid #ff6700;border-top: none;z-index: 9;
}.more_search li {font-size: 5px;height: 30px;line-height: 30px;padding-left: 10px;
}.more_search li:hover {background-color: #fafafa;
}/* 搜索框下拉边框 */
.border_one {border: 1px solid #ff6700 !important;
}.border_two {border: 1px solid #ff6700 !important;border-left: none !important;
}/* 下滑菜单 */
.Xiaomi {height: 230px;overflow: hidden;background-color: #933434;display: none;
}.Xiaomi ul {display: block;position: relative;height: 230px;background-color: #ffffff;/* padding: 35px 40px 0 40px; */
}.Xiaomi ul li {float: left;height: 100%;width: 16.666666666666666%;background-color: #34b423;text-align: center;padding-top: 35px;
}.Xiaomi ul li img {/* width: 100%; */padding-left: 10px;
}.border {position: absolute;display: block;height: 100px;width: 1px;top: 35px;background-color: #e0e0e0;margin-top: 10ox;
}.Xiaomi ul li span {display: block;font-size: 10px;color: #e0e0e0;}.goods {margin-top: 10px;
}.Xiaomi ul li span:nth-child(3) {margin-top: 5px;color: #ff6600;
}/* 下滑菜单动画 */
.Xiaomi_Phone,
.Redmi_Phone,
.T_V,
.Note_Book,
.I_pad,
.App_liances,
.Root_er {display: none !important;
}.main {position: relative;height: 460px;background-color: #d42727;
}.main_l {position: absolute;width: 234px;height: 460px;background: #979b9b;background-color: rgba(0, 0, 0, 0.5);top: 0px;
}.main_l ul {padding-top: 20px;
}.main_l li {/* float: left !important; */width: 100%;height: 42px;/* background-color: #f8f8f8; */font-size: 15px;line-height: 42px;padding-left: 30px;color: #ffffff;
}.main_l li:hover {background-color: #ff6700;
}.main_l li i {float: right;margin-right: 20px;
}img {width: 100%;/* float: left; */
}.carousel-control-prev {left: 232px;
}.carousel-control-next {left: 1200px;
}.carousel-control-prev:hover,
.carousel-control-next:hover {background-color: #000;
}/* 服务广告 */
.main_b {margin-top: 15px;height: 170px;
}.mb_l {float: left;flex-direction: row;height: 100%;width: 234px;background-color: #5f5750;
}.mb_l li {float: left;width: 78px;height: 84px;/* background-color: #763333; */text-align: center;/* margin: 6px 0 0 10px; */
}.mb_l li img {margin-top: 20px;width: 24px;height: 24px;/* background-color: #6f6f6f; */
}.mb_l li i {color: #e7e5e4;font-style: normal;
}.mb_r {height: 100%;/* background-color: #403939; */
}.mb_r li {float: left;margin-left: 14.6px;width: 316px;height: 170px;
}.mb_r img {height: 100%;transition: all 250ms cubic-bezier(.02, .01, .47, 1);
}.mb_r img:hover {box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);transform: translate(0, -5px);transition-delay: 0s !important;
}/* 商品 */
.mid {background-color: #f5f5f5;
}.pen {padding-bottom: 40px;
}.Mi_goods {margin-top: 20px;height: 694px;
}.kt {display: block;padding-top: 20px;
}.Mi_more_goods_top {height: 59px;
}.Mi_more_goods_top span:nth-child(1) {float: left;font-size: 25px;line-height: 59px;
}.Mi_more_goods_top span:nth-child(2) a {float: right;line-height: 59px;color: #000;
}.Mi_more_goods_top span:nth-child(2) a:hover {color: #ff6600;
}.Mi_more_goods_l {float: left;width: 234px;height: 615px;
}.Mi_more_goods_l img,
.Mi_more_goods_r img {transition: all 250ms cubic-bezier(.02, .01, .47, 1);
}.Mi_more_goods_l img:hover,
.Mi_more_goods_r img:hover {box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);transform: translate(0, -5px);transition-delay: 0s !important;
}.Mi_more_goods_r ul {margin: 0;padding: 0;border: none;
}.Mi_more_goods_r li {float: left;width: 234px;height: 301px;margin-left: 14px;margin-bottom: 12px;
}/* 底部服务 */
.bottom {margin-top: -15px;height: 450px;background-color: #fff
}.bottom h1 li {float: left;width: 20%;line-height: 70px;padding: 0 50px 0 50px;color: #616161;
}.bottom h1 {display: block;height: 70px !important;margin: 0;height: 0;/* background-color: #adc306; */font-size: 15px;border-bottom: 1px solid #afafaf;
}.Serve li {position: relative;
}.border_2 {position: absolute;display: block;width: 1px;height: 25px;background-color: #afafaf;top: 22px;left: -5px;
}.Serve li:hover i,
.Serve li:hover p {color: #ff6600;transition: all 0.4s ease 0s;
}.more_Serve_l {margin-top: 30px;width: 970px;padding: 0 0px 0 163px;
}.category {float: left;width: 20%;
}.more_Serve_l h4 {font-size: 14px;margin: 15px 0 15px 0;
}.category a li {margin: 10px 0 7px 0;font-size: 10px !important;color: #757575;
}.category a li:hover {color: #ff6600;/* transition: all 0.2s ease 0s; */
}.more_Serve_r {position: relative;float: right;text-align: center;margin-right: 45px;
}.border_3 {position: absolute;display: block;height: 70px;width: 1px !important;background-color: #afafaf;/* z-index: 10; */top: 20px;right: 204px;
}.more_Serve_r h4 {color: #ff6700;
}.more_Serve_r p {font-size: 10px;color: #757575;
}.customer {margin-left: 17px;width: 121px;height: 30px;border: 1px solid#ff6700;
}.customer i {color: #ff6700;
}.customer span {color: #ff6700;font-size: 10px;
}.customer:hover {background-color: #ff6700;transition: all 0.7s ease 0s;
}.customer:hover i,
.customer:hover span {color: #fff;
}.last {background-color: #f5f5f5;height: 250px;
}.last {position: relative;background-color: #f5f5f5;padding-top: 30px;}.last_logo img {float: left;width: 56px;height: 56px;
}.last_more {float: left;font-size: 10px;margin-top: 5px;margin-left: 20px;
}.last_more p {font-size: 7px;color: #afafaf;
}.final_words {position: absolute;left: 850px;top: 200px;color: #afafaf;
}
search.js
//获取搜索框id
var search = document.getElementById('text')
//获取搜索按钮
var btn_search = document.getElementById('btn_search')
//获取搜索框下拉菜单
var more_search = document.getElementById('more_search')search.onclick = function (e) {search.classList.add('border_one')btn_search.classList.add('border_two')more_search.style.display = 'block'e.stopPropagation()//阻止冒泡
}
document.addEventListener('click', function () {more_search.style.display = 'none';//隐藏search.classList.remove('border_one')btn_search.classList.remove('border_two')
});
more_search.addEventListener('click', function (e) {e.stopPropagation()
})// this.className = 'border_one'
// btn_search.className = 'border_two'
// more_search.className = 'border_three'
// console.log(search.onclick);login.html
下面展示一些 login.html代码片。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆/注册</title><link rel="stylesheet" href="./css/login.css"><script src="./js/jquery.min.js"></script><script src="./js/login.js"></script><link rel="shortcut icon" href="./-1367494811.jpg" type="image/x-icon" /> <!--IE 地址栏前的图标--><link rel="Bookmark" href="./-1367494811.jpg" type="image/x-icon"> <!--收藏夹的图标-->
</head><body><div class="box"><div class="login_l"></div><div class="login_r"><h1 class="top"><div class="top_l"><img src="./img/logo-mi2.png" alt=""><span>小米帐号</span></div><div class="top_r"><a href="">用户协议</a><a href="">隐私政策</a><a href="">帮助中心</a><select><option value="volvo">中文（简体）</option><option value="saab">中文（繁体）</option><option value="opel">英文</option></select></div></h1><div class="main"><ul id="options"><li class="border">登录</li><li>注册</li></ul><div id="more"><div class="log item" style="display: block;"><input type="text" placeholder="邮箱/手机号码/小米ID" id="log_1"><input type="password" name="" id="log_2" placeholder="密码" minlength="6"><input type="checkbox" class="check"> <span>已阅读并同意小米帐号 <a href="">用户协议</a> 和<ahref="">隐私政策</a></span><input type="submit" style="text-align: center ;padding-left: 0px;background-color: #6c3a1d;"id="log_3"><a href="" style="color: #fb6d1d;">忘记密码？</a></div><div class="reg item"><select style="font-size: 15px;"><option value="volvo">中国</option><option value="saab">美国</option><option value="opel">加拿大</option></select> <br><input type="text" placeholder="手机号" id="reg_1"> <br><input type="text" placeholder="请输入验证码" id="reg_2"><input type="checkbox" class="check"> <span>已阅读并同意小米帐号 <a href="">用户协议</a> 和 <ahref="">隐私政策</a></span><input type="submit" style="text-align: center ;padding-left: 0px;background-color: #6c3a1d;"id="reg_3"><span href="" style="color: #fb6d1d;">获取验证码</span></div></div></div></div></div>
</body></html>
login.css
* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;
}html {height: 100%;display: table;
}body {/* background-color: #fe7171; */width: 100% !important;height: 100%;}a {text-decoration: none !important;
}.box {/* margin-bottom: 10px; */
}.login_l {float: left;width: 370px;/* height: 961px; */padding-bottom: 960px;background: url(../img/bg.jpg) no-repeat;background-size: 100% 100%;/* z-index: 10; */}.login_r {/* float: left; */width: 1873px;/* position: relative; */height: 961px;background-color: #0f0f0f;
}.top {height: 80px;width: 100%;/* background-color: #fff; */
}.top_l {float: left;
}.top_l img {width: 40px;height: 40px;margin-top: 20px;margin-left: 20px;vertical-align: bottom;
}.top_l span {color: #c3c3c3;font-size: 28px;font-weight: normal;/* margin-bottom: 100px; */
}.top_r {float: right;text-align: center;line-height: 80px;
}.top_r {font-size: 15px;margin-right: 40px;font-weight: normal;
}.top_r a {color: #c3c3c3;margin-right: 10px;
}.top_r select {margin: left 10px;color: #c3c3c3;border: none;background-color: #0f0f0f;text-align: center;
}.top_r option {border: none;background-color: #0f0f0f;
}.top_r a:hover,
.top_r option:hover {transition: all 0.7s ease 0s;color: coral;
}.main {width: 450px;height: 570px;background-color: #1d1d1d;margin: 100px 850px;border-radius: 5px;padding: 44px;
}#options {width: 360px;height: 72px;
}#options li {float: left;font-size: 24px;font-weight: 600;margin-right: 15px;color: #4a4a4a
}.border {color: #c3c3c3 !important;border-bottom: 5px solid #fd6d1c;border-radius: 1px;
}.reg {display: none;height: 500px;
}.reg select {width: 354px;height: 64px;margin-bottom: 20px;background-color: #2d2d2d;border: none;border-radius: 5px;padding-left: 20px;color: #c3c3c3;}.reg input,
.log input {width: 354px;height: 64px;margin-bottom: 20px;background-color: #2d2d2d;border: none;border-radius: 5px;font-size: 15px;padding-left: 20px;color: #595959;
}.reg span,
.log span {color: #595959;
}.reg span a,
.log span a {color: #ffffff;
}.check {vertical-align: top;color: #2d2d2d;border: none;border-radius: 5px;width: 20px !important;height: 20px !important;
}.item {display: none;
}.sum {background-color: #e3641d !important;color: #ffffff !important;
}
login.js
$(function () {$("#options li").click(function () {$(this).addClass("border").siblings().removeClass('border');var index = $(this).index();$(".main .item").eq(index).fadeToggle().show().siblings().hide()})$("#log_2").blur(function () {if ($("log_1").val() !== '' && $("log_2").val() !== '') {$("#log_3").addClass('sum')}else if ($("log_1").val() == '' || $("log_2").val() == '') {$("#log_3").removeClass('sum')}});$("#reg_2").blur(function () {if ($("reg_1").val() !== '' && $("reg_2").val() !== '') {$("#reg_3").addClass('sum')}else {$("#reg_3").removeClass('sum')}});})
