Heim > Web-Frontend > H5-Tutorial > Nachahmung der teilweise statischen Seitenanzeige von Sina

Nachahmung der teilweise statischen Seitenanzeige von Sina

PHP中文网
Freigeben: 2017-07-14 18:15:14
Original
1633 Leute haben es durchsucht
<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>
Nach dem Login kopieren
<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> }
Nach dem Login kopieren

 

Das obige ist der detaillierte Inhalt vonNachahmung der teilweise statischen Seitenanzeige von Sina. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage