当前位置:Gxlcms > html代码 > 仿新浪部分静态页面展示

仿新浪部分静态页面展示

时间:2021-07-01 10:21:17 帮助过:10人阅读

  1. <span style="color: #008080"> 1</span> <span style="color: #800000"><!DOCTYPE html>
  2. </span><span style="color: #008080"> 2</span> <span style="color: #800000"><html xmlns="http://www.w3.org/1999/xhtml">
  3. </span><span style="color: #008080"> 3</span> <span style="color: #800000"><head>
  4. </span><span style="color: #008080"> 4</span> <span style="color: #800000"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. </span><span style="color: #008080"> 5</span> <span style="color: #800000"> <title></title>
  6. </span><span style="color: #008080"> 6</span> <span style="color: #800000"> <link href="css/demo.css" rel="stylesheet" />
  7. </span><span style="color: #008080"> 7</span> <span style="color: #800000"></head>
  8. </span><span style="color: #008080"> 8</span> <span style="color: #800000"><body>
  9. </span><span style="color: #008080"> 9</span> <span style="color: #800000"> <div id="dnews">
  10. </span><span style="color: #008080">10</span> <span style="color: #800000"> <div id="dhead"><a href="#" target="_blank" >汽车/在线购车</a></div>
  11. </span><span style="color: #008080">11</span> <span style="color: #800000"> <div id="news">
  12. </span><span style="color: #008080">12</span> <span style="color: #800000"> <div id="newspic"><a href="#"><img src="img/1.jpg" /></a></div>
  13. </span><span style="color: #008080">13</span> <span style="color: #800000"> <div id="newstitle"><a href="#">选贵的也要选对的 热销豪华中型SUV推荐</a></div>
  14. </span><span style="color: #008080">14</span> <span style="color: #800000"> </div>
  15. </span><span style="color: #008080">15</span> <span style="color: #800000"> <ul id="tabs">
  16. </span><span style="color: #008080">16</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
  17. </span><span style="color: #008080">17</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
  18. </span><span style="color: #008080">18</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
  19. </span><span style="color: #008080">19</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
  20. </span><span style="color: #008080">20</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
  21. </span><span style="color: #008080">21</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
  22. </span><span style="color: #008080">22</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
  23. </span><span style="color: #008080">23</span> <span style="color: #800000"> </ul>
  24. </span><span style="color: #008080">24</span> <span style="color: #800000"> </div>
  25. </span><span style="color: #008080">25</span> <span style="color: #800000"></body>
  26. </span><span style="color: #008080">26</span> <span style="color: #800000"></html></span>
  1. <span style="color: #008080"> 1</span> <span style="color: #800000">a</span>{
  2. <span style="color: #008080"> 2</span> <span style="color: #ff0000"> text-decoration</span>:<span style="color: #0000ff">none</span>;
  3. <span style="color: #008080"> 3</span> }
  4. <span style="color: #008080"> 4</span> <span style="color: #800000">#dnews</span>{
  5. <span style="color: #008080"> 5</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>;
  6. <span style="color: #008080"> 6</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">264px</span>;
  7. <span style="color: #008080"> 7</span>
  8. <span style="color: #008080"> 8</span> }
  9. <span style="color: #008080"> 9</span> <span style="color: #800000">#dhead</span>{
  10. <span style="color: #008080">10</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>;
  11. <span style="color: #008080">11</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">30px</span>;
  12. <span style="color: #008080">12</span> <span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff">10px</span>;
  13. <span style="color: #008080">13</span> <span style="color: #ff0000"> box-sizing</span>:<span style="color: #0000ff">border-box</span>;
  14. <span style="color: #008080">14</span> <span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff">30px</span>;
  15. <span style="color: #008080">15</span> <span style="color: #ff0000"> background-color</span>:<span style="color: #0000ff">rgba(76,255,0,0.1)</span>;
  16. <span style="color: #008080">16</span> }
  17. <span style="color: #008080">17</span> <span style="color: #800000">#dnews #dhead a:hover</span>{
  18. <span style="color: #008080">18</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">blue</span>;
  19. <span style="color: #008080">19</span> }
  20. <span style="color: #008080">20</span> <span style="color: #800000">#news</span>{
  21. <span style="color: #008080">21</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>;
  22. <span style="color: #008080">22</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">70px</span>;
  23. <span style="color: #008080">23</span> <span style="color: #ff0000"> margin-top</span>:<span style="color: #0000ff">10px</span>;
  24. <span style="color: #008080">24</span> }
  25. <span style="color: #008080">25</span> <span style="color: #800000">#news #newspic</span>{
  26. <span style="color: #008080">26</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff">left</span>;
  27. <span style="color: #008080">27</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff"> 36%</span>;
  28. <span style="color: #008080">28</span> }
  29. <span style="color: #008080">29</span> <span style="color: #800000">#news #newstitle</span>{
  30. <span style="color: #008080">30</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff"> 64%</span>;
  31. <span style="color: #008080">31</span> <span style="color: #008000">/*</span><span style="color: #008000"> padding-left: 10px; </span><span style="color: #008000">*/</span>
  32. <span style="color: #008080">32</span> <span style="color: #ff0000"> font-size</span>:<span style="color: #0000ff"> 16px</span>;
  33. <span style="color: #008080">33</span> <span style="color: #008000">/*</span><span style="color: #008000"> margin-left: 5px; </span><span style="color: #008000">*/</span>
  34. <span style="color: #008080">34</span> <span style="color: #008000">/*</span><span style="color: #008000"> padding-left: 4px; </span><span style="color: #008000">*/</span>
  35. <span style="color: #008080">35</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff"> left</span>;
  36. <span style="color: #008080">36</span> }
  37. <span style="color: #008080">37</span> <span style="color: #800000">#news #newstitle a:hover</span>{
  38. <span style="color: #008080">38</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">blue</span>;
  39. <span style="color: #008080">39</span> }
  40. <span style="color: #008080">40</span> <span style="color: #800000">#tabs</span>{
  41. <span style="color: #008080">41</span> <span style="color: #ff0000"> list-style-type</span>:<span style="color: #0000ff">none</span>;
  42. <span style="color: #008080">42</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">black</span>;
  43. <span style="color: #008080">43</span> <span style="color: #ff0000"> font-size</span>:<span style="color: #0000ff">14px</span>;
  44. <span style="color: #008080">44</span> <span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff">20px</span>;
  45. <span style="color: #008080">45</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff">left</span>;
  46. <span style="color: #008080">46</span> <span style="color: #ff0000"> margin</span>:<span style="color: #0000ff"> 0px -40px</span>;
  47. <span style="color: #008080">47</span>
  48. <span style="color: #008080">48</span> }
  49. <span style="color: #008080">49</span> <span style="color: #800000">#tabs .tab a:hover</span>{
  50. <span style="color: #008080">50</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">red</span>;
  51. <span style="color: #008080">51</span> }
  52. <span style="color: #008080">52</span> <span style="color: #800000">.tab</span>{
  53. <span style="color: #008080">53</span> <span style="color: #ff0000"> background-image</span>:<span style="color: #0000ff">url(../img/2.png)</span>;
  54. <span style="color: #008080">54</span> <span style="color: #ff0000"> background-repeat</span>:<span style="color: #0000ff">no-repeat</span>;
  55. <span style="color: #008080">55</span> <span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff">20px</span>;
  56. <span style="color: #008080">56</span> <span style="color: #ff0000"> background-position-y</span>:<span style="color: #0000ff">center</span>;
  57. <span style="color: #008080">57</span> }

 

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

人气教程排行