码迷,mamicode.com
首页 > Web开发 > 详细

CSS案例

时间:2018-02-17 12:35:59      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:ora   html   utf-8   auto   gif   lis   lin   repeat   ash   

 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案例

标签:ora   html   utf-8   auto   gif   lis   lin   repeat   ash   

原文地址:https://www.cnblogs.com/L-Pxiaotiancai/p/8451677.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!