【web前端HTML5+CSS3】10小米项目练习_西西歪歪西歪

大大的周 02-07 1258

小米项目

1.项目搭建

? 在index中引入一下样式表?

2.导航条结构的搭建

3.导航条基本样式

4.二维码下拉

5.添加过渡效果

6.头部logo

7.头部导航条

8.头部导航条下拉层

9.右侧搜索框

10.左侧导航条

11.完成banner

12.右侧工具条

13.中间广告栏

14.项目补充

整体项目完成：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>  <link rel="stylesheet" href="./css/reset.css">  <link rel="stylesheet" href="./css/base.css">  <link rel="stylesheet" href="./fa/css/all.css">  <link rel="stylesheet" href="./css/index.css">  <link rel="icon" href="./favicon.ico"> </head> <body>   <div class="topbar-wrapper">  <div class="topbar w clearfix">  <ul class="service"> <li><a href="javascript:;">小米商城</a></li> <li class="line">|</li> <li><a href="javascript:;">MIUI</a></li> <li class="line">|</li> <li><a href="javascript:;">loT</a></li> <li class="line">|</li> <li><a href="javascript:;">云服务</a></li> <li class="line">|</li> <li><a href="javascript:;">金融</a></li> <li class="line">|</li> <li><a href="javascript:;">有品</a></li> <li class="line">|</li> <li><a href="javascript:;">小爱开放平台</a></li> <li class="line">|</li> <li><a href="javascript:;">企业团购</a></li> <li class="line">|</li> <li><a href="javascript:;">资质证照</a></li> <li class="line">|</li> <li><a href="javascript:;">协议规则</a></li> <li class="line">|</li> <li class="app-wrapper"> <a class="app" href="javascript:;"> 下载app  <div class="qrcode"> <img src="./img/download.png"> <span>小米商城app</span> </div> </a> </li> <li class="line">|</li> <li><a href="javascript:;">Select Location</a></li> </ul>  <ul class="shop-cart"> <li><a href="javascript:;"> <i class="fas fa-shopping-cart"></i> 购物车（0） </a></li> </ul>  <ul class="user-info"> <li><a href="javascript:;">登录</a></li> <li class="line">|</li> <li><a href="javascript:;">注册</a></li> <li class="line">|</li> <li><a href="javascript:;">消息通知</a></li> </ul> </div> </div>  <div class="header-wrapper"> <div class="header w clearfix">  <h1 class="logo" title="小米"> 小米官网 <a class="home" href="/"></a> <a class="mi" href="/"></a> </h1>  <div class="nav-wrapper">  <ul class="nav clearfix"> <li class="all-goods-wrapper"> <a class="all-goods" href="#">全部商品分类</a>  <ul class="left-menu"> <li> <a href="#"> 手机电话卡 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 电视盒子 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 笔记本平板 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 家电插线板 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 出行穿戴 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 智能路由器 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 电源配件 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 健康儿童 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 耳机音箱 <i class="fas fa-angle-right"></i> </a> </li> <li> <a href="#"> 生活箱包 <i class="fas fa-angle-right"></i> </a> </li> </ul> </li> <li class="show-goods"><a href="#">小米手机</a></li> <li class="show-goods"><a href="#">Redmi 红米</a></li> <li class="show-goods"><a href="#">电视</a></li> <li class="show-goods"><a href="#">笔记本</a></li> <li class="show-goods"><a href="#">家电</a></li> <li class="show-goods"><a href="#">路由器</a></li> <li class="show-goods"><a href="#">智能硬件</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li>  <div class="goods-info"> </div> </ul> </div>  <div class="search-wrapper"> <form class="search" action="#"> <input class="search-inp" type="text"> <button class="search-btn"> <i class="fas fa-search"></i> </button> </form> </div> </div> </div>  <div class="banner-wrapper"> <div class="banner w"> <ul class="img-list"> <li> <a href="#"> <img src="./img/banner1.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="./img/banner2.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="./img/banner3.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="./img/banner4.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="./img/banner5.jpg" alt=""> </a> </li> </ul> <div class="pointer"> <a class="active" href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> <div class="prev-next"> <a class="prev" href="javascript:;"></a> <a class="next" href="javascript:;"></a> </div> </div> </div>  <div class="back-top"></div>  <div class="ad w"> <ul class="shortcut"> <li> <a href="#"> <i class="fas fa-clock"></i> 小米秒杀 </a> </li> <li> <a href="#"> <i class="fas fa-building"></i> 企业团购 </a> </li> <li> <a href="#"> <i class="fas fa-frog"></i> F码通道 </a> </li> <li> <a href="#"> <i class="fas fa-robot"></i> 米粉卡 </a> </li> <li> <a href="#"> <i class="fas fa-keyboard"></i> 以旧换新 </a> </li> <li> <a href="#"> <i class="fas fa-sim-card"></i> 话费充值 </a> </li> </ul> <ul class="imgs"> <li> <a href="#"><img src="./img/1.jpg" alt=""></a> </li> <li> <a href="#"><img src="./img/2.jpg" alt=""></a> </li> <li> <a href="#"><img src="./img/3.jpg" alt=""></a> </li> </ul> </div> </body> </html>

