仿微信导航栏滑动门练习

电玩女神 2023-02-20 07:20 190阅读 0赞

#### 效果测试 ####

![在这里插入图片描述][20200624163332152.gif]

#### 代码： ####

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wechat</title> <style> * { 
    			margin:0;
    			padding: 0;
    		}
    		a { 
    			text-decoration: none;
    		}
    		li { 
    			list-style-type: none;
    		}
    		.w { 
    			width: 1200px;
    			margin:0 auto;
    			padding-top: 14px;
    		}
    		.header { 
    			height: 499px;
    			background: url(images/background.jpg);
    		}
    		.logo { 
    			float: left;
    			height: 44px;
    		}
    		ul { 
    			float: right;
    		}
    		ul li { 
    			float: left;
    			margin-left: 10px;
    
    		}
    		ul li a { 
    			color: white;
    			display: inline-block;
    			height: 33px;
    			line-height: 33px;
    			padding-left: 15px;
    		}
    		ul li a span { 
    				height: 33px;
    				display: inline-block;
    				padding-right: 15px;
    				outline: 0px;
    		}
    		ul li a:hover { 
    			background: url(images/ao.png) no-repeat ;
    		}
    
    		ul li a:hover span { 
    			background: url(images/ao.png) no-repeat right ;
    		
    		}
    
    	</style>
    </head>
    <body>
    	<div class="header">
    		<nav class="w">
    		<a href="/">
    			<img src="images/logo.png" alt="logo" class="logo">
    		</a>
    		<ul>
    			<li><a href="#"><span>首页</span></a></li>
    			<li><a href="#"><span>帮助与反馈</span></a></li>
    			<li><a href="#"><span>公众平台</span></a></li>
    			<li><a href="#"><span>开放平台</span></a></li>
    			<li><a href="#"><span>微信支付</span></a></li>
    			<li><a href="#"><span>微信广告</span></a></li>
    			<li><a href="#"><span>企业微信</span></a></li>
    			<li><a href="#"><span>表情开放平台</span></a></li>
    			<li><a href="#"><span>微信网页版</span></a></li>
    		</ul>
    	</div>
    		</nav>
    	
    </body>
    </html>

#### 所用素材： ####

background.jpg  
![在这里插入图片描述][20200624163055440.jpg]  
logo.png  
![在这里插入图片描述][20200624163125766.png]  
au.png

![在这里插入图片描述][2020062416314628.png]

[20200624163332152.gif]: https://img-blog.csdnimg.cn/20200624163332152.gif
[20200624163055440.jpg]: https://img-blog.csdnimg.cn/20200624163055440.jpg
[20200624163125766.png]: https://img-blog.csdnimg.cn/20200624163125766.png
[2020062416314628.png]: https://img-blog.csdnimg.cn/2020062416314628.png