学习web前端历程（十七）
生活随笔
收集整理的這篇文章主要介紹了
学习web前端历程（十七）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
小米商城(未完)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小米商城</title><link rel="stylesheet" href="CSS/xiaomiStyle.css"/><link rel="stylesheet" href="CSS/reset.css"/><link rel="stylesheet" href="CSS/iconfont.css"/> </head> <body> <!--黑條導航欄開始--> <div class="box"> <div class="nav"><div class="nav_left"><ul><li><a href="#">小米商城</a></li><li><a href="#">MIMU</a></li><li><a href="#">IoT</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="#">下載app</a></li><li><a href="#">Select Region</a></li></ul></div><div class="nav_right"><ul><li><a href="#">登錄</a></li><li><a href="#">注冊</a></li><li><a href="#">消息通知</a></li><li><a href="#"><i class="iconfont">󰅹</i>購物車（0）</a><div class="buy_hidden"><p>購物車中還沒有物品哦</p></div></li></ul></div> </div> </div> <!--黑條導航欄結束--> <!--小米白色導航條開始--> <div class="white_nav"><div class="wrap"><img src="images/logo-footer.png" class="logo"/><ul class="center"><li><a href="#">小米手機</a><div class="white_nav_hidden"><div class="photo1"><div><img src="images/6AAAA.png"><p class="title">小米CC9</p><p class="price">1799元起</p></div><div><img src="images/6pro140-140.png"></div><div><img src="images/666666.png"></div><div><img src="images/80808080808080.jpg"></div><div><img src="images/m8-80.png"></div><div><img src="images/m8se-80.png"></div></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><li class="search"><input type="text" list="photo"/><datalist id="photo"><option>小米9</option><option>小米電視</option><option>筆記本pro</option></datalist><button class="iconfont"></button></li></ul></div> </div> <!--小米白色導航條結束--> <!--輪播圖和滑動門開始--> <div class="lunbotu"> <div class="hdm"><ul><li><a href="#">手機 電話卡</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">電視 盒子</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">筆記本 平板</a><i class="iconfont"></i></li><li><a href="#">家電 插板板</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">出行 穿戴</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">智能 路由器</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">電源 配件</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">健康 兒童</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">耳機 音響</a><i class="iconfont"></i><div class="hdm_hidden"></div></li><li><a href="#">生活 箱包</a><i class="iconfont"></i></li></ul> </div><div class="up"></div><div class="down"></div> </div> <!--輪播圖和滑動門結束--> <!--小米廣告位開始--> <div class="wrap ad"><ul><li class="before"><i class="iconfont">󰅹</i><br/>小米秒殺</li><li class="before"><i class="iconfont">󰅹</i><br/>企業團購</li><li class="before"><i class="iconfont">󰅹</i><br/>F碼通道</li><li class="four"><i class="iconfont">󰅹</i><br/>米粉卡</li><li class="five"><i class="iconfont">󰅹</i><br/>以舊換新</li><li class="six"><i class="iconfont">󰅹</i><br/>話費充值</li></ul><img src="images/xmad_15500580021576_iymFx.jpg"><img src="images/xmad_15410029988871_TdzPQ.jpg"><img src="images/xmad_1550022313197_PMtDb.jpg"> </div> <!--小米廣告位結束--> <!--小米閃購開始--> <div class="wrap sg"><div class="sg_top"><h2>小米閃購</h2><div><span><</span><span>></span></div></div> </div> <!--小米閃購結束--></body> </html>xiaomiStyle.css /*黑條導航欄開始*/ .box{width: 100%;height: 40px;background: #333; } .nav{width:1249px;height: 40px;margin: 0 auto; } .nav_left li a{font-size: 12px;color: #b0b0b0;float: left;line-height: 40px;margin-left: 10px; } .nav_right{float: right; position: relative;transition: all 2s ease-in 1s; } .nav_right li{font-size: 12px;color: #b0b0b0;line-height: 40px;float: left;margin-right: 10px; } .nav_right li a{font-size: 12px;color: #b0b0b0; } .nav li a:hover{color: white; }.buy_hidden{ /*隱形的圖出來*/width: 320px;height: 78px;box-shadow: 0 15px 10px rgba(0,0,0,.3);border: 1px solid rgba(0,0,0,.3);background-color: #ffffff;position: absolute;right: 0;top: 40px;display: none;transition: all .5s;z-index: 88; } .nav .nav_right:hover .buy_hidden{display: block;transition: all 2s ease-in 1s; } /*黑條導航欄結束*/ /*白色導航條開始*/ .white_nav{width: 100%;height: 100px;clear: both;position: relative; } .wrap{width:1249px;height: 100px;margin: 0 auto; } .logo{float: left;margin-top: 21.5px; } .center li a{color: black;font-size: 16px;font-weight: bold; } .center li a:hover{color:red; }.center{margin-left: 200px;margin-right: 70px; } .center li{float: left;line-height: 100px;margin-right: 20px; } .search>input{width: 250px;height: 50px;float: left;border-right: none; } .search>button{width: 52px;height:58px;float: left;font-size: 20px;font-weight: bold;background-color: #ffffff;} .search{float: right;margin-top: 25px;margin-right: 50px; } .search>button:focus,.search>input:focus{border-color: #ff6700; } .search>button:hover{background-color: #ff6700;border-color: #ff6700; } .white_nav_hidden{position: absolute;width: 100%;height: 230px;left: 0;top: 100px;display: none;transition: all 1s; } .white_nav li:hover .white_nav_hidden{position: absolute; display: block; } /*隱藏欄手機*/ .photo1{width:1249px;height: 230px;margin: 0 auto; } .photo1 div{width: 204px;height: 201px;background-color: white;float: left;margin-right: 4px; } .photo1 img{width: 160px;height: 110px; } .title{margin: 0;line-height: 20px;color: #333; } .price{margin: 0;line-height: 20px;color: #ff6700; } /*白色導航條結束*/ /*輪播圖和滑動門開始*/.lunbotu{width:1249px;height: 460px;margin: 0 auto;background-image:url("../images/xmad_15486597522208_HOEjJ.jpg");background-size: cover;-webkit-animation: picture 10s infinite forwards ;position: relative; }@-webkit-keyframes picture{0%{background-image: url("../images/xmad_15486597522208_HOEjJ.jpg");}25%{background-image: url("../images/xmad_15488151829917_hENZU.jpg");}50%{background-image: url("../images/xmad_15489036241498_XVwut.jpg");}75%{background-image: url("../images/xmad_15500560064953_Bgumq.jpg");}100%{background-image: url("../images/xmad_15410029988871_TdzPQ.jpg");} } .lunbotu:hover{animation: picture 10s ease-in 10s; } .hdm{position: relative;width: 234px;height: 460px;background-color: rgba(0,0,0,.5);padding-top: 20px;box-sizing: border-box; } .hdm li{height: 42px;line-height: 42px;text-align: left;padding-left: 30px; } .hdm li a{color: #fff;font-size: 14px; } .hdm li:hover{background-color: #ff6700; }.hdm i{float: right;margin-right: 30px;color: rgba(255,255,255,.5);font-size: 20px;font-weight: bold;} /*隱藏列表框*/ .hdm_hidden{position: absolute;width: 992px;height: 460px;background-color: white;left: 234px;top: 0;box-shadow: 0 15px 30px rgba(0,0,0,.3);display: none; } .hdm li:hover .hdm_hidden{display: block;transition: all 1s; }.up,.down{width: 41px;height: 69px;background-image: url("../images/icon-slides.png");position: absolute;top: 50%;margin-top:-34.5px;cursor: pointer; } .up{left: 234px;background-position: -83px 0; } .down{right: 0;background-position: -124px 0; } .up:hover{background-position: 0 0; } .down:hover{background-position: -42px 0; } /*輪播圖和和滑動門結束*/ /*小米廣告位開始*/ .ad>ul,.ad>img{float: left; } .ad{margin-top: 15px;margin-bottom: 15px; } .ad>ul{width: 234px;height: 170px;background: #5f5750; } .ad ul li{float: left;width: 70px;padding: 19px 0;font-size: 12px;border-right: 3px solid #665E57; } .ad img{width: 316px;height: 170px;margin-left:22px; } .ad ul li:nth-child(3),.ad ul li:nth-child(6) {border-right: 0; } .ad .before{border-bottom: 3px solid #665E57; } /*小米廣告位結束*/ /*小米閃購開始*/ .sg{margin-top: 100px;margin-bottom: 20px;width:1240px;height:340px;background-color: #ff6700; } .sg>h2{float: left;}/*小米閃購結束*/部分頁面：
導航欄頁面
總結
以上是生活随笔為你收集整理的学习web前端历程（十七）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# ASP.NET MVC 图片上传的
- 下一篇： HTML网页设计：四、超链接