仿新浪导航栏（固定定位练习）

太过爱你忘了你带给我的痛 2023-02-18 14:19 2阅读 0赞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .top{ 
    			position: fixed;
    			top: 0px;
    			height: 44px;
    			width: 100%;
    			text-align: center;
    		}
    		.box { 
    			width: 1000px;
    			margin: 44px auto;
    		}
    		.left, .right { 
    			position: fixed;
    			/*当使用绝对够定位时，margin-top和top 同时使用时，选择最大的起作用*/
    			margin-top: 200px;
    			top: 1px;
    			width: 120px;
    		}
    		.left { 
    			left: 0px;
    		}
    		.right { 
    			right: 0px;
    		}
    	</style>
    </head>
    <body>
    	<div class="top">
    		<img src="images/top.png" alt="">
    	</div>
    	<div class="box">
    		<img src="images/box.png" alt="">
    	</div>
    	<img src="images/ad-l.png" alt="" class="left">
    	<img src="images/ad-r.png" alt="" class="right">
    	
    </body>
    </html>

所用素材：  
![请添加图片描述][20200618114703229.png]![请添加图片描述][20200618114703272.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200618114728786.png]

[20200618114703229.png]: https://img-blog.csdnimg.cn/20200618114703229.png
[20200618114703272.png]: https://img-blog.csdnimg.cn/20200618114703272.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061811471142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1,size_16,color_FFFFFF,t_70
[20200618114728786.png]: https://img-blog.csdnimg.cn/20200618114728786.png