-
dreamweaver作业静态HTML网页设计模板——迪士尼影视电影(6页)带音乐
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" /> <title>迪士尼影业title> head> <body> <embed src="music/music.mp3" width="0" height="0">embed> <div class="con"> <div class="head"> <div class="logo"> <h1>迪士尼影业h1> div> <div class="nav"> <ul> <li><a href="index.htm">首 页a>li> <li><a href="page1.htm">迪士尼动画片a>li> <li><a href="page2.htm">公司简介a>li> <li><a href="page3.htm">发展过程a>li> <li><a href="page4.htm">电影纪录a>li> ul> div> <div class="clear">div> div> <div class="clear">div> <div class="lunbo"><a href="#"><img src="images/d1.jpg" width="1024"/>a>div> <div class="clear">div> <div class="main"> <h2>迪士尼影业h2> <p>迪士尼电影公司是迄今为止唯一一家没有被交易过的好莱坞大公司。迪士尼全称为The Walt Disney Company，取名自其创始人华特·迪士尼，是总部设在美国的大型跨国公司，二十世纪三四十年代，依靠米老鼠起家，四十年代，涉足真人电影领域，先后收购了独立电影界巨头米拉麦克斯、3D动画霸主皮克斯[1] 、动漫巨头漫威和卢卡斯影业之后[2] ，迪士尼更是巩固了自己作为顶级电影公司的地位。p> <h2>电影纪录h2> <div><strong>世界上第一部全部对白动画片strong>div> <div>是1928年迪士尼绘制的动画片《蒸汽船威利 》(也译作《威利汽船》，《威廉号汽艇》）。这部动画片于1928年11月18日在纽约首映，也是第一次向观众介绍米老鼠这一著名动画人物。 实际上，迪士尼在同年先完成了全部有声对白动画片《飞机迷》，不过它发行于《蒸汽船威利》之后。div> <p> p> <p>p> <p>p> <p>p> <h2>剧情剧照h2> <div class="main_list"> <ul> <li><a href="#"><img src="images/q1.jpg" />a>li> <li><a href="#"><img src="images/q2.jpg" />a>li> <li><a href="#"><img src="images/q3.jpg" />a>li> <li><a href="#"><img src="images/q4.jpg" />a>li> <li><a href="#"><img src="images/q5.jpg" />a>li> <li><a href="#"><img src="images/q6.jpg" />a>li> <li><a href="#"><img src="images/q7.jpg" />a>li> <li><a href="#"><img src="images/q8.jpg" />a>li> <li><a href="#"><img src="images/q9.jpg" />a>li> <li><a href="#"><img src="images/q10.jpg" />a>li> <li><a href="#"><img src="images/q11.jpg" />a>li> <li><a href="#"><img src="images/q12.jpg" />a>li> ul> div> div> <div class="clear">div> <div class="foot"> <p>版权所有：叶子瑜1500941p> <p>All Rights Reservedp> div> <div class="clear">div> 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
2.CSS代码
/*----------------------common-------------------------*/ *{ margin:0; padding:0; font-family:Microsoft YaHei;} .clear{ clear:both;} .fl{ float:left;} .fr{ float:right;} img{ border:none;} a{ text-decoration:none;} a:hover{ text-decoration:underline;} li{ list-style-type:none;} .ofh{overflow:hidden;} .center{ text-align:center;} .em{ text-indent:2em;} .p5{ padding:5px;} .pl50{ padding-left:50px;} body{ background:url(../images/bj.jpg) top center fixed no-repeat;} /*----------------------con-------------------------*/ .con{ width:960px; padding:20px; height:auto; margin:10px auto; background:#fff; background-color:rgba(255,255,255,0.8);-moz-border-radius:10px;border-radius:10px;} /*----------------head-----------------*/ .head{ width:960px; height:auto; margin:auto;} .logo{ width:550px; height:60px;} .logo h1{ font-size:36px; line-height:60px; color:#300; font-family:黑体;} .nav{ width:960px; height:40px; margin:5px auto;background-color:#000;-moz-border-radius:5px;border-radius:5px;} .nav ul{ padding-left:10px;} .nav li{ float:left; padding:5px 20px; } .nav li a{ font-size:20px; line-height:30px; color:#fff;} .nav li a:hover{ color:#fff; text-decoration:none;} .nav li:hover{ background-color:#f97255} .nav li:hover a{ color:#fff;} .lunbo{ width:960px; height:350px; margin:5px auto; overflow:hidden;-moz-border-radius:5px;border-radius:5px;} /*----------------main-----------------*/ .main{ width:960px; height:auto; margin:10px auto; font-size:14px; line-height:24px; color:#555;} .main h2{font-size:18px; line-height:46px; color:#333;} .main p{font-size:14px; line-height:24px; color:#555; text-indent:2em;} .main_list{ width:960px; height:auto; } .main_list li{ width:150px;height:100px; float:left; margin:3px; border:2px solid #fff;} .main_list li:hover{border:2px solid #ffca2c;} .main_list li img{ width:150px; height:100px; } /*----------------foot-----------------*/ .foot{ width:960px; height:50px; margin:10px auto; padding-top:10px; border-top:3px solid #600; text-align:center; font-size:14px; line-height:24px; color:#666;} .foot{font-size:14px; line-height:24px; color:#666;}- 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
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就
【点赞收藏博文】三连支持下吧，你的支持是我创作的动力,【观注作者 |获取更多源码| 优质文章】。2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
-
相关阅读:
学生HTML静态网页设计作业成品【汽车商城、汽车租赁、汽车销售】HTML+CSS+JS购物商城
java8 新特性2-接口中的默认方法和静态方法
docker安装mysql8和mysql5.7
C++ Reference: Standard C++ Library reference: C Library: cmath: llrint
27. 移除元素、Leetcode的Python实现
将一维数组转为三维数组，html引入swiper并且自定义左右切换按钮
postgresql用户与权限管理
高阶数据结构学习之跳表
nginx主要作用三个（虚拟主机+反向代理+upsteam调度分发）
如何完成网课答案公众号搭建？小白教程！内附网课题库接口！
- 原文地址：https://blog.csdn.net/bigwhiteshark/article/details/126006191