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

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

时间：2020-07-11 18:38:54

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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》是一部上映的3D电脑动画电影。该影片由照明娱乐公司制作并由环球影片公司发行，是电影《卑鄙的我》的续集。电影由皮艾尔-柯芬与克里斯-雷纳德导演，辛柯-保罗与肯-多利欧编剧。影片在上映后受到了观众的欢迎，并且连续两周成为美国票房榜首位。</p><p></p><p></p><p></p></div></div><div class="clear"></div><div class="nav"><ul><li><a href="index.html">首页</a> </li><li><a href="about.html">关于电影</a> </li><li><a href="jies号.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><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;}.jies号_con{width:900px; height:auto; padding:30px; margin:auto; position:absolute; margin:6%; background-color:rgba(0,0,0,0.5);}.jies号_con h2{font-size:22px; line-height:32px;}.jies号_con p{font-size:14px; line-height:24px; text-indent:2em;}.jies号_main{width:900px; height:400px; overflow-y:scroll; }.jies号_div{width:760px; height:auto; margin:auto;}.jies号_div_t{width:760px; height:40px; font-size:18px; line-height:38px; margin:auto;}.jies号_div_l{width:250px; height:auto; float:left; }.jies号_div_l img{width:250px;}.jies号_div_r{width:500px; height:auto; float:left;padding-left:10px; font-size:14px;color:#eee; line-height:26px;}.jies号_div_r p{font-size:14px;color:#eee; line-height:26px;}.jies号_list{width:900px; height:auto; margin:auto;}.jies号_list ul{}.jies号_list li{float:left; margin:10px 20px;}.jies号_list img{width:240px; height:140px;}.jies号_xia{width:760px; height:50px; margin:auto; text-align:left; color:#fff; line-height:50px; font-size:18px;}.jies号_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、视频、音乐，表单技术的使用；页面清爽、美观、大方，不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。