3
4 5Home >Web Front-end >H5 Tutorial >Imitation of Sina's partial static page display
<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> }
The above is the detailed content of Imitation of Sina's partial static page display. For more information, please follow other related articles on the PHP Chinese website!