html样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha，小米电视官方网站</title> <link rel="stylesheet" href="./mi.css"> <link rel="stylesheet" href="./base.css"> <!-- 设置网站的图标（在标题栏和收藏栏） -网站图片一般储存在网站的根目录下，名字一般叫做favicon.ico --> <link rel="icon" href="./photo/favicon.ico"> </head> <body> <!-- 外部容器 --> <div class="top_bar_wrapper"> <!-- 内部镶嵌容器 --> <div class="bar_wrapper"> <!-- 左侧头部列表 --> <div class="left_list"> <ul> <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> <a class="box3" href="javascript"> 下载app <div class="code"> <img src="./photo/二维码.jpg"> <span class="box2">小米商城app</span> </div> </a> </li> <li class="line"></li> <li><a href="javascript">智能生活</a></li> <li class="line"></li> <li><a href="javascript">Select location</a></li> </ul> </div> <div class="right_list"> <ul> <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="box1"><a href="javascript">购物车(0)</a></li> </ul> </div> </div> </div> <!-- 第二块容器 --> <div class="first"> <div class="second_bar_wrapper"> <!-- 左侧小米图标 --> <div class="xbt_box"> <a href="javascript"> <img src="./photo/小米图标.png"> </a> </div> <!-- 中间部分 --> <div class="middle_wrapper"> <!-- 中间列表 --> <div class="middle_list"> <ul class="middle_menu"> <li> <a class="hidden" href="javascript">全部商品分类</a> <!-- 创建左侧菜单栏 --> <ul class="left_menu"> <li><a class="left_border"href="javascript"></a>手机 电话卡</li> <li><a class="left_border"href="javascript"></a>电视 盒子</li> <li><a class="left_border"href="javascript"></a>笔记本 显示器</li> <li><a class="left_border"href="javascript"></a>家电 插线板</li> <li><a class="left_border"href="javascript"></a>出行 穿戴</li> <li><a class="left_border"href="javascript"></a>智能 路由器</li> <li><a class="left_border"href="javascript"></a>电源 配件</li> <li><a class="left_border"href="javascript"></a>健康 儿童</li> <li><a class="left_border"href="javascript"></a>耳机 音响</li> <li><a class="left_border"href="javascript"></a>生活 箱包</li> </ul> </li> <li><a class="xiala_shows" href="javascript">小米手机</a></li> <li><a class="xiala_shows" href="javascript">Redmi红米</a></li> <li><a class="xiala_shows" href="javascript">电视</a></li> <li><a class="xiala_shows" href="javascript">笔记本</a></li> <li><a class="xiala_shows" href="javascript">家电</a></li> <li><a class="xiala_shows" href="javascript">路由器</a></li> <li><a class="xiala_shows" href="javascript">智能硬件</a></li> <li><a href="javascript">服务</a></li> <li><a href="javascript">社区</a></li> <div class="xiala_info"></div> </ul> </div> </div> <!-- 右侧 --> <div class="right"> <!-- 右侧搜索框 --> <form class="right_search"action="#"> <input class="search" type="text"> <button class="submit">搜索</button> </form> </div> </div> </div> <!-- 创建中间背景轮播图 --> <div class="banner_wrapper"> <div class="banner_img"> <a href="javascript"><img src="./photo/中间背景.jpg"></a> </div> <!-- <div class="pointer"> <a href="javascript"></a> <a href="javascript"></a> <a href="javascript"></a> <a href="javascript"></a> <a href="javascript"></a> <a href="javascript"></a> </div> --> </div> </body> </html>css样式
*{ margin: 0; padding: 0; } li{ list-style: none; } .top_bar_wrapper{ width: 100%; min-width: 1250px; height: 40px; background-color: rgba(0, 0, 0, 0.8); } .bar_wrapper{ width: 1250px; height: 40px; line-height: 40px; /* background-color:rgba(0, 0, 0, 0.8); */ margin: 0 auto; } .left_list li{ float: left; /* margin-right: 10px; */ } .left_list a, .right_list a{ display: block; text-decoration: none; color: rgba(255, 255, 255, 0.562); font-size: 4px; } .right_list{ float: right; } .right_list li{ float: left; display: block; } .left_list a:hover{ color: #fff; } .right_list a:hover{ color: #fff; } .line{ width: 1px; height: 10px; background-color: rgb(128, 123, 123); margin: 15px 8px; } .box1{ width: 60px; background-color: rgba(255, 255, 255, 0.2); text-align: center; margin-left: 20px; } .box1 a:hover{ color: orange; background-color: #fff; } .box3:hover .code, .box3:hover::after{ display: block; height: 148px; } /* 设置app下拉 */ .code{ position: absolute; z-index: 1; left: -40px; width: 124px; height: 0; overflow: hidden; line-height: 1; background-color:#fff; text-align:center; /* padding:10px; */ box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); /* transition用于为样式添加过渡效果 */ transition: height 0.5s; } .box3{ position: relative; } .box3::after{ display: none; content: ""; position: absolute; width: 0; height: 0; border: 8px solid transparent; border-bottom-color: white; bottom: 0; left:14px; } .code .img{ margin-bottom: 10px; } .box2{ color: black; font-size: 16px; } .first{ width: 100%; height: 100px; position: relative; } .second_bar_wrapper{ width: 1250px; background-color: #fff; margin: 0 auto; } .xbt_box img{ float: left; width: 55px; height: 55px; margin-top: 22.5px; } /* 隐藏全部商品 */ .hidden{ visibility: hidden; } .second_bar_wrapper .middle_wrapper{ float: left; width: 800px; height: 100px; line-height: 100px; background-color: #fff; margin-left: 70px; } .middle_menu li>a { float: left; display: block; text-decoration: none; color: black; margin-right: 25px; } .middle_list li a:hover{ color: orange; } /* 下拉层 */ .xiala_info{ width: 100%; /* height: 228px; */ height: 0; overflow: hidden; background-color: #fff; position: absolute; z-index: 5; top: 100px; left: 0; /* 下拉过渡 */ transition: height 0.5s; } /* 设置除第九个和第十个外都可以弹出下拉层 */ .middle_menu >li:not(.left_border):not(:nth-child(9)):not(:nth-child(10)):not(.left_menu):hover ~ .xiala_info, /* .middle_menu li >.xiala_shows:hover ~.xiala_info, */ /* .middle_menu li :not(.left_border):hover ~ .xiala_info, */ .middle_menu .xiala_shows:hover ~ .xiala_info, .xiala_info:hover{ height: 228px; border-top: 1px solid rgb(224, 224, 224); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); } .second_bar_wrapper .right{ float: right; width: 240px; height: 50px; padding: 0px; margin-top: 25px; } .right_search .search{ box-sizing: content-box; float: left; width: 165px; height: 50px; font-size: 16px; padding: 0 10px; border: none; border: 1px solid rgb(224, 224, 224); outline: none; } /* :focus设置input和button获取焦点后的样式 */ .right_search .search:focus, .right_search .search:focus+.submit{ border-color: #ff6700; } .right_search .submit{ width: 50px; height: 50px; border-top: none; border: 1px solid rgb(224, 224, 224); background-color: #fff; } .right_search .submit:hover{ background-color: #ff6600; color: white; } /* 左侧列表 */ .left_menu{ width: 234px; height: 450px; position: absolute; z-index: 2; left: 146px; top: 100px; background-color: rgb(0, 0, 0,.6); line-height: 1; padding-bottom: 0px; padding: 10px 0; /* padding-left: 20px; */ } .left_menu li{ width: 194px; height: 45px; line-height: 45px; color: #fff; padding: 0 20px; } .left_menu li:hover{ background-color: #ff6700; } /* banner轮播图 */ .banner_wrapper{ width: 1010px; height: 470px; position: absolute; float: right; right: 146px; } .banner_wrapper .banner_img img{ width: 1010px; height: 470px; } /* .pointer{ position: absolute; float: left; z-index: 100; } .pointer a{ width: 6px; height: 6px; background-color: brown; } */写了大概400行，有关用js实现的因为还没学到js，所以用的css代替，里面有一个问题，就是下面这一段关于导航条控制下拉层的。
1 .middle_menu >li:not(.left_border):not(:nth-child(9)):not(:nth-child(10)):not(.left_menu):hover ~ .xiala_info,
2 /* .middle_menu li >.xiala_shows:hover ~.xiala_info, */
3 /* .middle_menu li :not(.left_border):hover ~ .xiala_info, */
4 /.middle_menu .xiala_shows:hover ~ .xiala_info,/ .xiala_info:hover{ height: 228px; border-top: 1px solid rgb(224, 224, 224); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); } 只有1可以让下拉层出来，个人感觉4挺对的，但就是出不来下拉层。 哎，让人难受。
