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="#">罗罗诺亚·索隆(RoronoaZoro)</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
新闻热点
疑难解答