仿新浪部分静态页面展示

 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 }
    

以上就是仿新浪部分静态页面展示的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！