时间：2023-06-04 12:00:01 | 来源：网站运营
时间：2023-06-04 12:00:01 来源：网站运营
教你制作小米官网：
在线咨询
.black-nav{ width: 100%; height: 40px; line-height: 40px; background-color: #333; font-size: 12px;}.wrap{ width:1226px; margin: 0 auto;}.black-nav-left,.black-nav li{ float: left;}.black-nav li{ position: relative;}.black-nav a{ color: #b0b0b0;}.black-nav a:hover{ color: #fff;}.black-nav span{ color: #424242; margin: 0 3.6px;}.black-nav-right{ float: right;}.cart{ width: 120px; height: 40px; background-color: #424242; margin-left: 25px; cursor: pointer;}.cart:hover{ background-color: #fff;}.cart i{ font-size: 20px; margin-right: 4px;}.cart:hover>a{ color: #ff6700;}.triangle{ width: 0; height: 0; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; bottom: 0; left: 50%; margin-left: -8px; display: none;}.black-nav li:hover>.triangle,.black-nav li:hover>.code{ display: block;}.code{ width: 124px; height: 0; background-color: #fff; box-shadow: 0 1px 5px #aaa; position: absolute; top: 40px; left: 50%; margin-left: -62px; overflow: hidden; transition: all .3s; z-index: 888;}.black-nav li:hover>.code{ height: 148px;}.code>img{ width: 90px; margin: 18px 0 12px;}.code>p{ color: #333; font-size: 14px; line-height: 14px;}.cart-list{ width: 316px; height: 0; background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15); position: absolute; top: 40px; right: 0; transition: all .3s; color: #424242; overflow: hidden; z-index: 800;}.cart:hover>.cart-list{ height: 100px; line-height: 100px;}.white-nav{ width: 100%; height: 100px; position: relative; background-color: #fff;}.logo{ width: 55px; height: 100px; float: left;}.nav-bar{ width: 850px; height: 100px; float: left; margin-left: 7px; margin-right: 18px; padding-left: 142px; box-sizing: border-box;}.search{ width: 296px; float: left; margin-top: 25px; position: relative; background-color: red;}.logo>a{ display: block; width: 55px; height: 55px; background-image: url("../images/logo-footer.png"); background-size: 55px 55px; margin-top: 22.5px;}.logo>a:hover{ background-image: url("../images/logo.png");}.nav-bar>ul>li{ float: left; height: 100px;}.nav-bar>ul>li>a{ color: #333; padding: 38px 10px; display: block;}.nav-bar a:hover{ color: #ff6700;}.search input{ width: 244px; height: 50px; border: 1px solid #e0e0e0; padding: 0 10px; box-sizing: border-box; border-right: none; float: left; outline: none; transition: all .2s;}.search button{ width: 52px; height: 50px; background-color: #fff; border: 1px solid #e0e0e0; float: left; color: #616161; font-size: 20px; transition: all .2s; cursor: pointer; outline: none;}.search button:hover{ background-color: #ff6700; border-color: #ff6700; color: #fff;}.search input:hover,.search input:hover+button{ border-color: #b0b0b0;}.search input:focus,.search input:focus+button{ border-color: #ff6700;}<!--下拉列表-->.hot-word-list{ width: 245px; height: 300px; border: 1px solid #ff6700; box-sizing: border-box; position: absolute; left: 0; top: 50px; border-top: none; display: none; background-color: #fff; z-index: 700;}.search input:focus~.hot-word-list{ display: block;}.hot-word-list a{ color: #424242; font-size: 12px;}.hot-word-list li{ text-align: left; padding-left: 10px; height: 30px; line-height: 30px;}.hot-word{ height: 50px; line-height: 50px; position: absolute; top: 0; right: 62px; text-align: right;}.hot-word>a{ color: #757575; background-color: #eee; font-size: 12px; padding: 0 5px; margin-left: 5px; transition: all .2s;}.hot-word>a:hover{ color: #fff; background-color: #ff6700;}.search input:focus~.hot-word{ display: none;}.nav-list{ width: 100%; height: 230px; background-color: #fff; position: absolute; left: 0; top: 100px; display: none; border-top: 1px solid #e0e0e0; box-shadow: 0 3px 4px rgba(0,0,0,.18); z-index: 777;}.nav-bar li:hover>.nav-list{ display: block;}.nav-list li{ width: 204px; height: 201px; padding: 35px 12px 0; box-sizing: border-box; float: left;}.img-box{ height: 110px; border-right: 1px solid #e0e0e0; margin-bottom: 16px;}.img-box1{ border-right: none;}.name1{ color: #333; font-size: 12px; line-height: 20px;}.price1{ color: #ff6700; font-size: 12px; line-height: 20px;}四、Banner部分关键词：小米
