目录
文章目录
静态网页代码
建立一个文件夹,在文件夹里,见一个新建文本.txt再把后缀改成demo.html然后,
在建一个文本再把css代码复制进去后缀名改成1.css
这是我刚学习前端做的一个小米网页,看似有点相似,但是里面的元素还是有很多不同的地方.
祝愿学弟学妹早日实现自己的梦想。
HTML部分
CSS部分
文章目录
静态网页代码
建立一个文件夹,在文件夹里,见一个新建文本.txt再把后缀改成demo.html然后,
在建一个文本再把css代码复制进去后缀名改成1.css
废话不多说上源码
这里我是把CSS放到外部文件，这样代码会更简洁。
demo.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城 - 小米10 Pro、Redmi 10X、小米MIX Alpha，小米电视官方网站</title><link rel="stylesheet" href="1.css"><link rel="shortcut icon" href="./1c.ico">
</head>
<body><header><div class="topbar"><ul class="left-nav"><li><a href="#">小米商城</a></li><i>|</i><li><a href="#">MIUI</a></li><i>|</i><li><a href="#">IoT</a></li><i>|</i><li><a href="#">云服务</a></li><i>|</i><li><a href="#">金融</a></li><i>|</i><li><a href="#">有品</a></li><i>|</i><li><a href="#">小爱开放平台</a></li><i>|</i><li><a href="#">企业团购</a></li><i>|</i><li><a href="#">资质证照</a></li><i>|</i><li><a href="#">协议规则</a></li><i>|</i><li class="now"><a href="#">下载app</a><div class="more"></div></li><i class="left">|</i><li><a href="#">Select Location</a></li></ul><ul class="right-nav"><li><a href="#">登录</a></li><i>|</i><li><a href="#">注册</a></li><i>|</i><li><a href="#">消息通知</a></li><li class="shop-cart"><span class="iconfont">󰅹</span>购物车</li></ul></div></header><nav class="container"><div class="logo-box"></div><a href="#"><img src="./小米动态.gif" alt="" width="165" height="55" class="gif"></a><ul class="sec-nav"><li><a href="#">小米手机</a><div class="but-buy-now"><ul><li><img src="./手机.webp" alt="" width="160" height="110"><div>小米10至尊纪念版</div><p>1999元</p></li><li><img src="./手机.webp" alt="" width="160" height="110"><div>小米10至尊纪念版</div><p>1999元</p></li><li><img src="./手机.webp" alt="" width="160" height="110"><div>小米10至尊纪念版</div><p>1999元</p></li><li><img src="./手机.webp" alt="" width="160" height="110"><div>小米10至尊纪念版</div><p>1999元</p></li><li><img src="./手机.webp" alt="" width="160" height="110"><div>小米10至尊纪念版</div><p>1999元</p></li></ul></div></li><li><a href="#">Redmi 红米</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><form action=""><input type="text" placeholder="手机"><input type="submit" class="iconfont" value=""></form></nav><div id="wrap"><input type="radio" name="switch" checked id="img1"><input type="radio" name="switch" id="img2"><input type="radio" name="switch" id="img3"><input type="radio" name="switch" id="img4"><input type="radio" name="switch" id="img5"><div class="banner-img"><img src="./images/1.jpg" alt=""><img src="./images/2.webp" alt=""><img src="./images/3.webp" alt=""><img src="./images/4.webp" alt=""><img src="./images/5.webp" alt=""></div><div class="labels"><label for="img1"></label><label for="img2"></label><label for="img3"></label><label for="img4"></label><label for="img5"></label></div><ul class="banner-menu"><li><a href="#">手机</a><a href="#">电话卡</a><span class="iconfont"></span><div class="sub-menu sub-menu-4"><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div></div></li><li><a href="#">电视</a><a href="#">盒子</a><span class="iconfont"></span><div class="sub-menu sub-menu-3"><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div></div></li><li><a href="#">笔记本</a><a href="#">显示器</a><span class="iconfont"></span><div class="sub-menu sub-menu-2"><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div><div class="sub-menu-list"><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a><a href="#"><img src="./images/small.webp" alt=""><span>手机上门维修</span></a></div></div></li><li><a href="#">家电</a><a href="#">插线板</a><span class="iconfont"></span></li><li><a href="#">出行</a><a href="#">穿戴</a><span class="iconfont"></span></li><li><a href="#">智能</a><a href="#">路由器</a><span class="iconfont"></span></li><li><a href="#">电源</a><a href="#">配件</a><span class="iconfont"></span></li><li><a href="#">健康</a><a href="#">儿童</a><span class="iconfont"></span></li><li><a href="#">耳机</a><a href="#">音响</a><span class="iconfont"></span></li><li><a href="#">生活</a><a href="#">箱包</a><span class="iconfont"></span></li></ul><div class="wrap-left iconfont"></div><div class="wrap-right iconfont"></div></div><div class="home-sub-row"><div class="home-sub1"><div class="home-sub1-1"><span class="iconfont"></span><span>智能生活</span></div><div class="home-sub1-2"><span class="iconfont"></span><span>企业团购</span></div><div class="home-sub1-3"><span class="iconfont"></span><span>F码通道</span></div><div class="home-sub1-4"><span class="iconfont"></span><span>米粉卡</span></div><div class="home-sub1-5"><span class="iconfont"></span><span>以旧换新</span></div><div class="home-sub1-6"><span class="iconfont"></span><span>话费充值</span></div></div><div class="home-sub2"></div><div class="home-sub3"></div><div class="home-sub4"></div></div><div class="buy"><h2>小米闪购<span class="iconfont"></span><span class="iconfont"></span></h2><ul class="buy-sell"><li><img src="./空调.jpg" alt="" width="160" height="160"><h3>最生活毛巾·Air（10条装） 白色+素蓝</h3><p>给生活一条好毛巾</p><span>99元</span><del>169元</del></li><li><img src="./空调.jpg" alt="" width="160" height="160"><h3>最生活毛巾·Air（10条装） 白色+素蓝</h3><p>给生活一条好毛巾</p><span>99元</span><del>169元</del></li><li><img src="./空调.jpg" alt="" width="160" height="160"><h3>最生活毛巾·Air（10条装） 白色+素蓝</h3><p>给生活一条好毛巾</p><span>99元</span><del>169元</del></li><li><img src="./空调.jpg" alt="" width="160" height="160"><h3>最生活毛巾·Air（10条装） 白色+素蓝</h3><p>给生活一条好毛巾</p><span>99元</span><del>169元</del></li><li><img src="./空调.jpg" alt="" width="160" height="160"><h3>最生活毛巾·Air（10条装） 白色+素蓝</h3><p>给生活一条好毛巾</p><span>99元</span><del>169元</del></li></ul></div><div class="model-buy"><img src="./横条栏.jpg" alt="" width="1226" height="120"></div><div class="buy-mi"><h2>手机<span class="iconfont" style="font-size: 28px;"></span><span>查看全部</span></h2><div class="big-img"></div><ul class="img-buy"><li><img src="./1.webp" alt=""><h3>小米10青春版5g</h3><p class="desc">又大又好用</p><p class="price">1899元 <del>2099元</del></p></li><li><img src="./1.webp" alt=""><h3>小米10青春版5g</h3><p class="desc">又大又好用</p><p class="price">1899元 <del>2099元</del></p></li><li><img src="./1.webp" alt=""><h3>小米10青春版5g</h3><p class="desc">又大又好用</p><p class="price">1899元 <del>2099元</del></p></li><li><img src="./1.webp" alt=""><h3>小米10青春版5g</h3><p class="desc">又大又好用</p><p class="price">1899元 <del>2099元</del></p></li><li><img src="./1.webp" alt=""><h3>小米10青春版5g</h3><p class="desc">又大又好用</p><p class="price">1899元 <del>2099元</del></p></li><li><img src="./1.webp" alt=""><h3>小米10青春版5g</h3><p class="desc">又大又好用</p><p class="price">1899元 <del>2099元</del></p></li><li><img src="./1.webp" alt=""><h3>小米10青春版5g</h3><p class="desc">又大又好用</p><p class="price">1899元 <del>2099元</del></p></li><li><img src="./1.webp" alt=""><h3>小米10青春版5g</h3><p class="desc">又大又好用</p><p class="price">1899元 <del>2099元</del></p></li></ul></div><div class="model-pen"><img src="./横条栏2.jpg" alt="" width="1226" height="120"></div><div class="video"><div class="video-mi"><h2>视频<span class="iconfont" style="font-size: 28px;"></span><span>查看全部</span></h2><ul class="video-play"><li><img src="./播放图.jpg" alt="" width="296" height="180"><span class="iconfont"></span><h3> Redmi 10X系列发布会 </h3><p> Redmi 10X系列发布会 </p></li><li><img src="./播放图.jpg" alt="" width="296" height="180"><span class="iconfont"></span><h3> Redmi 10X系列发布会 </h3><p> Redmi 10X系列发布会 </p></li><li><img src="./播放图.jpg" alt="" width="296" height="180"><span class="iconfont"></span><h3> Redmi 10X系列发布会 </h3><p> Redmi 10X系列发布会 </p></li><li><img src="./播放图.jpg" alt="" width="296" height="180"><span class="iconfont"></span><h3> Redmi 10X系列发布会 </h3><p> Redmi 10X系列发布会 </p></li></ul></div></div><footer><ul class="bottom"><li><span class="iconfont"></span>预约维修服务</li><li><span class="iconfont">7天无理由退货</li><li><span class="iconfont">15天免费换货</li><li><span class="iconfont">满99元包邮</li><li><span class="iconfont">520余家售后网点</li></ul><div class="name-tel"><dl class="name-tel-1"><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl><dl class="name-tel-2"><dt>服务支持</dt><dd>售后政策</dd><dd>自助服务</dd><dd>相关下载</dd></dl><dl class="name-tel-3"><dt> 线下门店</dt><dd>小米之家</dd><dd>服务网点</dd><dd>授权体验店</dd></dl><dl class="name-tel-4"><dt>关于小米</dt><dd>了解小米</dd><dd>加入小米</dd><dd>投资者关系</dd><dd>企业社会责任</dd><dd>廉洁举报</dd></dl><dl class="name-tel-5"><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd><dd>企业社会责任</dd><dd>公益基金会</dd></dl><dl class="name-tel-6"><dt>特色服务</dt><dd>F 码通道</dd><dd>礼物码</dd><dd>防伪查询</dd></dl><div class="weixin"><span class="iconfont"></span><span class="iconfont"></span></div></div></footer><div class="ahbc"><ul class="ahbc-1"><li><span class="iconfont"></span><div class="caizhong"><img src="./download.png" alt="" width="100" height="100"><p>扫码领取百元新人礼包</p></div></li><li><span class="iconfont"></span></li><li><span class="iconfont"></span></li><li><span class="iconfont"></span></li><li><span class="iconfont"></span></li></ul></div>
</body></html>1.css
*{margin: 0;padding: 0;box-sizing: border-box;
}
@font-face {font-family: 'iconfont';src: url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.eot);src: url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.eot?#iefix) format('embedded-opentype'),url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.woff2) format('woff2'),url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.woff) format('woff'),url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.ttf) format('truetype'),url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.svg#iconfont) format('svg');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
header{position: relative;width: 100%;height: 40px;background: #333;
}
ul{list-style: none;
}
a{text-decoration: none;
}
i{font-style: normal;
}
.topbar{width: 1226px;height: 100%;margin: 0 auto;line-height: 40px;
}
.left-nav{float: left;
}
.left-nav >li{float: left;margin-right: 5px;
}
.left-nav >li > a{color: #b0b0b0;font-size: 12px;
}
.left-nav> i{float: left;color: #b0b0b0;margin-right: 5px;
}
.left-nav >li > a:hover{color: #fff;
}
.right-nav{float: right;
}
.right-nav > li,i {float: left;margin-right: 5px;margin-right: 5px;color: #b0b0b0;
}
.right-nav > li > a{color: #b0b0b0;font-size: 12px;
}
.right-nav > li > a:hover{color: #fff;
}
.shop-cart{background: #424242;line-height: 40px;height: 40px;width: 120px;text-align: center;
}
.right-nav > li:nth-of-type(4):hover{color: #ff6700;background-color: #fff;cursor: pointer;
}
.more{display: none;position: absolute;z-index: 6;top: 41px;left: 43%;height: 148px;width: 124px;box-shadow: 0 0 1px black inset;background: url(./download.png) no-repeat 14px 11px/cover;background-size: 80% 70%;background-color: #fff;
}
.more::before{content: "";position: absolute;top: -37px;left: 27%;width: 0;height: 0;border: 30px solid transparent;border-bottom: 17px solid #ffffff;}
.more::after{content: "小米商城APP";position: absolute;top: 110px;left: 13%;color: #000;
}
li.now:hover > .more{display: block;cursor: pointer;
}
.container{position: relative;width: 1226px;height: 100px;margin-left: auto;margin-right: auto;}
.container > .logo-box{position: absolute;top: 22px;left: 0;margin: auto;width: 55px;height: 55px;background: url(./小米官网实战/images/header/mi-logo.png) center;background-color: #ff6700;
}
.logo-box:hover{background: url(./小米官网实战/images/header/mi-home.png) center;background-color: #ff6700; cursor: pointer;
}
.container > a > .gif{position: absolute;top: 22px;left: 70px;
}
.sec-nav {position: relative;top: 22px;left: 250px;height: 55px;width: 650px;
}
.sec-nav > li{float: left;line-height: 55px;margin-right: 20px;}
.sec-nav > li >a{color: #000;font-size: 17px;
}
.sec-nav> li> a:hover{color: #ff6700;
}
form > input{float: left;height: 50px;
}
form > input[type="text"]{border: 1px solid #e0e0e0;padding: 10px;}
form > input[type="submit"]{border: 1px solid #e0e0e0;width: 52px;height: 50px;font-size: 28px;
}
form{position: relative;top: -31px;float: right;width: 296px;height: 55px;
}
form > input:focus{border:1px solid #ff6700;outline: none;
}
form > input[type="submit"]:hover{background-color: #ff6700;color: #fff;cursor: pointer;border: none;
}
.but-buy-now{display:none;position: absolute;z-index: 1;top: 59px;left: -250px;width:1226px;height:230px;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, .4);}
.but-buy-now > ul{display: flex;justify-content: space-around;width: 100%;height: 100%;
}
.but-buy-now > ul >li{padding: 20px;display: flex;flex-direction: column;align-items: center;width: 204px;height: 230px;cursor: pointer;
}
.but-buy-now > ul >li > img{transform: translateY(25px);border-right: 1px solid gray;
}
.but-buy-now > ul >li:nth-child(5) > img{border-right: none;
}
.but-buy-now > ul >li >div {transform: translateY(17px);font-size: 14px;color: #333;
}
.but-buy-now > ul >li > p {transform: translateY(-17px);font-size: 12px;color: #ff6700;
}
.sec-nav >li:nth-child(1):hover >.but-buy-now{display: block;
}
#wrap {position: relative;width: 1226px;height: 460px;/* background-color: pink; */margin: 10px auto 0;
}#wrap .banner-img img {opacity: 0;position: absolute;width: 1226px;height: 460px;transition: .6s;
}#wrap input:nth-child(1):checked~.banner-img img:nth-child(1) {opacity: 1;
}#wrap input:nth-child(2):checked~.banner-img img:nth-child(2) {opacity: 1;
}#wrap input:nth-child(3):checked~.banner-img img:nth-child(3) {opacity: 1;
}#wrap input:nth-child(4):checked~.banner-img img:nth-child(4) {opacity: 1;
}#wrap input:nth-child(5):checked~.banner-img img:nth-child(5) {opacity: 1;
}#wrap .labels {position: absolute;right: 20px;bottom: 10px;width: 120px;height: 20px;
}#wrap .labels label {float: left;/* display: block; */width: 8px;height: 8px;background-color: rgba(0, 0, 0, .4);border: 2px solid #bbb;border-radius: 50%;margin: 0 5px;cursor: pointer;
}#wrap input:nth-child(1):checked~.labels label:nth-child(1) {background-color: #fff;
}#wrap input:nth-child(2):checked~.labels label:nth-child(2) {background-color: #fff;
}#wrap input:nth-child(3):checked~.labels label:nth-child(3) {background-color: #fff;
}#wrap input:nth-child(4):checked~.labels label:nth-child(4) {background-color: #fff;
}#wrap input:nth-child(5):checked~.labels label:nth-child(5) {background-color: #fff;
}input[type="radio"]{display: none;
} #wrap .banner-menu{position: absolute;top: 0;left: 0;width: 234px;height: 460px;padding: 20px 0;background: rgba(105,101,101,.6);
}#wrap .banner-menu li{height: 42px;padding-left: 30px;padding-right: 20px;line-height: 42px;color: #fff;cursor: pointer;font-size: 14px;
}#wrap .banner-menu li > a{color: #fff;
}#wrap .banner-menu li > span{float: right;
}#wrap .banner-menu li:hover{background-color: #ff6700;
}#wrap .banner-menu .sub-menu{display: none;position: absolute;top: 0;left: 234px;height: 460px;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, .4);z-index: 2;
}#wrap .banner-menu .sub-menu .sub-menu-list a{display: block;width: 265px;height: 76px;padding: 18px 20px;font-size: 14px;color: #333;
}#wrap .banner-menu .sub-menu .sub-menu-list a img{width: 40px;height: 40px;vertical-align: middle;margin-right: 7px;
}#wrap .banner-menu .sub-menu .sub-menu-list a span{vertical-align: middle;
}#wrap .banner-menu .sub-menu .sub-menu-list{float: left;
}#wrap .banner-menu li:hover .sub-menu{display: block;
}#wrap .banner-menu .sub-menu-4{width: 1100px;
}#wrap .banner-menu .sub-menu-3{width: 800px;
}#wrap .banner-menu .sub-menu-2{width: 600px;
}
.wrap-left{position: relative;top: 187px;left: 234px;width: 45px;height: 55px;font-size: 40px;font-weight: 100;line-height: 55px;color: #fff;border-radius: 0 5px 5px 0;}
.wrap-left:hover{background-color: rgba(105,101,101,.6);cursor: pointer;
}.wrap-right{position: relative;top: 133px;left: 1181px;width: 45px;height: 55px;font-size: 40px;font-weight: 100;line-height: 55px;color: #fff;border-radius: 5px 0 0 5px;
}
.wrap-right:hover{background-color: rgba(105,101,101,.6);cursor: pointer;
}
div[class="home-sub-row"]{display: flex;justify-content: space-between;width: 1226px;height: 170px;/* background-color: aqua; */margin: 10px auto 0;}
div[class="home-sub1"]{display: flex;flex-wrap: wrap;width: 234px;height: 100%;background: #5f5750;
}
div[class="home-sub1"] > .home-sub1-1,
.home-sub1-2,
.home-sub1-3,
.home-sub1-4,
.home-sub1-5,
.home-sub1-6{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 76px;height: 85px;color: #e0e0e0;transition: .3s;
}div[class="home-sub1"] > .home-sub1-1:hover{color: #ff6700;cursor: pointer;
}
.home-sub1-2:hover{color: #ff6700;cursor: pointer;
}
.home-sub1-3:hover{color: #ff6700;cursor: pointer;
}
.home-sub1-4:hover{color: #ff6700;cursor: pointer;
}
.home-sub1-5:hover{color: #ff6700;cursor: pointer;
}
.home-sub1-6:hover{color: #ff6700;cursor: pointer;
}
div[class="home-sub-row"] > .home-sub2{width: 316px;height: 170px;background: url(./mi-1.jpg) no-repeat center/cover;transition: .3s;
}
div[class="home-sub-row"] > .home-sub3{width: 316px;height: 170px;background: url(./mi-2.jpg) no-repeat center/cover;transition: .3s;
}
div[class="home-sub-row"] > .home-sub4{width: 316px;height: 170px;background: url(./mi-3.jpg) no-repeat center/cover;transition: .3s;
}
.home-sub2:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);cursor: pointer;
}
.home-sub3:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);cursor: pointer;
}
.home-sub4:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);cursor: pointer;
}
div.buy{width: 1226px;height: 397px;margin: 30px auto;
}
div.buy > h2 {font-weight: lighter;height: 58px;line-height: 58px;
}
div.buy > h2 > span {float: right;margin-left: 10px;cursor: pointer;
}
div.buy > h2 > span:hover{color: #ff6700;
}.buy-sell{display: flex;justify-content: space-between;
}
.buy-sell > li {width: 234px;height: 339px;padding: 40px 10px;
}
.buy-sell > li:nth-child(1){text-align: center;border-top: 1px solid #f00;background-color: #f1eded;}
.buy-sell > li:nth-child(1) > h3{padding-top: 22px ;font-size: 16px;line-height: 16px;font-weight: 400;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(1) > p{font-size: 14px;line-height: 14px;padding-top: 10px;text-overflow: ellipsis;color: #b0b0b0;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(1) > span{color: #ff6700;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(1) > del{color: #b0b0b0;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(2){text-align: center;border-top: 1px solid #0f0;background-color: #f1eded;}
.buy-sell > li:nth-child(2) > h3{padding-top: 22px ;font-size: 16px;line-height: 16px;font-weight: 400;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(2) > p{font-size: 14px;line-height: 14px;padding-top: 10px;text-overflow: ellipsis;color: #b0b0b0;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(2) > span{color: #ff6700;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(2) > del{color: #b0b0b0;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(3){text-align: center;border-top: 1px solid #00f;background-color: #f1eded;}
.buy-sell > li:nth-child(3) > h3{padding-top: 22px ;font-size: 16px;line-height: 16px;font-weight: 400;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(3) > p{font-size: 14px;line-height: 14px;padding-top: 10px;text-overflow: ellipsis;color: #b0b0b0;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(3) > span{color: #ff6700;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(3) > del{color: #b0b0b0;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(4){text-align: center;border-top: 1px solid #f00;background-color: #f1eded;}
.buy-sell > li:nth-child(4) > h3{padding-top: 22px ;font-size: 16px;line-height: 16px;font-weight: 400;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(4) > p{font-size: 14px;line-height: 14px;padding-top: 10px;text-overflow: ellipsis;color: #b0b0b0;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(4) > span{color: #ff6700;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(4) > del{color: #b0b0b0;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(5){text-align: center;border-top: 1px solid #0f0;background-color: #f1eded;}
.buy-sell > li:nth-child(5) > h3{padding-top: 22px ;font-size: 16px;line-height: 16px;font-weight: 400;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(5) > p{font-size: 14px;line-height: 14px;padding-top: 10px;text-overflow: ellipsis;color: #b0b0b0;overflow: hidden;white-space: nowrap;
}
.buy-sell > li:nth-child(5) > span{color: #ff6700;font-size: 12px;line-height: 12px;
}
.buy-sell > li:nth-child(5) > del{color: #b0b0b0;font-size: 12px;line-height: 12px;
}
.buy-sell > li:hover{cursor: pointer;box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.model-buy{width: 1226px;height: 120px;cursor: pointer;margin: 0 auto 20px;box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
div.buy-mi{width: 1226px;margin: 0px auto;
}
div.buy-mi > h2{font-weight: lighter;height: 58px;line-height: 58px;
}
div.buy-mi > h2 > span {float: right;margin-left: 10px;cursor: pointer;
}
div.buy-mi > h2 > span:hover{color: #ff6700;
}
.big-img{float: left;width: 234px;height: 614px;background:url(./2.webp) no-repeat center/cover;cursor: pointer;transition: .3s;
}
.img-buy{display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: space-between;width: 992px;height: 614px;
}
.img-buy > li {width: 234px;height: 300px;background-color: #f5f5f5;margin-left: 14px;text-align: center;cursor: pointer;transition: .3s;
}
.img-buy > li > img{margin-top: 30px;width: 160px;height: 160px;
}.img-buy > li > h3{font-size: 14px;font-weight: 400;color: #333;
}.img-buy > li > .desc{margin: 0 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;
}.img-buy > li > .price{color: #ff6700;
}.img-buy > li > .price > del{margin-left: 8px;color: #b0b0b0;
}.img-buy > li.top{margin-bottom: 14px;
}.img-buy > li:hover{transform: translateY(-3px);box-shadow: 0 0 10px #ccc;
}
.big-img:hover{transform: translateY(-3px);box-shadow: 0 0 10px #ccc;
}
.model-pen{width: 1226px;height: 120px;cursor: pointer;margin: 20px auto 20px;box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
div.video-mi{width: 1226px;margin: 0px auto;
}
div.video-mi > h2{font-weight: lighter;height: 58px;line-height: 58px;
}
div.video-mi > h2 > span {float: right;margin-left: 10px;cursor: pointer;
}
div.video-mi > h2 > span:hover{color: #ff6700;
}
.video-play{display: flex;position: relative;justify-content: space-between;width: 1226px;height: 285px;
}
.video-play > li{width: 296px;height: 285px;background-color: #f5f5f5;text-align: center;cursor: pointer;
}
.video-play > li > .iconfont{position: absolute;top: 140px;left: 20px;color: #fff;font-weight: bolder;font-size: 30px;
}
.video-play > li:hover > .iconfont{color: #ff6700;
}
.video-play > li:hover{box-shadow: 0 0 10px #ccc;
}
.video-play > li > h3{margin: 20px 14px 6px;font-size: 14px;font-weight: 400;text-align: center;color: #333;
}
.video-play > li > p{height: 18px;margin: 0 14px;font-size: 12px;color: #b0b0b0;
}
.video-play > li:nth-child(2) > .iconfont{position: absolute;top: 140px;left: 329px;
}
.video-play > li:nth-child(3) > .iconfont{position: absolute;top: 140px;left: 636px;
}
.video-play > li:nth-child(4) > .iconfont{position: absolute;top: 140px;left: 950px;
}
footer{margin: 30px auto 0;width: 1226px;/* height: 80px; */
}
.bottom{display: flex;width: 1226px;height: 80px;background-color: #f1eded;border-bottom: 1px solid gray;}
.bottom > li{margin: auto;padding-right:50px ;border-right: 1px solid gray;cursor: pointer;
}
.bottom > li:nth-child(5){border-right: none;
}
.bottom > li >span.iconfont{font-size: 20px;
}
.bottom > li:hover{color: #ff6700;
}
.name-tel{display: flex;padding-top: 40px;
}
.name-tel-1 {width: 160px;
}
.name-tel-1 > dt{margin: 0 0 26px;font-size: 14px;line-height: 1.25;color: #424242;
}
.name-tel-1 > dd{margin-bottom: 20px;font-size: 12px;line-height: 1.25;color: #424242;cursor: pointer;
}
.name-tel-1 > dd:hover{color: #ff6700;
}
.name-tel-2 {width: 160px;
}
.name-tel-2 > dt{margin: 0 0 26px;font-size: 14px;line-height: 1.25;color: #424242;
}
.name-tel-2 > dd{margin-bottom: 20px;font-size: 12px;line-height: 1.25;color: #424242;cursor: pointer;
}
.name-tel-2 > dd:hover{color: #ff6700;
}
.name-tel-3 {width: 160px;
}
.name-tel-3 > dt{margin: 0 0 26px;font-size: 14px;line-height: 1.25;color: #424242;
}
.name-tel-3 > dd{margin-bottom: 20px;font-size: 12px;line-height: 1.25;color: #424242;cursor: pointer;
}
.name-tel-3 > dd:hover{color: #ff6700;
}
.name-tel-4 {width: 160px;
}
.name-tel-4 > dt{margin: 0 0 26px;font-size: 14px;line-height: 1.25;color: #424242;
}
.name-tel-4 > dd{margin-bottom: 20px;font-size: 12px;line-height: 1.25;color: #424242;cursor: pointer;
}
.name-tel-4 > dd:hover{color: #ff6700;
}
.name-tel-5 {width: 160px;
}
.name-tel-5 > dt{margin: 0 0 26px;font-size: 14px;line-height: 1.25;color: #424242;
}
.name-tel-5 > dd{margin-bottom: 20px;font-size: 12px;line-height: 1.25;color: #424242;cursor: pointer;
}
.name-tel-5 > dd:hover{color: #ff6700;
}
.name-tel-6 {width: 160px;height: 112px;border-right: 1px solid #424242;
}
.name-tel-6 > dt{margin: 0 0 26px;font-size: 14px;line-height: 1.25;color: #424242;
}
.name-tel-6 > dd{margin-bottom: 20px;font-size: 12px;line-height: 1.25;color: #424242;cursor: pointer;
}
.name-tel-6 > dd:hover{color: #ff6700;
}
.name-tel> .weixin{display: flex;}
.name-tel> .weixin > span{font-size: 3em;color: #ff6700;margin-top: 31px;margin-left: 57px;cursor: pointer;
}
.ahbc{position: fixed;width: 84px;height: 561px;/* background-color: pink; */right: 0;bottom: 20px;box-shadow: 0 0 1px black;
}
.ahbc-1{display: flex;width: 100%;height: 100%;flex-direction: column;align-items: flex-start;background-color: #fff;
}
.ahbc-1 > li{display: flex;width: 100%;height: 92px;flex: 1;cursor: pointer;
}
.ahbc-1 > li > span {margin: auto;font-size: 2em;}
.ahbc-1 > li > span.iconfont:hover{color: #ff6700;
}
@media all and (max-width: 1400px){.ahbc{width: 27px;height: 210px;}.ahbc-1 > li > span {margin: auto;font-size: 20px;}
}
.ahbc-1 > li:nth-child(1) > .caizhong{display: none;position: absolute;left: -140px;width: 130px;height: 192px;padding: 14px;background-color: #f1eded;box-shadow: 0 0 1px black;
}
.ahbc-1 > li:nth-child(1) > .caizhong::after{content: "";position: absolute;left: 125px;top: 10px;border: 15px solid transparent;border-left-color: #f1eded;
}
.ahbc-1 > li:nth-child(1) > .caizhong >p{color: #757575;font-size: 1.15em;margin-top: 10px;}
.ahbc-1 > li:nth-child(1):hover > .caizhong{display: block;
}
body{cursor:url("./1.png"),pointer;
}
这是我刚学习前端做的一个小米网页,看似有点相似,但是里面的元素还是有很多不同的地方.
祝愿学弟学妹早日实现自己的梦想。
