CSS手風琴效果
主體代碼如下：
1<html>2<head>3<metacharset="utf-8">4<title>海賊王懸賞令</title>5<linkrel="stylesheet"type="text/css"href="style.css">6</head>7<body>8<h1>海賊王懸賞令</h1>9<divid="onepiece">10<ul>11<li>12<divclass="title">13<ahref="#">蒙奇·D·路飛（モンキー·D·ルフィ,Monkey·D·Luffy）</a>14<span>惡魔果實：橡膠果實<br>懸賞：3千萬（可可亞西村事件）→1億（阿拉巴斯坦事件）→3億（司法島事件)→4億（頂上戰爭后）</span>15</div>16<ahref="#">17<imgsrc="images/1.jpg">18</a>19</li>20<li>21<divclass="title">22<ahref="#">妮可·羅賓（ニコ·ロビン，Nico·Robin）</a>23<span>惡魔果實：超人系花花果實<br>懸賞：7900萬貝利（奧哈拉事件）→8000萬貝利（司法島事件）</span>24</div>25<ahref="#">26<imgsrc="images/2.jpg">27</a>28</li>29<li>30<divclass="title">31<ahref="#">娜美（ナミ，Nami）</a>32<span><br>懸賞：1600萬（司法島事件）</span>33</div>34<ahref="#">35<imgsrc="images/3.jpg">36</a>37</li>38<li>39<divclass="title">40<ahref="#">托尼托尼·喬巴（トニートニーチョッパー，TonyTonyChopper）</a>41<span>惡魔果實：動物系人人果實<br>懸賞：50貝利（司法島事件）</span>42</div>43<ahref="#">44<imgsrc="images/4.jpg">45</a>46</li>47<li>48<divclass="title">49<ahref="#">山治（サンジ，Sanji）</a>50<span><br>懸賞：7700萬（司法島事件）</span>51</div>52<ahref="#">53<imgsrc="images/5.jpg">54</a>55</li>56<li>57<divclass="title">58<ahref="#">烏索普（ウソップ，Usopp）</a>59<span><br>懸賞：3000萬（司法島事件）</span>60</div>61<ahref="#">62<imgsrc="images/6.jpg">63</a>64</li>65<li>66<divclass="title">67<ahref="#">羅羅諾亞·索?。≧oronoaZoro）</a>68<span><br>懸賞：6千萬（阿拉巴斯坦事件）→1億2000萬（司法島事件）</span>69</div>70<ahref="#">71<imgsrc="images/7.jpg">72</a>73</li>74<li>75<divclass="title">76<ahref="#">布魯克（ブルック，Brook）</a>77<span>惡魔果實：超人系黃泉果實<br>懸賞：3300萬貝利</span>78</div>79<ahref="#">80<imgsrc="images/8.jpg">81</a>82</li>83<li>84<divclass="title">85<ahref="#">弗蘭奇（フランキー，Franky）</a>86<span><br>懸賞：4400萬貝利（司法島事件）</span>87</div>88<ahref="#">89<imgsrc="images/9.jpg">90</a>91</li>92</ul>9394</div>95</body>96</html>
CSS代碼如下
利用了transition屬性：
1*{margin:0;padding:0}2body{3background-color:#cca;4}5ul{list-style:none;}6a{text-decoration:none;}7img{border:none;}8h1{9margin:25px;10padding-bottom:0;11text-align:center;12}131415#onepiece{16width:1170px;17height:630px;18overflow:hidden;19margin:25pxauto;20box-shadow:0010px2pxrgba(0,0,0,0.4);2122}2324#onepieceul{25width:3000px;26}2728#onepieceli{29display:block;30width:130px;height:630px;31position:relative;32float:left;33border-left:1pxsolid#aaa;34box-shadow:0025px10pxrgba(0,0,0,0.4);35-moz-transition:all0.5s;36-webkit-transition:all0.5s;37transition:all0.5s;3839}4041#onepieceliimg{42display:block;43width:850;44}4546#onepieceul:hoverli{47width:45px;48}4950#onepieceulli:hover{51width:850px;52}53545556#onepiece.title{57position:absolute;58left:0;bottom:0;59width:850px;60background:rgba(0,0,0,0.5);61}6263#onepiece.titlea{64display:block;65color:#fff;66font-size:16px;67padding:5px;68}6970#onepiece.titlespan{71display:block;72color:#ccc;73font-size:16px;74font-style:italic;75padding-left:5px;76padding-bottom:10px;77}
因剛接觸這個時間不久
如有不足的地方還請各位指出，
不勝感激 。
演示鏈接：
http://white-quality.qiniudn.com/index.html
下載地址 ：
http://pan.baidu.com/s/1pJpyjyF
新聞熱點
疑難解答
