主体代码如下:
1 < html >2 < head >
3 < meta charset ="utf-8" >
4 < title >海贼王悬赏令 </ title >
5 < link rel ="stylesheet" type ="text/css" href ="style.css" >
6 </ head >
7 < body >
8 < h1 >海贼王悬赏令 </ h1 >
9 < div id ="onepiece" >
10 < ul >
11 < li >
12 < div class ="title" >
13 < a href ="#" >蒙奇·D·路飞(モンキー·D·ルフィ,Monkey·D·Luffy) </ a >
14 < span >恶魔果实:橡胶果实 < br >悬赏:3千万(可可亚西村事件)→1亿(阿拉巴斯坦事件)→3亿(司法岛事件)→4亿(顶上战争后) </ span >
15 </ div >
16 < a href ="#" >
17 < img src ="images/1.jpg" >
18 </ a >
19 </ li >
20 < li >
21 < div class ="title" >
22 < a href ="#" >妮可·罗宾(ニコ·ロビン ,Nico·Robin) </ a >
23 < span >恶魔果实:超人系花花果实 < br >悬赏:7900万贝利(奥哈拉事件)→8000万贝利(司法岛事件) </ span >
24 </ div >
25 < a href ="#" >
26 < img src ="images/2.jpg" >
27 </ a >
28 </ li >
29 < li >
30 < div class ="title" >
31 < a href ="#" >娜美(ナミ,Nami) </ a >
32 < span >< br >悬赏:1600万(司法岛事件) </ span >
33 </ div >
34 < a href ="#" >
35 < img src ="images/3.jpg" >
36 </ a >
37 </ li >
38 < li >
39 < div class ="title" >
40 < a href ="#" >托尼托尼·乔巴(トニートニーチョッパー,Tony Tony Chopper) </ a >
41 < span >恶魔果实:动物系人人果实 < br >悬赏:50贝利(司法岛事件) </ span >
42 </ div >
43 < a href ="#" >
44 < img src ="images/4.jpg" >
45 </ a >
46 </ li >
47 < li >
48 < div class ="title" >
49 < a href ="#" >山治(サンジ,Sanji) </ a >
50 < span >< br >悬赏:7700万(司法岛事件) </ span >
51 </ div >
52 < a href ="#" >
53 < img src ="images/5.jpg" >
54 </ a >
55 </ li >
56 < li >
57 < div class ="title" >
58 < a href ="#" >乌索普(ウソップ,Usopp) </ a >
59 < span >< br >悬赏:3000万(司法岛事件) </ span >
60 </ div >
61 < a href ="#" >
62 < img src ="images/6.jpg" >
63 </ a >
64 </ li >
65 < li >
66 < div class ="title" >
67 < a href ="#" >罗罗诺亚·索隆(Roronoa Zoro) </ a >
68 < span >< br >悬赏:6千万(阿拉巴斯坦事件)→1亿2000万(司法岛事件) </ span >
69 </ div >
70 < a href ="#" >
71 < img src ="images/7.jpg" >
72 </ a >
73 </ li >
74 < li >
75 < div class ="title" >
76 < a href ="#" >布鲁克(ブルック, Brook) </ a >
77 < span >恶魔果实:超人系黄泉果实 < br >悬赏:3300万贝利 </ span >
78 </ div >
79 < a href ="#" >
80 < img src ="images/8.jpg" >
81 </ a >
82 </ li >
83 < li >
84 < div class ="title" >
85 < a href ="#" >弗兰奇(フランキー,Franky) </ a >
86 < span >< br >悬赏:4400万贝利(司法岛事件) </ span >
87 </ div >
88 < a href ="#" >
89 < img src ="images/9.jpg" >
90 </ a >
91 </ li >
92 </ ul >
93
94 </ div >
95 </ body >
96 </html>
CSS代码如下
利用了transition属性:
1 *{margin: 0;padding: 0}
2 body{
3 background-color: #cca;
4 }
5 ul{list-style: none;}
6 a{text-decoration: none;}
7 img{border: none;}
8 h1{
9 margin: 25px;
10 padding-bottom: 0;
11 text-align: center;
12 }
13
14
15 #onepiece{
16 width: 1170px;
17 height:630px;
18 overflow: hidden;
19 margin: 25px auto;
20 box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
21
22 }
23
24 #onepiece ul{
25 width:3000px;
26 }
27
28 #onepiece li{
29 display:block;
30 width: 130px;height: 630px;
31 position: relative;
32 float: left;
33 border-left: 1px solid #aaa;
34 box-shadow: 0 0 25px 10px rgba(0,0,0,0.4);
35 -moz-transition:all 0.5s;
36 -webkit-transition:all 0.5s;
37 transition:all 0.5s;
38
39 }
40
41 #onepiece li img{
42 display: block;
43 width:850;
44 }
45
46 #onepiece ul:hover li{
47 width: 45px;
48 }
49
50 #onepiece ul li:hover{
51 width:850px;
52 }
53
54
55
56 #onepiece .title{
57 position: absolute;
58 left:0; bottom:0;
59 width:850px;
60 background:rgba(0,0,0,0.5);
61 }
62
63 #onepiece .title a{
64 display: block;
65 color:#fff;
66 font-size: 16px;
67 padding: 5px;
68 }
69
70 #onepiece .title span{
71 display:block;
72 color:#ccc;
73 font-size: 16px;
74 font-style: italic;
75 padding-left: 5px;
76 padding-bottom:10px;
77 }