Rumah > Artikel > hujung hadapan web > 仿新浪部分静态页面展示
仿新浪部分静态页面展示
- PHP中文网asal
- 2017-07-14 18:15:141589semak imbas
<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> }
Atas ialah kandungan terperinci 仿新浪部分静态页面展示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：前端框架-弹窗的研究Artikel seterusnya： canvas基础的学习