有效沟通问答-【官方】百战程序员_IT在线教育培训机构

/* 黑色导航开始 */
.black-nav{
 width: 100%;
 height: 40px;
 background-color: #333;  
 line-height: 40px;
 
}
.wrap{
    width: 1226px;
    margin: 0 auto;
    /* position: relative; */
}
.left-nav{
    float: left;
}
.right-nav{
    float: right;
}
.black-nav li{
    float: left;
    position: relative;
}
.black-nav a{
    color: #b0b0b0;
    font-size: 12px;
}
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
.black-nav a:hover{
    color: #fff;
}
.download{
    width: 124px;
    height: 0;
    background-color: #fff;
    position:absolute;
    top: 40px;
    left: -50%;
    display: none;
    box-shadow: 0 1px 5px #333 ;
    transition: all 0.5s;
    /* margin-left: -62px; */
}
.download img{
    width: 90px;
    margin: 18px auto 0;
}
.left-nav li:hover>.download{
    height: 148px;
    display: block;
   
}
.download p{
    color: #424242;
    font-size: 14px;
    line-height: 14px;
}
.triangle{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0px;
    right: 50%;
    margin-left: -8px;
    display: none;
}
.left-nav li:hover>.triangle{
    display: block;
}
.cart{
    width: 120px;
    height: 40px;
    background: #424242;
    margin-left: 20px;
}
.cart span{
    color: #b0b0b0;
}
.cart:hover{
    background: #fff;
}
.cart:hover>a{
    color: #ff6700;
}
.cart i{
    font-style: normal;
    padding-left: 5px;
    position: relative;
}
.cart-1{
    width: 320px;
    height: 0px;
    position: absolute;
    top: 40px;
    right: 0;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    transition: all 0.5s;
    line-height: 100px;
}
.cart:hover>.cart-1{
    height: 100px;
}

/* 黑色导航结束 */

/* 白色导航开始 */
.withe-nav{
    width: 100%;
    height: 100px;
    background: #fff;
    position: relative;
    clear: both;
    line-height: 100px;
}
.logo{
    float: left;
}
.white-left-nav{
    width: 850px;
    float: left;
}
.white-right-nav{
    width: 296px;
    float: right;
}
.logo{
    width: 56px;
    height: 56px;
    margin-top: 22.5px;
}
.logo img{
    width: 56px;
    height: 56px;
    left: 0;
}
.white-left-nav li{
    padding: 5px 0 0 30px;
    float: left;
    box-sizing: border-box;
}
.white-left-nav li a{
    color: #333;
    font-size: 16px;
}
.white-left-nav>ul>li>a:hover{
    color: #ff6700;
}
.white-left-nav ul{
    margin-left: 113px;
}
.white-right-nav input{
    width: 244px;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    margin-top: 25px;
}
.white-right-nav button{
    width: 52px;
    height: 50px;
    font-size: 24px;
    line-height: 50px;
    background-color: #fff;
    color: #616161;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-left: 0;
    margin-top: 25px;
    float: right;
}
.white-right-nav button:hover{
    background-color: #ff6700;
    color: #fff;
}
.item{
    width: 100%;
    height: 229px;
    position: absolute;
    top: 100px;
    left: 0;
}



/* 白色导航结束 */

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 343楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="./iconfont.css">
    <link rel="stylesheet" href="./rests.css">
    <link rel="stylesheet" href="./mi.css">
</head>
<body>
    <!-- 黑色导航开始 -->
    <div class="black-nav">
        <div class="wrap">
            <ul class="left-nav">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">有品商城</a><span>|</span></li>
                <li><a href="#">天星科技</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证件</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li>
                    <a href="#">下载APP</a>
                    <span>|</span>
                    <div class="download">
                        <img src="./image/download.png" alt="">
                        <p>小米商城App</p>
                    </div>
                    <!-- 三角形 -->
                    <div class="triangle"></div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">Select</a></li>
            </ul>
            <ul class="right-nav">
                <li><a href="">登陆</a><span>|</span></li>
                <li><a href="">注册</a><span>|</span></li>
                <li><a href="">消息通知</a></li>
                <li class="cart">
                    <a href="#">
                        <i class="iconfont">&#xe70b;</i>
                        <i>购物车</i>
                    </a>
                    <div class="cart-1">还没有东西</div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 黑色导航结束 -->
    <!-- 白色导航开始 -->
    <div class="withe-nav">
        <div class="wrap">
            <div class="logo">
                <img src="./image/logo-mi2.png" alt="">
            </div>
            <div class="white-left-nav">
                <ul>
                    <li>
                        <a href="#">小米手机</a>
                        <div class="item">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                           <div><img src="./image/item.webp" alt=""</div> 
                                           <p>小米pro</p>
                                           <p>5200元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                           <div><img src="./image/item.webp" alt=""</div> 
                                           <p>小米pro</p>
                                           <p>5200元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                           <div><img src="./image/item.webp" alt=""</div> 
                                           <p>小米pro</p>
                                           <p>5200元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                           <div><img src="./image/item.webp" alt=""</div> 
                                           <p>小米pro</p>
                                           <p>5200元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                           <div><img src="./image/item.webp" alt=""</div> 
                                           <p>小米pro</p>
                                           <p>5200元</p>
                                        </a>
                                    </li>
                                                                 
                                </ul>
                            </div>                          
                        </div>
                    </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="white-right-nav">
                <input type="text" placeholder="洗衣机">
               
                <button>^</button>
            </div>
        </div>
    </div>  
    <!-- 白色导航结束 -->
</body>
</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 344楼

下图有疑问，相对定位应该是以自身为基准进行平移吧

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 345楼

同学您好