1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<style type="text/css"> 7 ????????????body,ul,li{ 8 ????????????????margin: 0; 9 ????????????????padding: 0;10 ????????????}11 ????????????.box{12 ????????????????width: 260px;13 ????????????????height: 327px;14 ????????????????border: 1px solid #009900;15 ????????????????background: url(../05-练习/bg.gif);16 ????????????????margin: 10px auto ;17 ????????????????????????????}18 ????????????ul,li{19 ????????????????list-style: none;20 ????????????} ???21 ????????????ul{22 ?????????????????;23 ????????????????height: 279px;24 ????????????????width: 210px;25 ????????????????background-color: #fff;26 ????????????????margin-left: 10px;27 ????????????????padding: 0 15px;28 ????????????????29 ????????????????30 ????????????}31 ????????????li a{32 ?????????????????text-decoration: none; ???????????????33 ????????????}34 ????????????li{35 ????????????????height: 30px;36 ????????????????line-height: 30px;37 ????????????????border-bottom: dashed 1px #666;38 ????????????????padding-left: 16px; ;39 ????????????????background: url(../05-练习/tb.gif) no-repeat left center;40 ????????????}41 ????????????.box .title{42 ????????????????height: 23px;43 ????????????????margin: 10px 0 5px 10px;44 ????????????????border-left: 4px solid #C9E143;45 ????????????????font: "微软雅黑" 16 px ; ???46 ????????????????color: #fff;47 ????????????????padding-left:11px ; ???48 ????????????????line-height: 23px;49 ????????????}50 ????????</style>51 ????</head>52 ????<body>53 ????????<div class="box">54 ????????????<div class="title">爱宠知识</div>55 ????????????????<ul>56 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>57 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>58 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>59 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>60 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>61 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>62 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>63 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>64 ????????????????????<li><a href="#">养狗比养猫更健康</a></li>65 ????????????????????66 ????????????????</ul>67 ????????????68 ????????</div>69 ????</body>70 </html>CSS案例
原文地址：https://www.cnblogs.com/L-Pxiaotiancai/p/8451677.html