仿新浪部分静态页面展示
- PHP中文网原创
- 2017-07-14 18:15:141625浏览
<span style="color: #008080"> 1</span> <span style="color: #800000"><!DOCTYPE html> </span><span style="color: #008080"> 2</span> <span style="color: #800000"><html xmlns="http://www.w3.org/1999/xhtml"> </span><span style="color: #008080"> 3</span> <span style="color: #800000"><head> </span><span style="color: #008080"> 4</span> <span style="color: #800000"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </span><span style="color: #008080"> 5</span> <span style="color: #800000"> <title></title> </span><span style="color: #008080"> 6</span> <span style="color: #800000"> <link href="css/demo.css" rel="stylesheet" /> </span><span style="color: #008080"> 7</span> <span style="color: #800000"></head> </span><span style="color: #008080"> 8</span> <span style="color: #800000"><body> </span><span style="color: #008080"> 9</span> <span style="color: #800000"> <div id="dnews"> </span><span style="color: #008080">10</span> <span style="color: #800000"> <div id="dhead"><a href="#" target="_blank" >汽车/在线购车</a></div> </span><span style="color: #008080">11</span> <span style="color: #800000"> <div id="news"> </span><span style="color: #008080">12</span> <span style="color: #800000"> <div id="newspic"><a href="#"><img src="img/1.jpg" /></a></div> </span><span style="color: #008080">13</span> <span style="color: #800000"> <div id="newstitle"><a href="#">选贵的也要选对的 热销豪华中型SUV推荐</a></div> </span><span style="color: #008080">14</span> <span style="color: #800000"> </div> </span><span style="color: #008080">15</span> <span style="color: #800000"> <ul id="tabs"> </span><span style="color: #008080">16</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">17</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">18</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">19</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">20</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">21</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">22</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">23</span> <span style="color: #800000"> </ul> </span><span style="color: #008080">24</span> <span style="color: #800000"> </div> </span><span style="color: #008080">25</span> <span style="color: #800000"></body> </span><span style="color: #008080">26</span> <span style="color: #800000"></html></span>
<span style="color: #008080"> 1</span> <span style="color: #800000">a</span>{
<span style="color: #008080"> 2</span> <span style="color: #ff0000"> text-decoration</span>:<span style="color: #0000ff">none</span>;
<span style="color: #008080"> 3</span> }
<span style="color: #008080"> 4</span> <span style="color: #800000">#dnews</span>{
<span style="color: #008080"> 5</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>;
<span style="color: #008080"> 6</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">264px</span>;
<span style="color: #008080"> 7</span>
<span style="color: #008080"> 8</span> }
<span style="color: #008080"> 9</span> <span style="color: #800000">#dhead</span>{
<span style="color: #008080">10</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>;
<span style="color: #008080">11</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">12</span> <span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff">10px</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000"> box-sizing</span>:<span style="color: #0000ff">border-box</span>;
<span style="color: #008080">14</span> <span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">15</span> <span style="color: #ff0000"> background-color</span>:<span style="color: #0000ff">rgba(76,255,0,0.1)</span>;
<span style="color: #008080">16</span> }
<span style="color: #008080">17</span> <span style="color: #800000">#dnews #dhead a:hover</span>{
<span style="color: #008080">18</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">blue</span>;
<span style="color: #008080">19</span> }
<span style="color: #008080">20</span> <span style="color: #800000">#news</span>{
<span style="color: #008080">21</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>;
<span style="color: #008080">22</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">70px</span>;
<span style="color: #008080">23</span> <span style="color: #ff0000"> margin-top</span>:<span style="color: #0000ff">10px</span>;
<span style="color: #008080">24</span> }
<span style="color: #008080">25</span> <span style="color: #800000">#news #newspic</span>{
<span style="color: #008080">26</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff">left</span>;
<span style="color: #008080">27</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff"> 36%</span>;
<span style="color: #008080">28</span> }
<span style="color: #008080">29</span> <span style="color: #800000">#news #newstitle</span>{
<span style="color: #008080">30</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff"> 64%</span>;
<span style="color: #008080">31</span> <span style="color: #008000">/*</span><span style="color: #008000"> padding-left: 10px; </span><span style="color: #008000">*/</span>
<span style="color: #008080">32</span> <span style="color: #ff0000"> font-size</span>:<span style="color: #0000ff"> 16px</span>;
<span style="color: #008080">33</span> <span style="color: #008000">/*</span><span style="color: #008000"> margin-left: 5px; </span><span style="color: #008000">*/</span>
<span style="color: #008080">34</span> <span style="color: #008000">/*</span><span style="color: #008000"> padding-left: 4px; </span><span style="color: #008000">*/</span>
<span style="color: #008080">35</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff"> left</span>;
<span style="color: #008080">36</span> }
<span style="color: #008080">37</span> <span style="color: #800000">#news #newstitle a:hover</span>{
<span style="color: #008080">38</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">blue</span>;
<span style="color: #008080">39</span> }
<span style="color: #008080">40</span> <span style="color: #800000">#tabs</span>{
<span style="color: #008080">41</span> <span style="color: #ff0000"> list-style-type</span>:<span style="color: #0000ff">none</span>;
<span style="color: #008080">42</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">black</span>;
<span style="color: #008080">43</span> <span style="color: #ff0000"> font-size</span>:<span style="color: #0000ff">14px</span>;
<span style="color: #008080">44</span> <span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">45</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff">left</span>;
<span style="color: #008080">46</span> <span style="color: #ff0000"> margin</span>:<span style="color: #0000ff"> 0px -40px</span>;
<span style="color: #008080">47</span>
<span style="color: #008080">48</span> }
<span style="color: #008080">49</span> <span style="color: #800000">#tabs .tab a:hover</span>{
<span style="color: #008080">50</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">red</span>;
<span style="color: #008080">51</span> }
<span style="color: #008080">52</span> <span style="color: #800000">.tab</span>{
<span style="color: #008080">53</span> <span style="color: #ff0000"> background-image</span>:<span style="color: #0000ff">url(../img/2.png)</span>;
<span style="color: #008080">54</span> <span style="color: #ff0000"> background-repeat</span>:<span style="color: #0000ff">no-repeat</span>;
<span style="color: #008080">55</span> <span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">56</span> <span style="color: #ff0000"> background-position-y</span>:<span style="color: #0000ff">center</span>;
<span style="color: #008080">57</span> }
以上是仿新浪部分静态页面展示的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：前端框架-弹窗的研究下一篇： canvas基础的学习