页面介绍：主要是电影资源网，分为热映部分和广告部分以及热门电影部分。
然后使用CSS的标题框模块等增强H5代码形成的框架感(我主要给最下面的底部和导航弄了CSS格式)。
主页面H5和CSS的代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
| <!DOCTYPE html >
<html >
<!--head部分-->
<head>
<meta charset=UTF-8">
<!--设置各种格式-->
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;<!--导引行字背景-->
}
li {
float: left;
}
li a {
display: gray;
color: blue;<!--字体颜色-->
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;<!--选中后背景-->
}
<!--底部的格式-->
#bottom{
margin:30px auto 0px auto;
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
}
#bottom .copyright{
float:left;
color:#999999;
font-family:"微软雅黑";
font-size:14px;}
</style>
</head>
<!--body部分-->
<body>
<!--头部显示 电影资源网-->
<ul>
<br></br>
<li><a href="javascript:;">电影购票</a></li>
<li><a href="detail/dianying.html">电影</a></li>
<li><a href="javascript:;">电视剧</a></li>
<li><a href="javascript:;">少儿</a></li>
<li><a href="javascript:;">其他</a></li>
<li><a href="javascript:;">圈子</a></li>
<li><a href="javascript:;">最热电影</a></li>
</ul>
<!--正在热映部分-->
<div id="main">
<div id="left">
<div class="is-on">
<div class="hd">
<h2>正在热映</h2>
<div class="right">
<a class="leftBtn" href="javascript:;"></a>
<a class="rightBtn" href="javascript:;"></a>
</div>
</div>
<div class="bd">
<div class="container">
<ul>
<li>
<a href="detail/mnyys.html"><img src="images/1.jpg" alt="" />
</a>
<p><a href="detail/mnyys.html">美女与野兽</a>
<span class="score">7.2分</span></p>
</li>
<li>
<a href="detail/thwj.html"><img src="images/2.jpg" alt="" />
</a>
<p><a href="detail/thwj.html">头号玩家</a>
<span class="score">8.7分</span></p>
</li>
<li>
<a href="detail/fwhyj.html"><img src="images/3.jpg" alt="" />
</a>
<p><a href="detail/fwhyj.html">飞屋环游记</a>
<span class="score">8.9分</span></p>
</li>
<li>
<a href="detail/mtyj.html">
<img src="images/4.jpg" alt="" />
</a>
<p><a href="detail/mtyj.html">摩天营救</a>
<span class="score">8.6分</span></p>
</li>
<li>
<a href="detail/yhhwd.html"><img src="images/5.jpg" alt="" />
</a>
<p><a href="detail/yhhwd.html">银河护卫队</a>
<span class="score">8.0分</span></p>
</li>
</ul>
</div>
</div>
</div>
<!--中间广告部分-->
<div class="banner">
<a href="javascript:;"><img src="images/banner2.jpg" /></a>
</div>
<!--热门电影部分-->
<div class="hot-film">
<div class="hot-film-top">
<h2>热门电影</h2>
<ul>
<li><a>热门</a></li>
<li><a>最新</a></li>
<li><a>更多</a></li>
<br></br>
</ul>
</div>
<div class="hot-film-main">
<div class="hot-film-list">
<ul>
<li>
<a href="detail/thwj.html">
<img src="images/2.jpg" alt="" />
</a>
<p><a href="detail/thwj.html">头号玩家</a>
<span class="score">8.7分</span></p>
</li>
<li>
<a href="detail/fwhyj.html">
<img src="images/3.jpg" alt="" />
</a>
<p><a href="detail/fwhyj.html">飞屋环游记</a>
<span class="score">8.9分</span></p>
</li>
<li>
<a href="detail/yhhwd.html">
<img src="images/5.jpg" alt="" />
</a>
<p><a href="detail/yhhwd.html">银河护卫队</a>
<span class="score">8.0分</span></p>
</li>
<li>
<a href="detail/crzdy2.html">
<img src="images/1.jpg" alt="" />
</a>
<p><a href="detail/mnyys.html">美女与野兽</a>
<span class="score">8.7分</span></p>
</li>
<li>
<a href="detail/jtmdt.html">
<img src="images/4.jpg" alt="" />
</a>
<p><a href="detail/mtyj.html">摩天营救</a>
<span class="score">7.5分</span></p>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--最下面的部分-->
<div id="bottom">
<span class="copyright">电影资源网 </span>
</div>
</body>
</html>
|
主页面截图：
二级页面显示其中一个电影的具体情况：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <!DOCTYPE html >
<html >
<head>
<meta charset=utf-8" />
<title>飞屋环游记的介绍</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;<!--导引行字背景-->
}
li {
float: left;
}
li a {
display: gray;
color: blue;<!--字体颜色-->
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;<!--选中后背景-->
}
<!--底部的格式-->
#bottom{
margin:30px auto 0px auto;
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
}
#bottom .copyright{
float:left;
color:#999999;
font-family:"微软雅黑";
font-size:14px;}
</style>
</head>
<body>
<ul>
<br></br>
<li><a href="javascript:;">电影购票</a></li>
<li><a href="javascript:;">电影</a></li>
<li><a href="javascript:;">电视剧</a></li>
<li><a href="javascript:;">少儿</a></li>
<li><a href="javascript:;">其他</a></li>
<li><a href="javascript:;">圈子</a></li>
<li><a href="javascript:;">最热电影</a></li>
</ul>
<div id="left">
<h1>
<span>飞屋环游记</span>
<span>(2010)</span>
</h1>
<div class="subject">
<div class="mainpic">
<img src="../images/3.jpg" />
</div>
<div >
<span>导演</span>: 彼特·道格特 / 鲍勃·彼德森<br/>
<span>编剧</span>: 鲍勃·彼德森 / 彼特·道格特 / 汤姆·麦卡锡<br/>
<span><span>主演</span>: 爱德华·阿斯纳 / 克里斯托弗·普卢默 / 乔丹·长井 / 鲍勃·彼德森 / 戴尔里·林多 / 杰罗姆·兰福特</span><br/>
<span>类型:</span> 剧情 / 喜剧 / 动画 / 冒险<br/>
<span>制片国家/地区:</span> 美国<br/>
<span>语言:</span> 英语<br/>
<span>片长:</span> 96分钟<br/>
</div>
<div>
<span >飞屋环游记的剧情简介:</span>
<div>
小男孩卡尔（Carl Fredricksen）怀揣着对于冒险的热爱偶遇假小子艾丽（Ellie），而艾丽把整个屋子当成一艘大飞船游戏居然使他对这个女孩子有些着迷，相同的爱好最终使两个人成为了一生的爱侣。
<br />
他们有一个梦想，那就是有朝一日要去南美洲的“仙境瀑布”探险，但直到艾丽去世，这个梦想也未能实现。终于有一天，曾经专卖气球的老人卡尔居然用五颜六色的气球拽着他的房子飞上了天空，他决定要去实现他们未曾实现的梦想。令卡尔始料不及的是，门廊居然搭上了一个自称是“荒野开拓者”的小男孩小罗（Russell），小罗的喋喋不休让卡尔对这个小胖墩格外讨厌。
<br />
一老一少在飞行中经过了千难万险终于看到了传说中的“仙境瀑布”，在相处过程中卡尔发现小罗其实是个惹人怜爱的孩子。在步行穿越一座森林时，他们遇到了不会飞的大鸟凯文（Kevin）和一只会说话的狗狗逗逗（Dug），让老人惊讶的是他们还遇到了他少年的崇拜偶像——探险家查尔斯·蒙兹（Charles Muntz），而且他发现蒙兹居然是一个为达目的不择手段的坏人。这时，老人离自己的梦想之地只有一步之遥……
<br />
本片荣获第82届奥斯卡最佳动画长片、最佳配乐2项大奖。
</div>
</div>
</div>
</div>
<div id="bottom">
<span class="copyright">电影资源网</span>
</body>
</html>
|
二级页面截图：
导航行的“电影”部分：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
| <!DOCTYPE html >
<html >
<head>
<meta charset=utf-8" />
<title>飞屋环游记的介绍</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;<!--导引行字背景-->
}
li {
float: left;
}
li a {
display: gray;
color: blue;<!--字体颜色-->
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;<!--选中后背景-->
}
<!--底部的格式-->
#bottom{
margin:30px auto 0px auto;
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
}
#bottom .copyright{
float:left;
color:#999999;
font-family:"微软雅黑";
font-size:14px;}
</style>
</head>
<body>
<ul>
<br></br>
<li><a href="javascript:;">电影购票</a></li>
<li><a href="javascript:;">电影</a></li>
<li><a href="javascript:;">电视剧</a></li>
<li><a href="javascript:;">少儿</a></li>
<li><a href="javascript:;">其他</a></li>
<li><a href="javascript:;">圈子</a></li>
<li><a href="javascript:;">最热电影</a></li>
</ul>
<!--电影部分-->
<div id="left">
<div class="is-on">
<div class="hd">
<h2>电影大全</h2>
<div class="right">
<a class="leftBtn" href="javascript:;"></a>
<a class="rightBtn" href="javascript:;"></a>
</div>
</div>
<div class="bd">
<div class="container">
<ul>
<li>
<a href="detail/mnyys.html"><img src="images/1.jpg" alt="" />
</a>
<p><a href="detail/mnyys.html">美女与野兽</a>
<span class="score">7.2分</span></p>
</li>
<li>
<a href="detail/thwj.html"><img src="images/2.jpg" alt="" />
</a>
<p><a href="detail/thwj.html">头号玩家</a>
<span class="score">8.7分</span></p>
</li>
<li>
<a href="detail/fwhyj.html"><img src="images/3.jpg" alt="" />
</a>
<p><a href="detail/fwhyj.html">飞屋环游记</a>
<span class="score">8.9分</span></p>
</li>
<li>
<a href="detail/mtyj.html">
<img src="images/4.jpg" alt="" />
</a>
<p><a href="detail/mtyj.html">摩天营救</a>
<span class="score">8.6分</span></p>
</li>
<li>
<a href="detail/yhhwd.html"><img src="images/5.jpg" alt="" />
</a>
<p><a href="detail/yhhwd.html">银河护卫队</a>
<span class="score">8.0分</span></p>
</li>
</ul>
</div>
</div>
<div id="bottom">
<span class="copyright">电影资源网</span>
</body>
</html>
|
电影部分截图：
