Rumah > Artikel > hujung hadapan web > 静态轮播图
静态轮播图
- PHP中文网asal
- 2017-07-14 18:10:032001semak 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="dlunbo"> </span><span style="color: #008080">10</span> <span style="color: #800000"><div id="igs"> </span><span style="color: #008080">11</span> <span style="color: #800000"><div class="ig"><img src="img/1_1.jpg" /></div> </span><span style="color: #008080">12</span> <span style="color: #800000"><div class="ig"><img src="img/1_2.jpg" /></div> </span><span style="color: #008080">13</span> <span style="color: #800000"><div class="ig"><img src="img/1_3.png" /></div> </span><span style="color: #008080">14</span> <span style="color: #800000"><div class="ig"><img src="img/1_4.jpg" /></div> </span><span style="color: #008080">15</span> <span style="color: #800000"><div class="ig"><img src="img/1_5.jpg" /></div> </span><span style="color: #008080">16</span> <span style="color: #800000"></div> </span><span style="color: #008080">17</span> <span style="color: #800000"><ul id="tabs"> </span><span style="color: #008080">18</span> <span style="color: #800000"><li class="tab"></li> </span><span style="color: #008080">19</span> <span style="color: #800000"><li class="tab"></li> </span><span style="color: #008080">20</span> <span style="color: #800000"><li class="tab"></li> </span><span style="color: #008080">21</span> <span style="color: #800000"><li class="tab"></li> </span><span style="color: #008080">22</span> <span style="color: #800000"><li class="tab"></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 class="btn btn1" ><</div> </span><span style="color: #008080">25</span> <span style="color: #800000"><div class="btn btn2">></div> </span><span style="color: #008080">26</span> <span style="color: #800000"></div> </span><span style="color: #008080">27</span> <span style="color: #800000"></body> </span><span style="color: #008080">28</span> <span style="color: #800000"></html><br></span>
<span style="color: #008080"> 1</span> <span style="color: #800000">*</span>{
<span style="color: #008080"> 2</span> <span style="color: #ff0000">margin</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080"> 3</span> <span style="color: #ff0000">padding</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080"> 4</span> <span style="color: #ff0000">list-style-type</span>:<span style="color: #0000ff">none</span>;
<span style="color: #008080"> 5</span> }
<span style="color: #008080"> 6</span> <span style="color: #800000">#dlunbo</span>{
<span style="color: #008080"> 7</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">500px</span>;
<span style="color: #008080"> 8</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">330px</span>;
<span style="color: #008080"> 9</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">10</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">11</span> <span style="color: #ff0000">margin-top</span>:<span style="color: #0000ff">-166px</span>;
<span style="color: #008080">12</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000">margin-left</span>:<span style="color: #0000ff">-250px</span>;
<span style="color: #008080">14</span> }
<span style="color: #008080">15</span> <span style="color: #800000">.ig</span>{
<span style="color: #008080">16</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">17</span> }
<span style="color: #008080">18</span> <span style="color: #800000">img</span>{
<span style="color: #008080">19</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">500px</span>;
<span style="color: #008080">20</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">330px</span>;
<span style="color: #008080">21</span> }
<span style="color: #008080">22</span> <span style="color: #800000">#tabs</span>{
<span style="color: #008080">23</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">24</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">300px</span>;
<span style="color: #008080">25</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">200px</span>;
<span style="color: #008080">26</span> }
<span style="color: #008080">27</span> <span style="color: #800000">.tab</span>{
<span style="color: #008080">28</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">29</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">30</span> <span style="color: #ff0000">border</span>:<span style="color: #0000ff">solid 1px #ffffff</span>;
<span style="color: #008080">31</span> <span style="color: #ff0000">float</span>:<span style="color: #0000ff">left</span>;
<span style="color: #008080">32</span> <span style="color: #ff0000">margin-left</span>:<span style="color: #0000ff">5px</span>;
<span style="color: #008080">33</span> <span style="color: #ff0000">border-radius</span>:<span style="color: #0000ff">100%</span>;
<span style="color: #008080">34</span> <span style="color: #ff0000">cursor</span>:<span style="color: #0000ff">pointer</span>;
<span style="color: #008080">35</span> }
<span style="color: #008080">36</span> <span style="color: #800000">.btn</span>{
<span style="color: #008080">37</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">38</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">50px</span>;
<span style="color: #008080">39</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">40</span> <span style="color: #ff0000">background</span>:<span style="color: #0000ff">rgba(0,0,0,0.5)</span>;
<span style="color: #008080">41</span> <span style="color: #ff0000">color</span>:<span style="color: #0000ff">#fff</span>;
<span style="color: #008080">42</span> <span style="color: #ff0000">text-align</span>:<span style="color: #0000ff">center</span>;
<span style="color: #008080">43</span> <span style="color: #ff0000">line-height</span>:<span style="color: #0000ff">50px</span>;
<span style="color: #008080">44</span> <span style="color: #ff0000">font-size</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">45</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">46</span> <span style="color: #ff0000">margin-top</span>:<span style="color: #0000ff">-25px</span>;
<span style="color: #008080">47</span> <span style="color: #ff0000">cursor</span>:<span style="color: #0000ff">pointer</span>;
<span style="color: #008080">48</span> }
<span style="color: #008080">49</span> <span style="color: #800000">.btn1</span>{
<span style="color: #008080">50</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080">51</span> }
<span style="color: #008080">52</span> <span style="color: #800000">.btn2</span>{
<span style="color: #008080">53</span> <span style="color: #ff0000">right</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080">54</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：CSS border属性深度讲解Artikel seterusnya：比较css3中transition和animation的区别与联系