新闻列表综合案例

喜欢ヅ旅行 2023-02-17 01:16 13阅读 0赞

所需素材：  
arr.jpg  
![在这里插入图片描述][20200610152836123.jpg]

line.jpg  
![在这里插入图片描述][20200610152857494.jpg]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ 
    			margin: 0;
    			padding: 0;
    		}
    		.news { 
    			width: 290px;
    			height: 190px;
    			padding: 15px;
    			margin: 100px auto;
    			border: 1px solid #ccc;
    			background-image: url(image/line.jpg);
    		}
    		h2 { 
    			border-bottom: 1px solid #ccc;
    			padding: 5px
    			margin-bottom: 10px;
    			font-size: 18px;
    		}
    		ul li { 
    			height: 30px;
    			line-height: 30px;
    			padding-left: 20px;
    			list-style: none;
    			border-bottom: 1px dashed #ccc;
    			background: url(image/arr.jpg) no-repeat left ;
    		}
    		ul li a{ 
    					text-decoration: none;
    					font-size:  12px;
    					color: #333;
    		}
    	</style>
    </head>
    
    <body>
    	<div class="news">
    		<h2>
    			最新文章/New Articles
    		</h2>
    		<ul>
    			<li>
    				<a href="#"> 北京招聘网页设计，平面设计，php
    				</a>
    			</li>
    			<li><a href="#">体验javascript的魅力 </a></li>
    			<li><a href="#">jquery世界来临 </a></li>
    			<li><a href="#">网页设计师的梦想 </a></li>
    			<li><a href="#">jquery中的链式编程是什么</a></li>
    		</ul>
    	</div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]

[20200610152836123.jpg]: https://img-blog.csdnimg.cn/20200610152836123.jpg
[20200610152857494.jpg]: https://img-blog.csdnimg.cn/20200610152857494.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200610152735608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1,size_16,color_FFFFFF,t_70