当前位置：网站首页>dreamweaver网页设计作业制作 学生个人网页猫眼电影 WEB静态网页作业模板 大学生个人主页博客网页代码 dw个人网页作
dreamweaver网页设计作业制作 学生个人网页猫眼电影 WEB静态网页作业模板 大学生个人主页博客网页代码 dw个人网页作
2022-08-11 09:49:00 【华为云】
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
@TOC
一、网页介绍
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"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/clear.css"> <title>首页</title> <link rel="icon" href="images/title-lolg.png"></head><body> <header> <div class="header-body"> <a href="index.html?123" class="logo">猫眼电影</a> <div class="city">成都 <span class="caret"></span> </div> <div class="city-list"> <div class="now-city"> 定位城市: 定位失败 </div> <div class="citys"> <span class="icon"></span> 定位失败 </div> </div> <div class="nav"> <ul class="nav-list"> <li><a href="index.html?123" class="nav-model active">首页</a></li> <li><a href="movies.html" class="nav-model">电影</a></li> <li><a href="cinemas.html" class="nav-model">影院</a></li> <li class="nav-model">演出</li> <li class="nav-model">榜单</li> <li class="nav-model">热点</li> <li class="nav-model">商城</li> </ul> </div> <div class="app-download"> <a href="#"> <span class="phone"></span> APP下载 <span class="caret"></span> <div class="appcode"> <img src="images/phonecode.png" class="app-code"></img> <p class="down-tip">扫码下载APP</p> <p class="down-text">选座更优惠</p> </div> </a> </div> <div class="search"> <div type="text" class="searchinput"> <input type="text" class="input" placeholder="找影视剧、影人、影院"> <input class="submit" type="submit" value=""> </div> </div> <div class="userimg"> <img src="images/user.png" alt=""> <span class="caret"></span> </div> <div class="userlogin"> <a href="login.html" class=" notlogin">登录</a> <div class="islogin nologin"> <a href="personal.html">个人中心</a> <a href="index.html">退出</a> </div> </div> </header> <!-- 轮播图 --> <div class="wrap" id="wrap"> <ul class="content"></ul> <a href="javascript:;" class="prev"><</a> <a href="javascript:;" class="next">></a> </div> <!-- 页面主体 --> <div class="container"> <div class="main"> <!-- 正在热映 --> <div class="hot-movie"> <h2>正在热映（4部）</h2> <div class="movies" id="hotmovies"> </div> </div> <!-- 即将上映 --> <div class="movie-box"> <div class="movie-header"> <h2>即将上映（115部）</h2> <a href="#"> <span>全部></span> </a> </div> <div class="movies"> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">预告片</button> <button onclick="alert('123')">预售</button> <p>9月31日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie2.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">预告片</button> <button onclick="alert('123')">预售</button> <p>10月2日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie3.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">预告片</button> <button onclick="alert('123')">预售</button> <p>11月1日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie4.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">预告片</button> <button onclick="alert('123')">预售</button> <p>9月23日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">预告片</button> <button onclick="alert('123')">预售</button> <p>9月31日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">预告片</button> <button onclick="alert('123')">预售</button> <p>9月31日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">预告片</button> <button onclick="alert('123')">预售</button> <p>9月31日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">预告片</button> <button onclick="alert('123')">预售</button> <p>9月31日上映</p> </div> </div> </div> <!-- 热播电影 --> <div class="movie-box"> <div class="movie-header c hotmovie "> <h2>热播电影（115部）</h2> <a href="#"> <span>全部></span> </a> </div> <div class="movies movies-hot"> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie2.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie3.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie4.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> </div> </div> <!-- 喜剧电影 --> <div class="movie-box"> <div class="movie-header"> <h2>喜剧电影（115部）</h2> <a href="#"> <span>全部></span> </a> </div> <div class="movies"> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie2.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie3.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie4.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> </div> </div> <!-- 动作电影 --> <div class="movie-box"> <div class="movie-header c hotmovie "> <h2>动作电影（125部）</h2> <a href="#"> <span>全部></span> </a> </div> <div class="movies movies-hot"> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie2.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie3.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie4.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即购票</button> </div> </div> </div> </div> </div> <!-- 页面底部 --> <div class="footer" style="visibility: visible;"> <p class="friendly-links"> 关于猫眼 : <a href="#" target="_blank">关于我们</a> <span></span> <a href="#" target="_blank">管理团队</a> <span></span> <a href="#" target="_blank">投资者关系</a> 友情链接 : <a href="#" data-query="utm_source=wwwmaoyan" target="_blank">美团网</a> <span></span> <a href="#" data-query="utm_source=wwwmaoyan">格瓦拉</a> <span></span> <a href="#" data-query="utm_source=wwwmaoyan" target="_blank">美团下载</a> <span></span> <a href="#" data-query="utm_source=maoyan_pc" target="_blank">欢喜首映</a> </p> <p class="friendly-links"> 商务合作邮箱：[email protected] 客服电话：10105335 违法和不良信息举报电话：4006018900 </p> <p class="friendly-links"> 用户投诉邮箱：[email protected] 舞弊线索举报邮箱：[email protected] </p> <p class="friendly-links credentials"> <a href="#" target="_blank">中华人民共和国增值电信业务经营许可证 京B2-20190350</a> <span></span> <a href="#" target="_blank">营业性演出许可证 京演（机构）（2019）4094号</a> </p> <p class="friendly-links credentials"> <a href="#" target="_blank">广播电视节目制作经营许可证 （京）字第08478号</a> <span></span> <a href="#" target="_blank">网络文化经营许可证 京网文（2019）3837-369号 </a> </p> <p class="friendly-links credentials"> <a href="#" target="_blank">猫眼用户服务协议 </a> <span></span> <a href="#" target="_blank">猫眼平台交易规则总则 </a> <span></span> <a href="#" target="_blank">隐私政策 </a> </p> <p class="friendly-links credentials"> <a href="" target="_blank">京公网安备 11010102003232号</a> <span></span> <a href="#/" target="_blank">京ICP备16022489号</a> </p> <p>北京猫眼文化传媒有限公司</p> <p> <span class="my-footer-year">2020</span> 猫眼电影 maoyan.com</p> <div class="certificate"> <a href="#" target="_blank"> <img src="http://p0.meituan.net/moviemachine/e54374ccf134d1f7b2c5b075a74fca525326.png"> </a> <a href="#" target="_blank"> <img src="http://p1.meituan.net/moviemachine/805f605d5cf1b1a02a4e3a5e29df003b8376.png"> </a> <a href="h#" target="_blank"> <img src="http://p0.meituan.net/scarlett/3cd2a9b7dc179531d20d27a5fd686e783787.png"> </a> </div> </div></body></html>2.CSS代码
body { background-color: #ffffff;}header { position: fixed; top: 0; z-index: 999; width: 100%; min-width: 1200px; background-color: #fff; border-bottom: 1px solid #d8d8d8; background-color: #ffffff;}header .header-body { width: 1200px; margin: 0 auto; height: 80px; display: flex; position: relative;}header .header-body .logo { display: block; width: 133px; height: 80px; color: rgba(0, 0, 0, 0); background: url(../images/header-bg.png) no-repeat center center;}header .header-body .city { display: inline-block; width: 60px; height: 80px; line-height: 80px; color: #000000; font-size: 16px; margin-left: 10px; box-sizing: border-box; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff;}header .header-body .city .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 5px solid #666; border-right: 5px solid transparent; border-left: 5px solid transparent; -webkit-transition: all 0.2s ease; transition: all 0.5s ease;}header .header-body .city:hover { height: 81px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; z-index: 999; background-color: #ffffff;}hea三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【关注作者 |获取更多源码| 优质文章】。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
【源码获取】
1.点击 公众号【免费源码】菜单-即可获取部分免费源码
2.点击 公众号【自助下载】菜单-即可24小时自助下载(推荐)
3.点击 公众号【联系作者】菜单-如遇问题及时联系作者
注:成品不是免费,对于白嫖的同学,我们免费送【800套html学习模板】和【web前端学习视频资料】,有基础的同学可以自行修改, 可点击公众号【免费源码】菜单免费获取! 
边栏推荐
猜你喜欢
unity shader 测试执行时间
Simple interaction between server and client
Typescript基本类型---上篇
How to analyze the neural network diagram, draw the neural network structure diagram
网络模型（DeepLab， DeepLabv3）
全新FIDE 编译简单评测
Primavera Unifier - AEM Form Designer Essentials
如何在移动钱包中搭建一个小程序应用商店
Data middle platform program analysis and development direction
Open Office XML 格式中的 Style 设计原理
随机推荐
腾讯电子签开发说明
【Prometheus】 Grafana数据与可视化
5分钟快速为OpenHarmony提交PR（Web）
零基础创作专业wordpress网站12-设置标签栏图标（favicon）
力扣打卡----打家劫舍
中移链EOSJS实战使用
mindspore 执行模型转换为310的mindir文件显示无LRN算子
STM32之串口传输结构体
The mathematical knowledge required for neural networks, the mathematical foundation of neural networks
Unity shader test execution time
企业展厅制作要具备的六大功能
收集awr
MySQL select count(*) count is very slow, is there any optimization solution?
QTableWidget 使用方法
HDRP shader gets pixel depth value and normal information
突破次元壁垒，让身边的玩偶手办在屏幕上动起来！
Adobe LiveCycle Designer 报表设计器
Typescrip编译选项
MATLAB实战Sobel边缘检测(Edge Detection)
深度神经网络与人脑神经网络哪些区域有一定联系?