仿新浪部分静态页面展示

116 阅读 0 评论 77 点赞

我是靠谱客的博主冷艳手链，最近开发中收集的这篇文章主要介绍仿新浪部分静态页面展示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <link href="css/demo.css" rel="stylesheet" />
 7 </head>
 8 <body>
 9     <div id="dnews">
10         <div id="dhead"><a href="#" target="_blank" >汽车/在线购车</a></div>
11         <div id="news">
12             <div id="newspic"><a href="#"><img src="img/1.jpg" /></a></div>
13             <div id="newstitle"><a href="#">选贵的也要选对的 热销豪华中型SUV推荐</a></div>
14         </div>
15         <ul id="tabs">
16             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
17             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
18             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
19             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
20             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
21             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
22             <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
23         </ul>
24     </div>
25 </body>
26 </html>
登录后复制

 1 a{
 2     text-decoration:none;
 3 }
 4 #dnews{
 5     width:320px;
 6     height:264px;
 7   
 8 }
 9 #dhead{
10     width:320px;
11     height:30px;
12     padding-left:10px;
13     box-sizing:border-box;
14     line-height:30px;
15     background-color:rgba(76,255,0,0.1);
16 }
17 #dnews #dhead a:hover{
18     color:blue;
19 }
20 #news{
21     width:320px;
22     height:70px; 
23     margin-top:10px;
24 }
25 #news #newspic{
26     float:left;
27     width: 36%;
28 }
29 #news #newstitle{
30       width: 64%;
31     /* padding-left: 10px; */
32     font-size: 16px;
33     /* margin-left: 5px; */
34     /* padding-left: 4px; */
35     float: left;
36 }
37 #news #newstitle a:hover{
38     color:blue;
39 }
40 #tabs{
41     list-style-type:none;
42     color:black;
43     font-size:14px;
44     line-height:20px;
45     float:left;
46     margin: 0px  -40px;
47       
48 }
49 #tabs .tab a:hover{
50     color:red;
51 }
52 .tab{
53     background-image:url(../img/2.png);
54     background-repeat:no-repeat;
55     padding-left:20px;
56     background-position-y:center;
57 }
登录后复制