首页 > > 网页制作 > css >

新闻框

2018-06-24 01:42:54来源：未知阅读 ()

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             * {
 8                 margin: 0;
 9                 padding: 0;
10             }
11             body {
12                 font: arial simsun;
13             }
14             .jdexpress {
15                 margin: 200px;
16                 width: 248px;
17                 height: 163px;
18                 border: 1px solid #e4e4e4;
19             }
20             .jdexpress .hd {
21                 height: 32px;
22                 border-bottom: 1px dotted #e8e8e7;
23                 padding: 0 16px;
24             }
25             .jdexpress .hd h3 {
26                 float: left;
27                 font: 16px/32px "microsoft yahei",simsun;
28             }
29             .jdexpress .hd a.more {
30                 float: right;
31                 font: 16px/32px "microsoft yahei",simsun;
32                 text-decoration: none;
33                 color: #666;
34             }
35             .jdexpress .hd a.more span {
36                 color: #9f9f9f;
37                 font-family: "Consolas";
38             }
39             .jdexpress .bd {
40                 padding-top: 5px;
41                 padding-left: 15px;
42             }
43             .jdexpress .bd ul {
44                 list-style: none;
45             }
46             .jdexpress .bd ul li {
47                 font-size: 12px;
48                 line-height: 24px;
49             }
50             .jdexpress .bd ul li a {
51                 text-decoration: none;
52                 color: #666;
53             }
54             .jdexpress .bd ul li a span {
55                 font-weight: bold;
56                 color: #6f6f6f;
57             }
58         </style>
59     </head>
60     <body>
61         <div class="jdexpress">
62             <div class="hd">
63                 <h3>京东快报</h3>
64                 <a href="" class="more">更多 <span>&gt;</span></a>
65             </div>
66             <div class="bd">
67                 <ul>
68                     <li><a href="#"><span>[特惠]</span> 女神丝袜节99元3件</a></li>
69                     <li><a href="#"><span>[公告]</span> 地方特产馆助力初春农产品上行</a></li>
70                     <li><a href="#"><span>[特惠]</span> 春潮抢新 4核本再战999</a></li>
71                     <li><a href="#"><span>[公告]</span> 京东帮增至1340家 家电送到村</a></li>
72                     <li><a href="#"><span>[特惠]</span> 宝洁沐浴，爆款直降！</a></li>
73                 </ul>
74             </div>
75         </div>
76     </body>
77 </html>