html+css 简单的静态网页小米官网

tech2026-02-17 2

html+css简单静态小米官网

把之前做的改进了一下，其他的都是一样的布局

效果图：

新增了一些字体文件不多说上代码 HTML代码：

```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi 10X、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持." />  <meta name="Keywords" content="小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title> 小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha，小米电视官方网站 </title> </title>  <link rel="shortcut icon" href="mi_favicon.ico" /> <link rel="stylesheet" href="css/style.css">  <link rel="stylesheet" href="css/base.css">  <link rel="stylesheet" href="css/common.css">  <link rel="stylesheet" href="css/style.css">  <link rel="stylesheet" href="css/index.css">  <link rel="stylesheet" href="css/footer.css"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> </head> <body>  <div class="topBar"> <div class="w"> <div class="topBar-left"> <a href="">小米商城</a> <span class="sep">|</span> <a href="">MIUI</a> <span class="sep">|</span> <a href="">loT</a> <span class="sep">|</span> <a href="">云服务</a> <span class="sep">|</span> <a href="">金融</a> <span class="sep">|</span> <a href="">有品</a> <span class="sep">|</span> <a href="">小爱开放平台</a> <span class="sep">|</span> <a href="">政企服务</a> <span class="sep">|</span> <a href="">下载app</a> <span class="sep">|</span> <a href="">select Region</a> </div> <div class="topBar-right"> <ul> <li> <a href="">登陆</a></li> <li> <span class="sep">|</span></li> <li> <a href="">注册</a></li> <li> <span class="sep">|</span></li> <li><a href="">消息通知</a></li> <li> <a href="#" class="sp-cart"> 购物车(0) </a> <div class="topbar-cart-menu"> <div class="topbar-cart-txt"> <span>购物车中还没有商品，赶紧选购吧！</span> </div> </div> </li> </ul> </div> </div> </div>   <div class="header"> <div class="container2 w"> <div class="logo"> <h1> <a href="index.html" title="小米">小米</a> </h1> </div>  <div class="nav"> <ul> <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="#">智能硬件</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> </ul> </div>  <div class="search"> <input type="search" name="goods" placeholder="请输入商品" id="s1"> <button type="submit" id="s2"></button> </div> </div> </div>  <div id="big_banner_wrap"> <div class="w"> <ul id="banner_menu_wrap"> <li class="active" img> <a>手机 平板</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 600px; top: -20px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/minote.jpg"></a><a>手机</a><span>选购</span></li> <li> <a><img src="img/mi4.jpg"></a><a>手机</a><span>选购</span></li> <li> <a><img src="img/hongmi2.jpg"></a><a>手机</a><span>选购</span></li> <li> <a><img src="img/hongmi2a.jpg"></a><a>手机</a><span>选购</span></li> <li> <a><img src="img/note2.jpg"></a><a>手机</a><span>选购</span></li> <li> <a><img src="img/note2.jpg"></a><a>手机<a></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/mipad.jpg"></a><a>手机</a></li> <li> <a><img src="img/telcom.jpg"></a><a>手机</a></li> <li> <a><img src="img/heyue.jpg"></a><a>手机</a></li> <li> <a><img src="img/zhongxin.jpg"></a><a>手机</a></li> <li> <a><img src="img/compare.jpg"></a><a>手机</a></li> </ul> </div> </li> <li> <a>电视 盒子</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 600px; top: -62px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/tv40.jpg"></a><a>大米电视40英寸</a></li> <li> <a><img src="img/tv48.jpg"></a><a>大米电视48英寸</a></li> <li> <a><img src="img/tv49.jpg"></a><a>大米电视49英寸</a></li> <li> <a><img src="img/hezis.jpg"></a><a>大米电视55英寸</a></li> <li> <a><img src="img/hezis.jpg"></a><a>大米盒子</a></li> <li> <a><img src="img/hezis.jpg"></a><a>大米盒子MINI</a></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/dianshipeijian.jpg"></a><a>大米电视配件</a><span>选购</span></li> </ul> </div> </li> <li> <a>路由器 智能配件</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 900px; top: -104px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/miwifi.jpg"></a><a>大米路由器</a></li> <li> <a><img src="img/miwifilite.jpg"></a><a>大米路由器 青春版</a></li> <li> <a><img src="img/air.jpg"></a><a>净化器</a></li> <li> <a><img src="img/xiaoyi.jpg"></a><a>摄像机</a></li> <li> <a><img src="img/scale.jpg"></a><a>体重称</a></li> <li> <a><img src="img/scale.jpg"></a><a>智能插头</a></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/miwifimini.jpg"></a><a>大米路由器MINI</a></li> <li> <a><img src="img/wifiExtension.jpg"></a><a>大米WIFI放大器</a></li> <li> <a><img src="img/yicamera.jpg"></a><a>运动相机</a></li> <li> <a><img src="img/water.jpg"></a><a>净水器</a></li> <li> <a><img src="img/ihealth.jpg"></a><a>血压计</a></li> <li> <a><img src="img/ihealth.jpg"></a><a>床头灯</a></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/zhinengtaozhuang.jpg"></a><a>智能家庭套装</a></li> <li> <a><img src="img/shouhuan.jpg"></a><a>大米手环</a></li> <li> <a><img src="img/smart.jpg"></a><a>全部智能硬件</a></li> </ul> </div> </li> <li> <a>移动电源 插线板</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 300px; top: -146px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/dianyuan.jpg "></a><a>大米移动电源</a></li> <li> <a><img src="img/powerscript.jpg"></a><a>大米插线板</a></li> <li> <a><img src="img/yidongdianyuan.jpg"></a><a>品牌移动电源</a></li> <li> <a><img src="img/dianyuanfujian.jpg"></a><a>移动电源附件</a></li> </ul> </div> </li> <li> <a>耳机 音箱</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 300px; top: -188px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/headphone.jpg"></a><a>大米头戴式耳机</a></li> <li> <a><img src="img/huosai.jpg"></a><a>大米活塞耳机</a></li> <li> <a><img src="img/bluetoothheadset.jpg"></a><a>大米蓝牙耳机</a></li> <li> <a><img src="img/erji.jpg"></a><a>品牌耳机</a></li> <li> <a><img src="img/yinxiang.jpg"></a><a>音箱</a></li> </ul> </div> </li> <li> <a>电池 存储卡</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 300px; top: -230px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/dianchi.jpg"></a><a>电池</a></li> <li> <a><img src="img/chongdian.jpg"></a><a>充电器</a></li> <li> <a><img src="img/xiancai.jpg"></a><a>线材</a></li> <li> <a><img src="img/cunchu.jpg"></a><a>存储卡</a></li> </ul> </div> </li> <li> <a>保护套 后盖</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 300px; top: -272px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/baohu.jpg"></a><a>保护套/保护壳</a></li> <li> <a><img src="img/hougai.jpg"></a><a>后盖</a></li> </ul> </div> </li> <li> <a>贴膜 其它配件</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 600px; top: -314px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/tiemo.jpg"></a><a>贴膜</a></li> <li> <a><img src="img/zipaigan.jpg"></a><a>自拍杆</a></li> <li> <a><img src="img/zipaigan.jpg"></a><a>蓝牙手柄</a></li> <li> <a><img src="img/tizhi.jpg"></a><a>贴纸</a></li> <li> <a><img src="img/fangchensai.jpg"></a><a>防尘塞</a></li> <li> <a><img src="img/fangchensai.jpg"></a><a>手机支架</a></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/raoxian.jpg"></a><a>耳机绕线器</a></li> <li> <a><img src="img/wifi.jpg"></a><a>随身WIFI</a></li> </ul> </div> </li> <li> <a>米兔 服装</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 300px; top: -356px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/mitu.jpg"></a><a>米兔</a></li> <li> <a><img src="img/fuzhuang.jpg"></a><a>服装</a></li> </ul> </div> </li> <li> <a>背包 其它周边</a> <a class="banner_menu_i">></a> <div class="banner_menu_content" style="width: 300px; top: -398px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/bag.jpg"></a><a>背包</a></li> <li> <a><img src="img/shubiaodian.jpg"></a><a>大米鼠标坠</a></li> <li> <a><img src="img/zhoubian.jpg"></a><a>生活周边</a></li> <li> <a><img src="img/wan.jpg"></a><a>玩酷产品</a></li> </ul> </div> </li> </ul>  <div id="big_banner_pic_wrap"> <ul id="big_banner_pic"> <li><img src="img/redmi10x.jpg" width="1226px"></li> <li><img src="img/redmi30pro.webp" width="1226px"></li> <li><img src="img/mi5.webp" width="1226px"></li> <li><img src="img/miyejing.webp" width="1226px"></li> </ul> </div> <div id="big_banner_change_wrap"> <div id="big_banner_change_prev"><</div> <div id="big_banner_change_next">></div> </div> </div> </div> <script type="text/javascript" src="js/script.js"></script>   <div class="w"> <div class="shop">  <div class="channel"> <ul> <li> <img src="./img/2.png" alt=""> <a href="">小米秒杀</a> </li> <li> <img src="./img/2.png" alt=""><a href="">企业团购</a></li> <li> <img src="./img/2.png" alt=""><a href="">F码通道</a></li> <li> <img src="./img/2.png" alt=""><a href="">米粉卡</a></li> <li> <img src="./img/2.png" alt=""><a href="">以旧换新</a></li> <li> <img src="./img/2.png" alt=""><a href="">话费充值</a></li> </ul> </div>  <div class="advertise"> <ul> <li> <a href=""> <img src="img/xiaomicc9.jpg" alt="" width="316px" height="170px"> </a> </li> <li> <a href=""> <img src="img/xiaomi9.jpg" alt="" width="316px" height="170px"> </a> </li> <li> <a href=""> <img src="img/xiaomicc9.jpg" alt="" width="316px" height="170px"> </a> </li> </ul> </div> </div> </div>  <div class="main"> <div class="w"> <div class="content"> <h3>小米闪购</h3> <div class="btn1"> <a href="#"><span></span></a> <a href="#"><span></span></a> </div>  <div class="limit-shop"> <div class="shanggou"> <img src="img/miaosha.PNG" alt=""> </div> <div class="shangpin"> <ul> <li> <a href=""> <img src="img/jinghuaqi.PNG" alt=""> </a> </li> <li> <a href=""> <img src="img/suo.PNG" alt=""> </a> </li> <li> <a href=""> <img src="img/jinghuaqi.PNG" alt="" width="233px" height="340px"> </a> </li> <li> <a href=""> <img src="img/suo.PNG" alt=""> </a> </li> </ul> </div> </div> </div> <div class="banner-box"> <img src="./img/banner1.webp" alt=""> </div>  <div class="sp"> <div class="box-hd"> <h3 class="title">手机</h3> <div class="more"> <a href="#">查看全部<i class="iconfont-arrow-right-big"></i></a> </div> </div> <div class="box-bd"> <div class="sp-show"> <img src="img/mixAlpha.jpg"> </div> <div class="sp-goos"> <ul> <li> <a href="#"> <div class="img"> <img src="./img/shouji.webp" alt=""> </div> <h3>小米10至尊版</h3> <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price"><span class="num">5299</span>元<span>起</span></p> </a> </li> <li> <a href="#"> <div class="img"> <img src="./img/shouji.webp" alt=""> </div> <h3>小米10至尊版</h3> <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price"><span class="num">5299</span>元<span>起</span></p> </a> </li> <li> <a href="#"> <div class="img"> <img src="./img/shouji.webp" alt=""> </div> <h3>小米10至尊版</h3> <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price"><span class="num">5299</span>元<span>起</span></p> </a> </li> <li> <a href="#"> <div class="img"> <img src="./img/shouji.webp" alt=""> </div> <h3>小米10至尊版</h3> <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price"><span class="num">5299</span>元<span>起</span></p> </a> </li> <li> <a href="#"> <div class="img"> <img src="./img/shouji.webp" alt=""> </div> <h3>小米10至尊版</h3> <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price"><span class="num">5299</span>元<span>起</span></p> </a> </li> <li> <a href="#"> <div class="img"> <img src="./img/shouji.webp" alt=""> </div> <h3>小米10至尊版</h3> <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price"><span class="num">5299</span>元<span>起</span></p> </a> </li> <li> <a href="#"> <div class="img"> <img src="./img/shouji.webp" alt=""> </div> <h3>小米10至尊版</h3> <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price"><span class="num">5299</span>元<span>起</span></p> </a> </li> <li> <a href="#"> <div class="img"> <img src="./img/shouji.webp" alt=""> </div> <h3>小米10至尊版</h3> <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p> <p class="price"><span class="num">5299</span>元<span>起</span></p> </a> </li> </ul> </div> </div> <div class="banner-box"> <img src="./img/banner1.webp" alt=""> </div> <div class="sp jiadian"> <div class="box-hd"> <h3 class="title">家电</h3> <div class="more"> <ul> <li><a href="#">热门</a></li> <li><a href="#">电视影音</a></li> </ul> </div> </div> <div class="box-bd"> <div class="jia-show"> <ul> <li> <a href="#"><img src="img/18.webp"></a> </li> <li> <a href="#"><img src="img/19.webp"></a> </li> </ul> </div> <div class="jia-goos"> <ul> <li> <a href="#"><img src="img/20.PNG" alt=""></a> </li> <li> <a href="#"><img src="img/20.PNG" alt=""></a> </li> <li> <a href="#"><img src="img/20.PNG" alt=""></a> </li> <li> <a href="#"><img src="img/20.PNG" alt=""></a> </li> <li> <a href="#"><img src="img/20.PNG" alt=""></a> </li> <li> <a href="#"><img src="img/20.PNG" alt=""></a> </li> <li> <a href="#"><img src="img/20.PNG" alt=""></a> </li> <li> <a href="#"><img src="img/20.PNG" alt=""></a> </li> </ul> </div> </div> </div> <div class="banner-box"> <img src="./img/mitouyy.webp" alt=""> </div> </div> </div>  <div class="footer">  <div class="weixiu w"> <ul> <li><a href="#">预约维修服务</a><span class="seu">|</span></li> <li><a href="#">7天无理由退货</a><span class="seu">|</span></li> <li><a href="#">15天免费换货</a><span class="seu">|</span></li> <li><a href="#">满150包邮</a><span class="seu">|</span></li> <li><a href="#">520余家售后网点</a></li> </ul> </div>  <div class="fuwu w"> <div class="fu-le"> <dl> <dt><a href="#">帮助中心</a></dt> <dd><a href="#">账户管理</a></dd> <dd><a href="#">购物指南</a></dd> <dd><a href="#">订单操作</a></dd> </dl> <dl> <dt><a href="#">服务支持</a></dt> <dd><a href="#">售后政策</a></dd> <dd><a href="#">自助服务</a></dd> <dd><a href="#">相关下载</a></dd> </dl> <dl> <dt><a href="#">线下门店</a></dt> <dd><a href="#">小米之家</a></dd> <dd><a href="#">服务网点</a></dd> <dd><a href="#">授权体验店</a></dd> </dl> <dl> <dt><a href="#">关于小米</a></dt> <dd><a href="#">了解小米</a></dd> <dd><a href="#">加入小米</a></dd> <dd><a href="#">投资者关系</a></dd> </dl> <dl> <dt><a href="#">关注我们</a></dt> <dd><a href="#">新浪微博</a></dd> <dd><a href="#">官方微信</a></dd> <dd><a href="#">联系我们</a></dd> </dl> <dl> <dt><a href="#">特色服务</a></dt> <dd><a href="#">F码通道</a></dd> <dd><a href="#">礼物码</a></dd> <dd><a href="#">防伪查询</a></dd> </dl> </div> <div class="fu-ri"> <h4>400-100-5678</h4> <p>周一至周日 8:00-18:00 </p> <p>(仅收市话费)</p> <a href="#">联系客服</a> </div> </div>  <div class="copyright w"> <div class="logo"></div> <div class="co-nav"> <a href="#">小米商城</a><span>|</span> <a href="#">MIUI</a><span>|</span> <a href="#">米家</a><span>|</span> <a href="#">米聊</a><span>|</span> <a href="#">多看</a><span>|</span> <a href="#">游戏</a><span>|</span> <a href="#">路由器</a><span>|</span> <a href="#">米粉卡</a><span>|</span> <a href="#">政企服务</a><span>|</span> <a href="#">小米天猫店</a><span>|</span> <a href="#">隐私政策</a><span>|</span> <a href="#">问题反馈</a><span>|</span> <a href="#">廉政举报</a><span>|</span> <a href="#">Select Region</a><br> <p>@mi.com 京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2017]1530-131号 <br> 违法和不良信息举报电话: 185-0130-1238, 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p> </div> <div class="co-img"> <img src="img/21.png"> <img src="img/v-logo-1.png"> <img src="img/v-logo-2.png"> <img src="img/23.png"> </div> </div>  <div class="xiaomi w"> <h4>探索黑科技,小米为发烧而生! </h4> </div> </div> </body> </html>

公共样式—base.css

/* 初始化样式文件 */ /* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉li 的小圆点 */ li { list-style: none } img { /* border 0 照顾低版本浏览器如果图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle } button { /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ cursor: pointer } a { cursor: pointer; /* 把所有的a标签下划线取消*/ text-decoration: none } button, input { /* "\5B8B\4F53" 就是宋体的意思这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; border: 0; outline: none; } body { /* CSS3 抗锯齿形让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; color: #666 } .hide, .none { display: none } /* 清除浮动 */ .clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0 } .clearfix { *zoom: 1 }

内容样式—common.css:

/* 内容样式 */ @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?3gaw45'); src: url('../fonts/icomoon.eot?3gaw45#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?3gaw45') format('truetype'), url('../fonts/icomoon.woff?3gaw45') format('woff'), url('../fonts/icomoon.svg?3gaw45#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } .w { width: 1226px; margin: 0 auto; } /*导航栏*/ .topBar { height: 40px; line-height: 40px; background: #333; } /* 左边 */ .topBar-left { /* background-color: skyblue; */ height: 40px; float: left; text-align: center; } .topBar-left a { font-size: 14px; font-weight: 400px; color: #b0b0b0; padding: 0 5px; text-decoration: none; } .topBar-left a:hover { color: #fff; } /* 左边结束----------- */ /* 右边 */ .topBar .topBar-right { /* background-color: skyblue; */ float: right; position: relative; } .topBar .topBar-right ul li { float: left; } .topBar .topBar-right ul li a { padding: 0 8px; color: #b0b0b0; } .topBar .topBar-right ul li a:hover { color: #fff; } /* 右边结束--------------------- */ /* 购物车 */ .topBar .topBar-right .sp-cart { display: inline-block; width: 120px; color: #b0b0b0; height: 40px; text-align: center; background-color: #424242; margin-left: 10px; } .topBar .topBar-right .sp-cart::before { font-family: 'icomoon'; content: "\e93a"; margin-right: 5px; } .topBar .topBar-right ul li .sp-cart:hover { /* overflow: visible; */ color: #ff6700; background-color: #fff; /* display: block; */ } .topbar-cart-menu { width: 316px; /*相对于.topBar-right进行布局*/ position: absolute; top: 40px; right: 0; /*显示的等级*/ z-index: 10; } .topbar-cart-txt { /*height: 100px；*/ background-color: #fff; text-align: center; line-height: 100px; box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.7); /*没有高度，作为清浮动操作*/ /*存在高度，overflow只隐藏超出高度*/ height: 0; overflow: hidden; /*设置过渡动画*/ transition: .4s; } .topBar .topBar-right ul li:hover .topbar-cart-menu .topbar-cart-txt { overflow: visible; /* display: block; */ height: 100px; } .topbar-cart-menu .topbar-cart-txt :hover .topBar .topBar-right ul li .sp-cart { color: #ff6700; background-color: #fff; } /* 购物车结束------------------------- */ /*导航栏结束---------------------------*/ /* 头部模块 */ .header { width: 100%; height: 110px; /* background-color: pink; */ } .container2 { /* background-color: skyblue; */ width: 1226px; height: 110px; margin: 0 auto; } /*--logo--*/ .logo { background-color: slateblue; margin-top: 20px; margin-right: 24px; width: 55px; height: 55px; float: left; } .logo a { display: block; width: 171px; height: 61px; background: url(../img/mi-logo.png) no-repeat; /* 文字隐藏 */ font-size: 0; } /*--logo结束--*/ /* 导航菜单栏 */ .nav { height: 110px; float: left; margin-left: 100px; /* background-color: red; */ } .nav ul li { float: left; } .nav ul li a { padding: 0 14px; font-size: 16px; color: #000; text-align: center; line-height: 100px; } .nav ul li a:hover { color: #ff6700; } /* 导航菜单栏结束--------- */ /*搜索部分*/ .search { margin-top: 25px; width: 300px; height: 50px; float: right; border: 1px solid #dedede; /* background-color: blue; */ } .search #s1 { width: 240px; height: 48px; /* text-align: right; */ font-weight: border; padding: 0 10px; outline: none; } .search #s2 { width: 58px; height: 50px; float: right; border: 0; cursor: pointer; font-family: 'icomoon'; content: "\e986"; border: 1px solid #dedede; font-size: 17px; background: rgba(255, 255, 255, 0.1); } .search #s2:hover { background-color: #ff6700; color: #fff; } /* 头部模块结束---------------------------- */ /*选购*/ .shop { width: 1226px; height: 170px; margin: 0 auto 30px; margin-top: 20px; /* background-color: pink; */ } /*选购导航*/ .channel { width: 225px; height: 170px; float: left; background-color: #5f5750; text-align: center; } .channel ul li { float: left; width: 75px; height: 85px; padding: 20px 5px; /* background-color: red; */ border: 0.1px solid; border-color: rgba(255, 255, 255, 0.1); } .channel ul li img { position: relative; top: -10px; left: 18px; display: block; width: 24px; height: 24px; } .channel ul li a { color: #dedede; font-weight: 700; } .channel ul li :hover { transition: all .5s; color: #fff; } /*选购导航结束*/ /*选购商品 */ .advertise { float: right; width: 999px; height: 170px; } .advertise ul li { width: 316px; height: 170px; float: right; margin-left: 14px; } .advertise ul li a { width: 316px; height: 170px; } .advertise ul li a:hover { /*上移，变大*/ transform: translateY(-2px) scale(4.02); /*阴影*/ box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7); } /*选购商品结束------------- */ /*选购结束--------------------*/

轮播图样式 style.css:

在这里插入#big_banner_wrap { width: 1226px; height: 460px; margin: 0 auto; position: relative; color: #424242; } #big_banner_wrap #banner_menu_wrap { width: 235px; height: 100%; float: left; position: absolute; background: rgba(0, 0, 0, 0.8); z-index: 600; } #big_banner_wrap #banner_menu_wrap .active { margin-top: 20px; } #big_banner_wrap #banner_menu_wrap li { width: 100%; height: 42px; position: relative; transition: all 3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; line-height: 40px; cursor: pointer; } #big_banner_wrap #banner_menu_wrap li a { font-size: 13px; color: #ffffff; margin-left: 30px; float: left; text-decoration: none; } #big_banner_wrap #banner_menu_wrap li .banner_menu_i { float: right; font-size: 20px; margin-right: 20px; } #big_banner_wrap #banner_menu_wrap li .banner_menu_content { width: 600px; height: 459px; display: none; z-index: 610; position: absolute; left: 235px; background: #fff; } #big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul { float: left; width: 280px; } #big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul li { width: 250px; height: 40px; padding: 18px; float: left; } #big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul li a { color: #424242; margin-left: 5px; font-size: 12px; } #big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul li span { width: 59px; height: 25px; float: right; margin-top: 5px; border: 1px solid #ff6700; color: #FF6700; font-size: 13px; line-height: 24px; text-align: center; transition: all 3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; } #big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul li span:hover { background: #ff6700; color: #ffffff; } /* 轮播图 */ #big_banner_wrap #big_banner_pic_wrap { width: 1226px; height: 460px; overflow: hidden; position: relative; } #big_banner_wrap #big_banner_pic_wrap #big_banner_pic { width: 6130px; height: 460px; position: absolute; float: left; } #big_banner_wrap #big_banner_pic_wrap #big_banner_pic li { width: 1226px; height: 460px; float: left; cursor: pointer; } #big_banner_wrap #big_banner_change_wrap { width: 961px; height: 460px; position: absolute; top: 0px; left: 250px; color: #ffffff; } #big_banner_wrap #big_banner_change_wrap div { display: none; transition: all 3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; } #big_banner_wrap #big_banner_change_wrap div:hover { background: #333333; cursor: pointer; color: #FF6700; } #big_banner_wrap #big_banner_change_wrap #big_banner_change_prev { width: 50px; height: 50px; line-height: 50px; float: left; margin-top: 205px; font-size: 50px; text-align: center; } #big_banner_wrap #big_banner_change_wrap #big_banner_change_next { width: 50px; height: 50px; line-height: 50px; float: right; margin-top: 205px; font-size: 50px; text-align: center; } /* 轮播图结束----------- */代码片

首页样式—index.css:

.main { /* height: 100%; */ background: #f5f5f5; } .content { position: relative; width: 1226px; margin-left: auto; margin-right: auto; } .content h3 { font-size: 25px; } .content .btn1 { position: absolute; top: 0; right: 0; width: 70px; height: 25px; margin: 8px 0; /* background-color: red; */ } .content .btn1 span { font-family: 'icomoon'; text-align: center; float: left; width: 35px; height: 25px; line-height: 25px; font-size: 18px; border: 1px solid #eee; } .content .btn1 span:hover { color: #ff6700; } /*选购列表*/ .limit-shop { display: inline-block; width: 100%; height: 340px; margin-top: 5px; } .limit-shop img { width: 235px; height: 340px; } .limit-shop .shanggou { float: left; } .limit-shop .shangpin ul li { float: left; padding: 0 6px; } .banner-box { margin-top: 20px; } .banner-box img { width: 100%; } /*选购列表结束-----------*/ /* 商品类表 */ /*商品列表*/ .sp .box-hd { height: 58px; padding: 20px 0; } .sp .box-hd .title { float: left; font-weight: 400; font-size: 25px; } .sp .box-hd .more { float: right; font-size: 18px; } .sp .box-hd .more a { color: black; } .sp .box-hd .more a:hover { color: #ff6700; transition: all 0.5s; } .iconfont-arrow-right-big::before { font-family: 'icomoon'; content: "\e902"; display: inline-block; width: 20px; height: 20px; border-radius: 50%; line-height: 20px; text-align: center; background-color: gray; color: #fff; margin-left: 8px; transition: all 0.4s; } .sp .box-hd .more :hover .iconfont-arrow-right-big:before { background-color: #ff6700; } .sp .box-bd { height: 625px; } .sp .box-bd .sp-show { float: left; padding-top: 10px; width: 234px; } .sp .box-bd .sp-show img { width: 100%; } .sp .box-bd .sp-goos ul li { float: left; width: 234px; height: 300px; background: #fff; margin: 8px 7px; text-align: center; transition: all 1s; } .sp .box-bd .sp-goos ul li img { width: 160px; height: 160px; } .sp .box-bd .sp-goos h3 { color: #000; padding: 20px 0 0 0; } .sp .box-bd .sp-goos .desc { color: gray; } .sp .box-bd .sp-goos .price { margin-top: 15px; color: #ff6633; } .sp .box-bd .sp-goos ul li:hover { /*上移，变大*/ transform: translateY(2px) scale(1, 1); /*阴影*/ box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7); } /* 商品类表结束-------------- */ /*---------------------------------jiadian*/ .jiadian .box-hd .more ul li { float: left; } .jiadian .box-hd .more ul li a { padding: 0 10px; } .jiadian .box-hd .more ul li a:hover { color: #ff6633; border-bottom: 2px solid #ff6633; } .jiadian .box-bd { height: 628px; } .sp .box-bd .jia-show ul li { margin-top: 10px; margin-bottom: 15px; } .sp .box-bd .jia-show { float: left; width: 234px; margin-bottom: 10px; } .sp .box-bd .jia-show img { width: 100%; } .sp .box-bd .jia-goos ul li { float: left; margin: 10px 0 4px 15px; } .sp .box-bd .jia-goos ul li img { width: 233px; height: 300px; } /*---------------------------------jiadian*/

底部样式—footer.css:

/*footer*/ .footer { width: 100%; background-color: #fff; } /*--------------------------------weixiu*/ .weixiu { height: 79px; border-bottom: 1px solid #E0E0E0; } .weixiu li { float: left; height: 79px; line-height: 79px; font-size: 16px; } .weixiu a { float: left; padding: 0 70px; color: #616161; } .seu { float: left; color: #E0E0E0; } .weixiu a:hover { color: #ff6700; } /*------------------------------------------*/ /*----------------------------------------fuwu*/ .fuwu { height: 192px; } .fu-le { float: left; height: 192px; width: 974px; } .fu-le dl { float: left; font-size: 12px; } .fu-le dt { padding: 42px 104px 32px 0; } .fu-le dt a { color: #424242; } .fu-le dd { padding-bottom: 16px; } .fu-le dd a { color: #757575; } .fu-le a:hover { color: #ff6700; } .fu-ri { text-align: center; } .fu-ri h4 { padding: 42px 0 14px 0; font-size: 18px; color: #ff6700; font-weight: 400; } .fu-ri p { margin-bottom: 6px; font-size: 12px; color: #757575; } .fu-ri a { display: inline-block; margin-top: 20px; height: 28px; line-height: 28px; width: 118px; font-size: 14px; color: #ff6700; border: 1px solid #ff6700; } .fu-ri a:hover { background-color: #ff6700; color: #fff; } /*------------------------------------------------*/ /*------------------------------------------------copyright*/ .copyright { height: 55px; padding: 40px 10px 0 0; } .logo { float: left; width: 55px; height: 65px; background: url("../img/mi-logo.png") no-repeat 0 0; } .co-nav { float: left; padding-left: 10px; width: 688px; height: 55px; } .co-nav a, .co-nav span, .co-nav p { font-size: 12px; } .co-nav a, .co-nav span { color: #757575; } .co-nav p { color: #B0B0B0; } .co-img { height: 55px; width: 538px; } .co-img img { width: 83px; height: 28px; } /*-----------------------------------------------*/ .xiaomi { text-align: center; height: 80px; line-height: 80px; } .xiaomi h4 { font-size: 18px; font-weight: 400; font-family: "楷体"; color: #BEBEBE; }

js：

//菜单栏的显示 $("#banner_menu_wrap").children().hover(function() { $(this).css("background", "#ff6700"); $(this).children(".banner_menu_content").css("border", "1px solid #F0F0F0").show(); }, function() { $(this).css("background", "none"); $(this).children(".banner_menu_content").css("border", "0px solid #F0F0F0").hide(); }); //轮播 $(function() { var i = 0; var big_banner_pic = $("#big_banner_pic"); var allimg = $("#big_banner_pic li").length; function img_change() { var img_i = i * -1226 + "px"; big_banner_pic.animate({ opacity: ".2" }, 100, function() { big_banner_pic.css("left", img_i); big_banner_pic.animate({ opacity: "1" }, 100); }) } function automatic() { i += 1; if (i >= allimg) { i = 0; } img_change(); } change_self_time = setInterval(automatic, 5000); //轮播上一张下一张图标控制 $("#big_banner_change_wrap").hover(function() { clearInterval(change_self_time); $("#big_banner_change_wrap").children().show(); }, function() { change_self_time = setInterval(automatic, 5000); $("#big_banner_change_wrap").children().hide(); }) $("#big_banner_change_prev").click(function() { i += 1; if (i >= allimg) { i = 0; } img_change(); }) $("#big_banner_change_next").click(function() { i -= 1; if (i <= 0) { i = allimg - 1; } img_change(); }) })

`最后加了一些字体图标就是网页头上的小图标

只需要在目录下放个后缀为.ico图片即可

html引用方式：

还有一些字体图标要注意比如一些购物车，箭头图标有特定的引用方式在百度搜索https://icomoon.io/ 打开的界面是这样的点击右上角

选择自己想选的图标然后点击下载，下载之后打开我们只需要复制fonts文件到目录下就可以了引用方式打开下载的压缩包里面的style.css文件只需要复制这段代码到特定的css文件即可

@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?uc2id'); src: url('fonts/icomoon.eot?uc2id#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?uc2id') format('truetype'), url('fonts/icomoon.woff?uc2id') format('woff'), url('fonts/icomoon.svg?uc2id#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }

单单使用这些是不行的，怎么引用？

在需要的代码加上即可

font-family: 'icomoon';//这段必须加 content: "\e93a";

打开demo.html 在content加上编号或者都可以。

本人新手一个做得不好请多多包涵

最新回复(0)