/* 主页index.html的样式表 */ /* 顶部导航条的容器 */ .topbar-wrapper{ /* 设置宽度全屏 */ width: 100%; /* 设置高度和行高 */ height: 40px; line-height: 40px; /* 设置背景颜色 */ background-color: #333; } /* 设置超链接的颜色 */ .topbar a{ font-size: 12px; color: #b0b0b0; display: block; } /* 设置超链接移入的效果 */ .topbar a:hover{ color: #fff; } /* 设置中间分割线 */ .topbar .line{ font-size: 12px; color: #424242; margin: 0 8px; } /* 设置左侧导航栏 */ .service, .topbar li{ float: left; } .app{ position: relative; } /* 设置app下的小三角 */ /* .app-wrapper:hover > .app::after{ */ .app::after{ content: ''; display: none; /* 设置绝对定位 */ position: absolute; width: 0; height: 0; /* 设置四个方向的边框 */ border: 8px solid transparent; /* 去除上边框 */ border-top: none; /* 单独设置下边框的颜色 */ border-bottom-color: #fff; bottom: 0; left: 0; right: 0; margin:auto; } .app:hover .qrcode, .app:hover::after{ display: block; height: 148px; } /* .app-wrapper:hover>.app .qrcode{ display: block; } */ /* 设置下载app的下拉 */ .app .qrcode{ /* display: none; */ position: absolute; left: -40px; width: 124px; /* height: 148px; */ height: 0; overflow: hidden; /* margin-left: -62px; */ line-height: 1; text-align: center; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); /* transition: 用于为样式设置过渡效果 */ transition: height 0.3s; z-index: 9999; } /* 设置二维码图片 */ .app .qrcode img{ width: 90px; margin: 17px; margin-bottom: 10px; } /* 设置二维码中的文字 */ .app .qrcode span{ font-size: 14px; color: #000; } /* 设置右侧导航栏 */ .shop-cart, .user-info{ float: right; } .shop-cart{ margin-left: 26px; } /* 设置购物车的样式 */ .shop-cart a{ width: 120px; background-color: #424242; text-align: center; } .shop-cart:hover a{ background-color: #fff; color: #FF6700; } .shop-cart i{ margin-right: 2px; } .header-wrapper{ /* background-color: red; */ position: relative; } /* 设置中间的header */ .header{ height: 100px; /* background-color: #ff0; */ } /* 设置logo的h1 */ .header .logo{ float: left; margin-top: 22px; width: 55px; height: 55px; position: relative; overflow: hidden; /* 隐藏logo中的文字 */ text-indent: -9999px } /* 统一设置logo的超链接 */ .header .logo a{ position: absolute; width: 55px; height: 55px; left: 0; background-color: #FF6700; background-image: url(../img/mi-logo.png); background-position: center; transition: left 0.3s; } /* 设置home图片 */ .header .logo .home{ background-image: url(../img/mi-home.png); left: -55px; } /* 设置鼠标移入以后两个图标的位置 */ .header .logo:hover .mi{ left: 55px; } .header .logo:hover .home{ left: 0; } /* 设置中间的导航条 */ .header .nav-wrapper{ float: left; margin-left: 7px; } /* 设置导航条 */ .header .nav{ /* width: 792px; */ height: 100px; line-height: 100px; padding-left: 58px; } /* 设置导航条中的li */ .nav > li{ float: left; } .all-goods-wrapper{ position: relative; } /* 设置左侧导航条的样式 */ .left-menu{ width: 234px; height: 420px; padding: 20px 0; background-color: rgba(0, 0, 0, .6); position: absolute; z-index: 999; left: -120px; line-height: 1; } ul.left-menu li a{ display: block; height: 42px; line-height: 42px; color: white; margin-right: 0; padding: 0 30px; font-size: 14px; } ul.left-menu li a:hover{ color: white; background-color: #FF6700; } .left-menu a i{ float: right; line-height: 42px; } .nav-wrapper li a{ display: block; font-size: 16px; margin-right: 20px; } .nav-wrapper li a:hover{ color: #FF6700; } /* 隐藏全部商品 */ .all-goods{ visibility: hidden; } .nav .goods-info{ /* height: 228px; */ height: 0; overflow: hidden; width: 100%; background-color: #fff; position: absolute; top: 100px; left: 0; transition: height 0.3s; z-index: 9999; } /* .nav li:not(:first-of-type):not(:nth-child(10)):not(:nth-child(9)):hover ~ .goods-info, */ .nav .show-goods:hover ~ .goods-info, .goods-info:hover { height: 228px; border-top: 1px solid rgb(224, 224, 224); box-shadow: 0 5px 3px rgba(0, 0, 0, .2); } /* 设置搜索框的容器 */ .search-wrapper{ width: 296px; height: 50px; float: right; margin-top: 25px; } .search-wrapper .search-inp{ box-sizing: border-box; width: 244px; border: none; float: left; padding: 0 10px; height: 50px; font-size: 16px; border: 1px solid rgb(224, 224, 224); outline: none; } /* 设置input获取焦点后的样式 */ .search-wrapper .search-inp:focus, .search-wrapper .search-inp:focus + button{ border-color: #FF6700; } .search-wrapper .search-btn{ float: left; height: 50px; width: 52px; padding: 0; border: none; background-color: #fff; color: #616161; font-size: 16px; border: 1px solid rgb(224, 224, 224); border-left: none; } .search-wrapper .search-btn:hover{ background-color: #FF6700; color: white; border: none; } /* 设置banner */ .banner{ position: relative; height: 460px; } .banner .img-list li{ position: absolute; } .banner img{ width: 100%; vertical-align: top; } /* 设置5个导航点 */ .pointer{ position: absolute; bottom: 22px; right: 35px; } .pointer a{ float: left; width: 6px; height: 6px; border: 2px rgba(255, 255, 255, .4) solid; border-radius: 50%; background-color: rgba(0, 0, 0, .4); margin-left: 6px; } .pointer a:hover, .pointer a.active{ border-color: rgba(0, 0, 0, .4); background-color:rgba(255, 255, 255, .4); } /* 设置两个箭头 */ .prev-next a{ width: 41px; height: 69px; background-image: url(../img/icon-slides.png); position: absolute; top: 0; bottom: 0; margin: auto 0; } .prev-next .prev{ left: 234px; background-position: -84px 0; } .prev-next .prev:hover{ background-position: 0 0; } .prev-next .next{ right: 0; background-position: -125px 0; } .prev-next .next:hover{ background-position: -42px 0; } /* 设置回到顶部的元素 */ .back-top{ width: 26px; height: 206px; background-color: orange; /* 开启固定定位 */ position: fixed; bottom: 60px; right: 50%; /*将right值设置为视口宽度的50%*/ margin-right: -639px; /* 布局的等式 left + margin-left + width + margin-right + right = 视口的宽度 auto + 0 + 26 + 0 + 60 = 视口宽度 auto + 0 + 26 + -639px + 50% = 视口宽度 */ } /* 设置下部的广告区域 */ .ad{ height: 170px; margin-top: 14px; } .ad .shortcut, .ad .imgs, .ad li{ float: left; } /* 设置左侧快捷方式 */ .ad .shortcut{ width: 228px; height: 168px; background-color: #5f5750; margin-right: 14px; padding-top: 2px; padding-left: 6px; } .ad .shortcut li{ position: relative; } /* 设置上边框 */ .ad .shortcut li::before{ content: ''; position: absolute; width: 64px; height: 1px; background-color: #665e57; left: 0; right: 0; top: 0; margin: 0 auto } /* 设置左边框 */ .ad .shortcut li::after{ content: ''; position: absolute; height: 70px; width: 1px; background-color: #665e57; top: 0; bottom: 0; margin: auto 0; left: 0; } /* 设置快捷方式中的超链接 */ .ad .shortcut a{ display: block; color: #cfccca; height: 84px; width: 76px; text-align: center; font-size: 12px; overflow: hidden; } .ad .shortcut a:hover{ color: #fff; } /* 设置图标字体 */ .ad .shortcut i{ display: block; margin-top: 20px; margin-bottom: 6px; font-size: 20px; } /* 设置左侧的图片 */ .ad .imgs li{ width: 316px; margin-right:15px; } .ad .imgs li:last-child{ margin: 0; } .ad .imgs img{ width: 100%; vertical-align: top; }

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签： #小米项目1项目搭建