【Web】CSS（No.21）Css经典案例（三）《爱宠知识》

最新推荐文章于 2022-11-22 10:12:10 发布

Sherry Lupus

最新推荐文章于 2022-11-22 10:12:10 发布

阅读量2.8k

点赞数 8

分类专栏： Web-Css 文章标签： Web Css

本文链接：https://blog.csdn.net/qq_43251850/article/details/91489859

版权

Web-Css 专栏收录该内容

25 篇文章 5 订阅

订阅专栏

需要素材点击图片联系我或私信、评论

效果图：

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>爱宠知识</title>
	<style>
	  * {
	  	margin:0;
	  	padding:0;
	  }

	  .box {
	  	margin:20px auto;
	  	width:320px;
	  	height:420px;
	  	background-image:url(img/bg.gif);
	  	border:1.5px solid #009900;
	  }

	  .tle {
	  	border-left:5px solid #c9e143;
	  	color:white;
	  	font-size:23px;
	  	margin:20px 15px 10px 15px;
	  	padding-left:5px;
	  }

	  .news {
	  	background-color:white;
	  	margin:5px 15px 10px 15px;
	  }

	  .news ul li {
	  	list-style:none;
	  	border-bottom:1px dashed #a1aeb1;
	  	margin:5px 5px 5px 5px;
	  	padding-top:5px;
	  	padding-bottom:7px;
	  }

	  .news ul li a {
	  	font-size:15px;
	  	font-color:#0066cc;
	  	text-decoration:none;
	  }

	  a:link{
	  	     color:#0066cc;
	        }
	  a:visited{
	  	        color:#0066cc;
	           }
	  a:hover{
	  	      color:red;
	         }
	  a:active{
	  	       color:grey;
	          }
	</style>
  </head>
  <body>
	<div class="box">
	  <div class="tle">
	    <h4>爱宠知识</h4>
	  </div>

	  <div class="news">
	    <ul>
	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">养狗比养猫对健康更有利</a>
	      </li>

	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">日本正宗柴犬亮相，你怎么看柴犬？</a>
	      </li>

	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">狗狗歌曲《新年旺旺》</a>
	      </li>

	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">带宠兜风，开车带宠需要注意什么？</a>
	      </li>

	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">【爆笑】这狗狗太不给力了</a>
	      </li>

	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">狗狗与男童相同着装拍有爱造型照</a>
	      </li>

	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">狗狗各个阶段健康大事件</a>
	      </li>

	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a>
	      </li>

	      <li>
	        <img src="img/tb.gif" alt="">
	        <a href="#">为什么每次大小便后，会用脚踢土？</a>
	      </li>
	    </ul>
	  </div>
	</div>
  </body>
</html>

Sherry Lupus

关注

8
点赞
踩
31

收藏

觉得还不错? 一键收藏
2
评论
【Web】CSS（No.21）Css经典案例（三）《爱宠知识》

需要素材点击图片联系我或私信、评论效果图：源码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>爱宠知识</title> <style> * { margin:0; padding:0;...
复制链接

扫一扫