面向对象方法及软件工程实验二
2024-04-30 00:21:14
一. 代码链接：
https://gitee.com/GjqDream/css_learning/tree/master
二. 网页截图：
当鼠标移动到电影名字上或旁边时会有简单的动画效果——字体加粗、背景色渐变，当鼠标移动到电影类别上时会改变背景色，点击时会跳转到相应的类别框。
当屏幕宽度小于某个值时(在非大屏终端上打开网页时)隐藏网页LOGO，改变电影类别之间的间距，将原先的两个类别框横向排列(例如喜剧片和动画片)改为纵向排列，改善视觉效果。
当屏幕宽度较小(在小屏终端上打开网页)时，再次改变电影类别之间的间距，从而避免类别被遮蔽的情况。
三. 被模仿网页截图：
注:仅模仿了该网页的布局及部分样式，未使用该网页任何资源及链接。
四. 代码相关框架：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>
7 电影网_最纯粹的视觉体验
8 </title>
9 <style>
10 body {
11 background-image: url('Image/BK1.jpg')
12 }
13
14 .ArtiHead {
15 width: 100vw;
16 }
17
18 .nav {
19 background-color: #690;
20 position: relative;
21 overflow: hidden;
22 height: 28px;
23 width: 775px;
24 left: 50%;
25 margin-left: -400px;
26 }
27
28 .menu {
29 float: left;
30 margin: 0;
31 }
32
33 .menu ul {
34 list-style: none;
35 display: inline;
36 }
37
38 .menu li {
39 display: inline;
40 margin-left: 40px;
41 margin-right: 40px;
42 }
43
44 .menu a {
45 color: #fff;
46 text-decoration: none;
47 }
48
49 .HeadPL {
50 margin: 4px 0 0 65px;
51 float: left;
52 }
53
54 .menu li:hover {
55 background-color: #060
56 }
57
58 .ArtiSearch {
59 margin-top: 5px;
60 width: 100vw;
61 height: 28px;
62 }
63
64 .search {
65 overflow: hidden;
66 position: relative;
67 width: 40vw;
68 left: 50%;
69 margin-left: -400px;
70 }
71
72 .search1 {
73 float: left
74 }
75
76 .searchr {
77 float: left;
78 margin-left: 0.2vw;
79 }
80
81 .ArtiLow1,
82 .ArtiLow2 {
83 width: 100%;
84 }
85
86 .sectionLow1,
87 .sectionLow2 {
88 overflow: hidden;
89 position: relative;
90 width: 775px;
91 left: 50%;
92 margin-left: -384px;
93 margin-top: 15px;
94 }
95
96 .section1,
97 .section2,
98 .section3,
99 .section4 {
100 float: left;
101 width: 385px;
102 height: 590px;
103 background-color: beige;
104 }
105
106 #s1h,
107 #s2h,
108 #s3h,
109 #s4h {
110 height: 28px;
111 background-color: aliceblue;
112 }
113
114 .section1,
115 .section3 {
116 margin-right: 5px;
117 }
118
119 #trans1 {
120 width: 300px;
121 background: beige;
122 transition-duration: 1s;
123 }
124
125 #trans1:hover {
126 font-weight: bold;
127 background: burlywood;
128 }
129
130 @media (max-width:790px) {
131 .HeadPL {
132 display: none;
133 }
134
135 .menu {
136 float: none;
137 }
138
139 .nav {
140 height: auto;
141 width: auto;
142 left: 0;
143 margin-left: 0;
144 }
145
146 .search {
147 left: 0;
148 margin-left: 0;
149 width: auto;
150 }
151
152 .sectionLow1,
153 .sectionLow2 {
154 left: 0%;
155 margin-left: 0;
156 }
157
158 .section1,
159 .section2,
160 .section3,
161 .section4 {
162 width: auto;
163 margin-bottom: 5px;
164 float: none;
165 }
166
167 .section2,
168 .section4 {
169 margin-top: 15px;
170 }
171
172 .section2 {
173 margin-bottom: 0;
174 }
175
176 .section1,
177 .section3 {
178 margin-right: 0;
179 }
180 }
181
182 @media (max-width:700px) {
183 .menu li {
184 margin-left: 5vw;
185 margin-right: 5vw;
186 }
187 }
188
189 @media (max-width:620px) {
190 .menu li {
191 margin-left: 3vw;
192 margin-right: 3vw;
193 }
194 }
195
196 @media (max-width:480px) {
197 .menu li {
198 margin-left: 2vw;
199 margin-right: 2vw;
200 }
201 }
202 </style>
203 </head>
204
205 <body>
206 <div class="ArtiHead">
207 <div class="nav">
208 <div class="HeadPL">
209 <a href="#"><img src="Image/HeadP.png" height="21px" /></a>
210 </div>
211 <div class="menu">
212 <ul>
213 <li><a href="#s1h">喜剧片</a></li>
214 <li><a href="#s2h">动画片</a></li>
215 <li><a href="#s3h">动作片</a></li>
216 <li><a href="#s4h">科幻片</a></li>
217 </ul>
218 </div>
219 </div>
220 </div>
221 <div class="ArtiSearch">
222 <div class="search" style="float:left; ">
223 <div class="search1">
224 <input name="keyboard" type="text">
225 </div>
226 <div class="searchr">
227 <input name="Submit" type="submit" value="立即搜索">
228 </div>
229 </div>
230 </div>
231
232 <div class="ArtiLow1">
233 <div class="sectionLow1">
234 <div class="section1">
235 <div id="s1h">
236 <b>喜剧片:</b>
237 </div>
238 <div id="s1a">
239 <ol>
240 <li>
241 <div id="trans1">《绿皮书》</div>
242 </li>
243 <li>
244 <div id="trans1">《副总统》</div>
245 </li>
246 <li>
247 <div id="trans1">《新喜剧之王》</div>
248 </li>
249 <li>
250 <div id="trans1">《难道不浪漫》</div>
251 </li>
252 <li>
253 <div id="trans1">《邻座的怪同学》</div>
254 </li>
255 <li>
256 <div id="trans1">《速成家庭》</div>
257 </li>
258 <li>
259 <div id="trans1">《64号病例》</div>
260 </li>
261 <li>
262 <div id="trans1">《最萌警探》</div>
263 </li>
264 <li>
265 <div id="trans1">《战斗民族养成记》</div>
266 </li>
267 <li>
268 <div id="trans1">《断片之险途夺宝》</div>
269 </li>
270 <li>
271 <div id="trans1">《来电狂响》</div>
272 </li>
273 <li>
274 <div id="trans1">《银魂2》</div>
275 </li>
276 <li>
277 <div id="trans1">《家和万事惊》</div>
278 </li>
279 <li>
280 <div id="trans1">《武林怪兽》</div>
281 </li>
282 <li>
283 <div id="trans1">《夜校》</div>
284 </li>
285 <li>
286 <div id="trans1">《天气预报》</div>
287 </li>
288 <li>
289 <div id="trans1">《勒索》</div>
290 </li>
291 <li>
292 <div id="trans1">《极限速递》</div>
293 </li>
294 <li>
295 <div id="trans1">《黑衣女人》</div>
296 </li>
297 <li>
298 <div id="trans1">《疯狂的契约》</div>
299 </li>
300 </ol>
301 </div>
302 </div>
303 <div class="section2">
304 <div id="s2h">
305 <b>动画片:</b>
306 </div>
307 <div id="s2a">
308 <ol>
309 <li>
310 <div id="trans1">《白蛇：缘起》</div>
311 </li>
312 <li>
313 <div id="trans1">《无敌原始人》</div>
314 </li>
315 <li>
316 <div id="trans1">《恐龙王》</div>
317 </li>
318 <li>
319 <div id="trans1">《昨日晴空》</div>
320 </li>
321 <li>
322 <div id="trans1">《雪怪大冒险》</div>
323 </li>
324 <li>
325 <div id="trans1">《朝花夕誓》</div>
326 </li>
327 <li>
328 <div id="trans1">《超人总动员2》</div>
329 </li>
330 <li>
331 <div id="trans1">《克里斯托弗：罗宾》</div>
332 </li>
333 <li>
334 <div id="trans1">《精灵旅社3：疯狂假期》</div>
335 </li>
336 <li>
337 <div id="trans1">《风雨咒》</div>
338 </li>
339 <li>
340 <div id="trans1">《淘气大侦探》</div>
341 </li>
342 <li>
343 <div id="trans1">《神秘世界历险记4》</div>
344 </li>
345 <li>
346 <div id="trans1">《未来机器城》</div>
347 </li>
348 <li>
349 <div id="trans1">《神奇马戏团之动物饼干》</div>
350 </li>
351 <li>
352 <div id="trans1">《烟花》</div>
353 </li>
354 <li>
355 <div id="trans1">《吃货宇宙》</div>
356 </li>
357 <li>
358 <div id="trans1">《白牙》</div>
359 </li>
360 <li>
361 <div id="trans1">《熊出没·变形记》</div>
362 </li>
363 <li>
364 <div id="trans1">《冰雪女王3：火与冰》</div>
365 </li>
366 <li>
367 <div id="trans1">《我的影子在奔跑》</div>
368 </li>
369 </ol>
370 </div>
371 </div>
372 </div>
373 </div>
374
375 <div class="ArtiLow2">
376 <div class="sectionLow2">
377 <div class="section3">
378 <div id="s3h">
379 <b>动作片:</b>
380 </div>
381 <div id="s3a">
382 <ol>
383 <li>
384 <div id="trans1">《海王》</div>
385 </li>
386 <li>
387 <div id="trans1">《乌里：外科手术式打击》</div>
388 </li>
389 <li>
390 <div id="trans1">《大黄蜂》</div>
391 </li>
392 <li>
393 <div id="trans1">《永生之地》</div>
394 </li>
395 <li>
396 <div id="trans1">《叶问外传：张天志》</div>
397 </li>
398 <li>
399 <div id="trans1">《蜘蛛侠：平行宇宙》</div>
400 </li>
401 <li>
402 <div id="trans1">《极限职业》</div>
403 </li>
404 <li>
405 <div id="trans1">《三方国界》</div>
406 </li>
407 <li>
408 <div id="trans1">《影》</div>
409 </li>
410 <li>
411 <div id="trans1">《尸控警戒》</div>
412 </li>
413 <li>
414 <div id="trans1">《大人物》</div>
415 </li>
416 <li>
417 <div id="trans1">《增速驱动》</div>
418 </li>
419 <li>
420 <div id="trans1">《功夫联盟》</div>
421 </li>
422 <li>
423 <div id="trans1">《云南虫谷》</div>
424 </li>
425 <li>
426 <div id="trans1">《死侍2》</div>
427 </li>
428 <li>
429 <div id="trans1">《掠食城市》</div>
430 </li>
431 <li>
432 <div id="trans1">《霸主》</div>
433 </li>
434 <li>
435 <div id="trans1">《巨齿鲨》</div>
436 </li>
437 <li>
438 <div id="trans1">《冰海陷落》</div>
439 </li>
440 <li>
441 <div id="trans1">《银魂2》</div>
442 </li>
443 </ol>
444 </div>
445 </div>
446 <div class="section4">
447 <div id="s4h">
448 <b>科幻片:</b>
449 </div>
450 <div id="s4a">
451 <ol>
452 <li>
453 <div id="trans1">《疯狂外星人》</div>
454 </li>
455 <li>
456 <div id="trans1">《另一个时间》</div>
457 </li>
458 <li>
459 <div id="trans1">《少女地球守护者》</div>
460 </li>
461 <li>
462 <div id="trans1">《哥斯拉:噬星者》</div>
463 </li>
464 <li>
465 <div id="trans1">《狂暴巨兽》</div>
466 </li>
467 <li>
468 <div id="trans1">《黑镜:潘达斯奈斯》</div>
469 </li>
470 <li>
471 <div id="trans1">《收割伊丽莎白》</div>
472 </li>
473 <li>
474 <div id="trans1">《克隆人》</div>
475 </li>
476 <li>
477 <div id="trans1">《蒙上你的眼》</div>
478 </li>
479 <li>
480 <div id="trans1">《毒液》</div>
481 </li>
482 <li>
483 <div id="trans1">《不期而遇》</div>
484 </li>
485 <li>
486 <div id="trans1">《铁血战士》</div>
487 </li>
488 <li>
489 <div id="trans1">《游侠索罗：星球大战外传》</div>
490 </li>
491 <li>
492 <div id="trans1">《没有好英雄》</div>
493 </li>
494 <li>
495 <div id="trans1">《黑暗心灵》</div>
496 </li>
497 <li>
498 <div id="trans1">《同族》</div>
499 </li>
500 <li>
501 <div id="trans1">《侏罗纪世界2》</div>
502 </li>
503 <li>
504 <div id="trans1">《机械猛犬》</div>
505 </li>
506 <li>
507 <div id="trans1">《蚁人2：黄蜂女现身》</div>
508 </li>
509 <li>
510 <div id="trans1">《人类清除计划4》</div>
511 </li>
512 </ol>
513 </div>
514 </div>
515 </div>
516
517 </div>
518 </body>
519
520 </html>转载于:https://www.cnblogs.com/GjqDream/p/10608530.html
面向对象方法及软件工程实验二相关推荐
- 软件工程实验二：测试
一.实验目的: 采用黑盒测试法设计测试方案,用C语言编程,对该程序功能进行测试. 二.实验内容: 三角形分类程序的功能是:输入三角形的三条边(3个整数),判断是否能构成三角形,如能,则输出是等边.等腰 ...
- matlab蒙特卡罗方法求体积_实验二-蒙特卡罗方法计算三维体积
班级: 学号: 姓名: 实验时间: 2014 年 月 日 实验 项目 实验二 蒙特卡罗方法计算三维体积 所属 课程 数学实验 实 验 目 的 了解蒙特卡罗方法的原理,掌握随机数使用技术. 实 验 内 ...
- 实验六 html网页设计,网页设计.html · 谢泽华/面向对象与软件工程实验二：网页模仿 - Gitee.com...
网页 ul, menu, dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin ...
- 面向对象方法及软件工程——团队答辩
健康助手小程序码(扫码可体验) 一.团队成员的姓名.学号及博客链接地址 姓名:陈颜如玉 学号:1700802118 博客链接地址:https://www.cnblogs.com/chenyanruyu ...
- 20155328 《Java程序设计》 实验二（Java面向对象程序设计） 实验报告
20155328 <Java程序设计> 实验二(Java面向对象程序设计) 实验报告 单元测试 一.单元测试和TDD 编程时需理清思路,将编程需求等想好,再开始编.此部分可用伪代码实现. ...
- 20175333曹雅坤 实验二 Java面向对象程序设计
实验二 Java面向对象程序设计 实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计 ...
- 20175212童皓桢 Java实验二-面向对象程序设计实验报告
20175212童皓桢 Java实验二-面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设 ...
- 『软件工程13』浅谈面向对象方法，统一建模语言UML
浅谈面向对象方法UML 一.UML的含义 二.UML的主要内容 1.UML的概念模型 2.UML概念模型图例 三.UML的基本构造块 1.UML中的事物 (1)UML中的四种事物 (2)UML中各种事 ...
- java程序面向对象show,20165309 实验二 Java面向对象程序设计
2017-2018-2 20165309实验二<Java面向对象程序设计>实验报告 一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初 ...
最新文章
- vmware中的网络（bridge，nat）(转载)
- mailx(mail)配置outlook SMTP方式发送邮件
- 【C 语言】数据类型本质 ( sizeof 函数 | 数据类型大小 )
- linux系统crontab怎么用,Linux系统crontab使用手册
- maven+testng+eclipse
- jquery ajax跨域访问webservice配置
- 神经网络优化器的选择_神经网络：优化器选择的重要性
- Failed to load or instantiate TagLibraryValidator class: org.apache.taglibs.standard.tlv.JstlFmtTLV
- 李兰娟院士等新冠病毒鸡尾酒疗法研究取得新进展
- Android拍照上传代码样例
- JZs3c2440裸板程序GPIO操作总结
- 帧差法——动态检测——统计车流量
- 用纯CSS实现优雅的tab页
- 从一位前阿里P7被裁员，聊技术人的第二职业！
- Java实现pdf文件转图片
- Python模拟键盘输入（附Python 键位码表）
- WAP网站流量分析 WAP流量统计 wap网站流量统计
- sharepoint 模板安装
- 虚拟机报错模块“Disk”启动失败。 未能启动虚拟机。
- 用SSH工具XShell连接云服务器 root用户 （谷歌云 甲骨文通用）