web前端电影项目作业源码 大学生影视主题网页制作电影网页设计模板 学生静态网页作业成品 dreamweaver电影HTML网站制作
2024-05-09 00:10:51
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 2.CSS代码
- 三、个人总结
- 四、精彩推荐
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Index</title><script type="text/javascript" src="js/common.js" charset="utf-8"></script><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="style/reset.css"><link rel="stylesheet" href="style/index.css"><link rel="stylesheet" href="style/common.css">
</head><body><!-- 最大容器 --><div class="wapper"><a href="" name="top"></a><!-- 头部 --><div class="header"><div class="head"><!-- logo --><div class="logo"><a href="index.html"><img src="data:images/logo.png" alt=""></a><img src="data:images/logo2.png" alt=""></div><!-- 导航栏 --><div class="nav"><ul><li><a class="dropbtn" href="index.html">优粤门户</a><!-- 下拉菜单 --><div class="dropdown-content"><div class="txtimg"><a href="video.html">优视频</a><img src="data:images/home_icon01.png" alt=""></div><div class="txtimg"><a href="activity.html">粤文化</a><img src="data:images/home_icon02.png" alt=""></div><div class="txtimg"><a href="cg.html">有机会</a><img src="data:images/home_icon03.png" alt=""></div></div></li><li><a class="dropbtn" href="index.html">有啊社区</a><!-- 下拉菜单 --><div class="dropdown-content"><div class="txtimg"><a href="news.html">优新闻</a><img src="data:images/home_icon02.png" alt=""></div><div class="txtimg"><a href="detail.html">优社区</a><img src="data:images/home_icon01.png" alt=""></div><div class="txtimg"><a href="filmcritics.html">影评人</a><img src="data:images/home_icon03.png" alt=""></div></div></li><li><a class="dropbtn" href="login.html">登录</a></li><li><a class="dropbtn" href="register.html">注册</a></li></ul><!-- 搜索按钮 --><div class="search"><input type="image" name="img_btn" src="data:images/home_search01.png" /><!-- 搜索按钮下拉菜单 --><div class="searchout"><div class="search-dropdown"><div class="inputbtn"><input type="search" name="search"><input type="button" name="btn" value="GO" /></div></div></div></div></div></div></div><!-- 右侧 --><ul class="ul2"><li><a href="detail.html"><img src="data:images/home_bottom03.png" alt=""></a><div class="right"><h3>环太平洋<span>468人评论过</span></h3><p><span>#环太平洋##环太平洋#</span>对建筑物倒塌、核弹攻击城市、外星人入侵...<a href="">[详细]</a></p><div class="vary"><img src="data:images/home_icon14.png" alt=""><p>欧美电影</p></div></div></li><li><a href="detail.html"><img src="data:images/home_bottom04.png" alt=""></a><div class="right"><h3>速度与激情6<span>783人评论过</span></h3><p> 杰森-斯坦森【<span>#速J#</span>】斯坦森饰演第六部大反派欧文-肖...<a href="">[详细]</a></p><div class="vary"><img src="data:images/home_icon14.png" alt=""><p>热映推荐</p></div></div></li><li><a href="detail.html"><img src="data:images/home_bottom05.png" alt=""></a><div class="right"><h3>青春派<span>468人评论过</span></h3><p>《青春派》预告片“零差评”逆增长<a href="">[详细]</a></p><div class="vary"><img src="data:images/home_icon14.png" alt=""><p>电影预告</p></div></div></li></ul></div></div></div><!-- 底部 --><div class="footer"><div class="txt"> Copyright © 2013 URFILM 版权所有</div></div><!-- 返回顶部 --><div class="returntop"><a href="#top"><img src="data:images/home_returntop.png" alt=""></a></div></div><script src="js/banner.js"></script>
</body></html>2.CSS代码
/* 主页CSS *//* 内容主体 */
.content_out{width: 100%;background-color: #f4f4f4;border-bottom: 1px solid #e1e0e0;
}
.content_out .content{width: 68%;margin: 0 auto;padding-top: 2.6rem;
}
/* 优视频 */
.content .video{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;
}
.video .title{width: 49.7%;height: 8.15rem;background-color: #ff9000;display: flex;
}
.title .tit{color: white;margin: auto;display: flex;
}
.title .tit .u{font-size: 4.57rem;line-height: 4.57rem;
}
.title .tit h2{font-size: 2.2rem;font-weight: normal;
}
.title .tit p{font-size: 1rem;
}
.video>a{display: block;width: 16.2%;height: 8.15rem;margin-bottom: .3rem;
}
.video>a.double{width: 32.99%;position: relative;
}
.video>a>img{width: 100%;height: 100%;
}
.double .more{width: 100%;height: 2.1rem;position: absolute;bottom: 0;left: 0;display: flex;align-items: center;visibility: hidden;background-color: rgb(255, 144, 0, .8);
}
.double:hover .more{visibility: visible;
}
.double .more img{display: block;width: 1.3rem;height: 1.3rem;margin: 0 .5rem;
}
.double .more p{font-size: .8rem;color: white;
}.video .tiao{width: 100%;height: .6rem;background-color: white;margin-top: .5rem;margin-bottom: 1.4rem;
}
.video .tiao .per{width: 38.5%;height: 100%;background-color: #ff9000;
}/* 优粤沙龙 */
.salon{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 1.3rem;
}
.salon .title{width: 32.4%;height: 8.3rem;display: flex;background-color: #54d1f5;
}
.salon>a{display: block;width: 39.3%;height: 8.3rem;
}
.salon>a img{width: 100%;height: 100%;
}
.sa
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
web前端电影项目作业源码 大学生影视主题网页制作电影网页设计模板 学生静态网页作业成品 dreamweaver电影HTML网站制作相关推荐
- 大学生影视主题网页制作 银翼杀手2049电影网页设计模板 学生静态网页作业成品 dreamweaver电影HTML网站制作
银翼杀手2049电影网页设计制作 知识点应用 作品介绍 网页成品效果预览 HTML代码预览 导航代码 图片列表代码 作品源地址 知识点应用 DIV CSS布局.网页背景图片.网页背景音乐.图片列表.字 ...
- 大学生餐饮主题网页制作 美食网页设计模板 学生静态网页作业成品 dreamweaver美食甜品蛋糕HTML网站制作
- 大学生环保主题网页制作 环境网页设计模板 学生静态网页作业成品 dreamweaver保护地球环境HTML网站制作
- 大学生家乡主题网页制作 旅游网页设计模板 学生静态网页作业成品 dreamweaver家乡HTML网站制作
- HTML5期末大作业：花店购物网站设计——花店购物网站源码(27页) 学生动花店购物页设计模板下载 植物大学生HTML网页制作作品 简单网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:花店购物网站设计--花店购物网站源码(27页) 学生动花店购物页设计模板下载 植物大学生HTML网页制作作品 简单网页设计成品 dreamweaver学生网站模板 常见网页设计作 ...
- 公众号优买工作室: 电影小程序源码和影视小程序后台安装教程
网站环境安装( 宝塔 ) PHP版本建议7.0,其他版本应该也是可以的,但是PHP必须安装redis.fileinfo.sg11扩展,安装方法 图上只标出来两个,sg11下拉右侧的滚动条找到安装即可. ...
- 简约的博客网页制作 大学生个人博客网页设计模板 学生个人网页成品 DIV简单个人网站作品下载 静态HTML CSS个人网页作业源代码
- web前端开发项目资源网站，私家珍藏！分享给大家
1.CodePen: http://codepen.io/ 网站里有很多很酷的特效,而且可以看到效果的源代码,也可以看到实现效果,是一个非常不错的前端开发学习资源网站. 这个是CodePen网站里的一 ...
- HTML5期末大作业：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业:电影网站设计--电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计作业 ...
最新文章
- c语言程序与设计苏小红,c语言程序设计苏小红
- 四级计算机网络考试大纲,2017年全国计算机等级考试四级计算机网络考试大纲...
- 把mac地址转换为标准mac地址
- vue axios 返回参数 响应参数
- 黑客攻防技术宝典web实战篇：攻击应用程序逻辑习题
- [Godot][Blender] 通过 Blender 将 fbx 批量转为 gltf 用于 godot
- 74. PHP 计数器
- JS实现自定义右键菜单
- 关于虚拟机非正常关机的解决方案
- 计算机上瘾英语对话,对手机上瘾的英语作文（精选5篇）
- 如何自己编写一个交通仿真软件（二）原野。
- error LNK2001解决方法
- Android studio软件编译生成APK
- .net软件开发工程师面试题精选
- error 1962：no operating system found.boot sequence will automatically repeat.
- 牛客专项练习之设计模式
- 基于常见投票系统的作弊方法
- 一年一次！互联网女皇又来了！今年她说了这些内容
- 【我是老中医】Win10系统下MATLAB无法正常打开的解决方案
- java 用折半查找,java折半查找算法