HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 html网页规划与设计

最新推荐文章于 2024-06-05 10:08:21 发布

IT黑马程序员

最新推荐文章于 2024-06-05 10:08:21 发布

阅读量462

点赞数 4

分类专栏：学生网页设计作业文章标签： javascript大作业 web实训大作业 web大作业 web课程设计

本文链接：https://blog.csdn.net/qq_38513433/article/details/128658055

版权

学生网页设计作业专栏收录该内容

2018 篇文章 134 订阅

订阅专栏

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代码结构 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>神偷奶爸</title>
<link href="css/css.css" type=text/css rel=stylesheet>
</head>
<body style="background:url(images/bj1.jpg) top center no-repeat;">
<div class="main">
  <div class="index_con">
    <h2>神偷奶爸2</h2>
    <p>《神偷奶爸2》是一部2013年上映的3D电脑动画电影。该影片由照明娱乐公司制作并由环球影片公司发行，是2010年电影《卑鄙的我》的续集。电影由皮艾尔-柯芬与克里斯-雷纳德导演，辛柯-保罗与肯-多利欧编剧。影片在上映后受到了观众的欢迎，并且连续两周成为美国票房榜首位。</p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</div>
<div class="clear"></div>
<!-----------------end main--------------------->
<div class="nav">
  <ul>
    <li><a href="index.html">首页</a> </li>
    <li><a href="about.html">关于电影</a> </li>
    <li><a href="jieshao.html">角色介绍 </a> </li>
    <li><a href="shangying.html">上映时间 </a></li>
    <li><a href="ziliao.html">资料介绍 </a></li>
    <li><a href="huojiang.html">获奖情况 </a></li>
    <li><a href="pingjia.html">影片评价 </a></li>
    <li><a href="yuanchuang.html">原创动画 </a></li>
  </ul>
</div>
<!-----------------end nav--------------------->
<div class="clear"></div>
</body>
</html>

2.CSS样式代码 🏠



* { margin:0; padding:0; font-family:Verdana, Geneva, sans-serif;}
IMG { border:none;}
ul,li{ list-style:none; list-style-type:none;} 
A {	COLOR: #257ec0; TEXT-DECORATION: none}
A:hover {	COLOR: #ff7202; TEXT-DECORATION: underline}
.center{ text-align:center;}
.fl{ float:left;}
.fr{ float:right;}
.clear{ clear:both;}

.main{ width:100%; height:auto; min-height:700px; margin:30px auto; font-size:16px; color:#eee; line-height:26px;}

.index_con{width:500px; height:auto; padding:30px; margin:auto; position:absolute; margin:10%; background-color:rgba(0,0,0,0.5);}
.index_con h2{ font-size:34px; line-height:46px;}
.index_con p{ font-size:14px; line-height:26px; text-indent:2em;}

.jieshao_con{width:900px; height:auto; padding:30px; margin:auto; position:absolute; margin:6%; background-color:rgba(0,0,0,0.5);}
.jieshao_con h2{ font-size:22px; line-height:32px;}
.jieshao_con p{ font-size:14px; line-height:24px; text-indent:2em;}



.jieshao_main{width:900px; height:400px; overflow-y:scroll; }
.jieshao_div{width:760px; height:auto; margin:auto;}
.jieshao_div_t{width:760px; height:40px; font-size:18px; line-height:38px; margin:auto;}
.jieshao_div_l{ width:250px; height:auto; float:left; }
.jieshao_div_l img{ width:250px;}
.jieshao_div_r{ width:500px; height:auto; float:left;padding-left:10px; font-size:14px;color:#eee; line-height:26px;}
.jieshao_div_r p{font-size:14px;color:#eee; line-height:26px;}


.jieshao_list{width:900px; height:auto;  margin:auto;}
.jieshao_list ul{}
.jieshao_list li{ float:left; margin:10px 20px;}
.jieshao_list img{ width:240px; height:140px;}


.jieshao_xia{width:760px; height:50px; margin:auto; text-align:left; color:#fff; line-height:50px; font-size:18px;}
.jieshao_xia a{color:#fff; line-height:50px; font-size:26px;}


.nav{width:100%; height:50px; margin:auto; position:absolute; bottom:20px; background:#ffff01;  }
.nav ul{ width:1100px; margin:auto; }
.nav li{  text-align:center; float:left; padding:5px 15px; }
.nav li a{ font-size:22px; color:#000; line-height:40px;  font-family:榛戜綋; font-weight:bold;}
.nav li a:hover{ text-decoration:none; color:#fff;}
.nav li:hover{ background:#900;}
.nav li:hover a{  color:#fff;}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥 在这里插入图片描述

IT黑马程序员

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 html网页规划与设计

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
复制链接

扫一扫