小米商城
目錄
文章目錄
? ? ? ? ? ? 靜態網頁代碼
建立一個文件夾,在文件夾里,見一個新建文本.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; }?
這是我剛學習前端做的一個小米網頁,看似有點相似,但是里面的元素還是有很多不同的地方.
祝愿學弟學妹早日實現自己的夢想。
? ? ? ? ? ? ? ?
?
總結
- 上一篇： ECNUOJ 2615 会议安排
- 下一篇： URLConnection