金立导航

末蓝、 2021-07-25 02:27 394阅读 0赞

**css文件**

.nav{ 
    	width:100%;
    	height:93px;
    	border-bottom: 1px solid #d5d5d5;
    	
    }
    .wrap{ 
    	width:900px;
    	height: 93px;
    	margin-left:125px;
    	
    }
    .logo{ 
    	width:270px;
    
    }
    .logo,.nav_right{ 
    	float:left;
    }
    .logo>img{ 
    	margin-top:20px;
    }
    
    li{ 
    	list-style-type:none;
    }
    .bottom li a:hover{ 
    	color:#ef4222;
    	
    }
    .top li a:hover{ 
    	color:#ef4222;
    	
    }
    .nav_right{ 
    	width:630px;
    	height:93px;
    	
    }
    .top{ 
    	width:100%;
    	height:35px;
    	line-height: 35px;
    
    	
    }
    .nav_right .top ul{ 
    	float:right;
    	margin-top:0px;
    }
    .top ul li{ 
    	float:left;
    }
    .top ul a{ 
    	margin:0px 10px;
    	text-decoration: none;
    	color:#9f9f9f;
    	font-size: 10px;
    }
    
    span{ 
    	color:#9f9f9f;
    }
    .bottom{ 
    	width:100%;
    	height:58px;
    	line-height: 58px;
    
    }
    
    .bottom li a{ 
    	font-size: 16px;
    	color:black;
    	text-decoration: none;
    	margin-right:30px;
    }
    .bottom ul{ 
    	margin-top: 0px;
    	float:right
    }
    .bottom ul li{ 
    	float:left;
    }
    
    .phone_hidden{ 
    	width:100%;
    	height:260px;
    	background-color:red;
    	position:absolute;
    	left:0;
    	top:102px;	
    	display: none;
    }
    
     .bottom .phone: hover .phone_hidden{ 
    	display: block;
    }

**html文件**

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" href="3.css" />
    	</head>
    	<body>
    		<div class="nav">
    			<div class="wrap">
    				<div class="logo"><img src="img/金立logo.jpg" alt="" /></div>
    				<div class="nav_right">
    					<div class="top">
    						<ul>
    							<li><a href="">amigo账户登录</a><span>|</span></li>
    							<li><a href="">原账户登录</a><span>|</span></li>
    							<li><a href="">注册</a></li>
    							<li><a href="">购物车</a></li>
    						</ul>
    					</div>
    					<div class="bottom">
    						<ul>
    							<li><a href="">首页</a></li>
    							<li  class="phone"><a href="">手机</a>
    							<div class="phone_hidden">
    								
    							</div>
    							</li>
    							<li><a href="">配件</a></li>
    							<li><a href="">服务</a></li>
    							<li><a href="">下载</a></li>
    							<li><a href="">amigoOS</a></li>
    							<li>
    								<input type="text" />
    							</li>
    						</ul>
    					</div>
    				</div>
    				
    				
    				
    			</div>
    		</div>
    	</body>
    </html>