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

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><!-- 导航栏end --><!-- logo --><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>手机&nbsp;平板</a><a class="banner_menu_i">&gt;</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>电视&nbsp;盒子</a><a class="banner_menu_i">&gt;</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>路由器&nbsp;智能配件</a><a class="banner_menu_i">&gt;</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>大米路由器&nbsp;青春版</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>移动电源&nbsp;插线板</a><a class="banner_menu_i">&gt;</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>耳机&nbsp;音箱</a><a class="banner_menu_i">&gt;</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>电池&nbsp;存储卡</a><a class="banner_menu_i">&gt;</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>保护套&nbsp;后盖</a><a class="banner_menu_i">&gt;</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>贴膜&nbsp;其它配件</a><a class="banner_menu_i">&gt;</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>米兔&nbsp;服装</a><a class="banner_menu_i">&gt;</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>背包&nbsp;其它周边</a><a class="banner_menu_i">&gt;</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">&lt;</div><div id="big_banner_change_next">&gt;</div></div></div></div><script type="text/javascript" src="js/script.js"></script><!-- 轮播图部分end --><!-- 选购部分 --><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><!-- 选购部分end --><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><!-- footer --><div class="footer"><!-- weixiu --><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><!-- fuwu --><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><!-- copyright --><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><!-- end --><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引用方式：

 <link rel="shortcut icon" href="mi_favicon.ico" />

还有一些字体图标要注意
比如一些购物车，箭头图标
有特定的引用方式
在百度搜索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加上编号或者都可以。

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

html+css 简单的静态网页小米官网相关推荐

CSS+HTML静态网页——小米官网（附源代码）
效果图如图所示 : html代码: <!DOCTYPE html> <html lang="en"> <head><meta charse ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
大一可能用到的使用HTML+CSS做成简单的静态网页
大一可能用到的使用HTML+CSS做成简单的静态网页不知道你们大一学html和css没有,哈哈.要是老师负责还好,要是不负责就jj了,期末,期中可能就要交课程报告了,希望能帮到你.! 我就做了一个简 ...
小米官网静态网页练习记录
本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...
仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
web设计网页规划与设计：企业电子网站设计——简单的电子产品公司官网模板(5页)HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计--简单的电子产品公司官网模板html(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码 ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...

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

html+css简单静态小米官网

html+css 简单的静态网页小米官网相关推荐

最新文章

热门文章