web前端期末大作业——网页制作基础大二dw作业——动画漫展学习资料电影模板(6页)

举报
IT司马青衫 发表于 2022/08/13 17:44:41 2022/08/13
【摘要】 HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。@TOC 一、网页介绍1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精...

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">
	<title>二当家的视频资料分享--电影资源下载</title>
	<meta content="免费电影下载,电影下载,最新电影" name="Keywords">
	<meta content="最新的电影下载网,分享最新电影资源,高清电影,电视剧下载!" name="Description">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
	<link rel="stylesheet" type="text/css" href="css/else.css"/>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
	<header class="wrap-header">
		<div class="header-top">
			  <div class="center-inner">
			      <div class="header-search">
					<input type="text"/><a class="search-btn" href="#"><i class="glyphicon glyphicon-search"></i></a>
				  </div>
				  <div class="header-top-r">
					<div class="login-before">
					   <a href="login.html">登录</a>
					   <a href="register.html">注册</a>
					 </div>
					<div class="login-after" style="display:none">
						<div class="number-center">
							<a class="num-name" href="#">王的稀饭...</a>
							<a class="num-jf" href="#">积分<em>2000</em></a>
							<a href="#">退出</a>
						</div>
					</div>
			   </div>
			</div>
		</div>
		<div class="header-banner">
		   <div class="center-inner">
				<div class="logo-group">
				   <a href="../index.html" class="logo">二当家的</a><span>分享最好的资源</span>
				</div>
				<!-- <div class="header-search">
					<input type="text"/><a class="search-btn" href="#"><i class="glyphicon glyphicon-search"></i></a>
				</div> -->
			</div>
	   </div>
	   <div class="wrap-nav">
	   	  <div class="center-inner">
	   	  	  <nav class="navbar navbar-default" role="navigation">
				      <ul class="nav navbar-nav">
				         <li class="dropdown active">
				            <a href="#" class="dropdown-toggle" data-toggle="dropdown">学习视频 <b class="caret"></b></a>
				             <ul class="dropdown-menu">
				               <li><a href="../learn/index.html">Php</a></li>
				               <li><a href="../learn/index.html">Javascript</a></li>
				               <li><a href="../learn/index.html">Linux</a></li>
				            </ul>
				          </li>
				         <li><a href="#">电影资源</a></li>
				         <li class="">
				            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
				               动漫资源
				            </a>
				         </li>
				      </ul>
				   
             </nav>
	   	  </div>
	   </div>
	</header>
	<div class="wrap-container">
		<div class="center-inner main">
			<div class="list-container">
				<div class="list-nav-box">
				    <div class="list-nav-hd">影视资源</div>
					<div class="list-nav-row clearfix">
						 <span class="hd">类型:</span>
                         <div class="bd">
                         	 <ul class="">
                         	    <li class="course-nav-item on">
	                                <a href="/course/list">全部</a>
	                            </li>
	                            <li class="course-nav-item">
	                                <a href="/course/list">爱情</a>
	                            </li>
	                            <li class="course-nav-item">
	                                <a href="/course/list">动作</a>
	                            </li>
	                            <li class="course-nav-item">
	                                <a href="/course/list">喜剧</a>
	                            </li>
	                             <li class="course-nav-item">
	                                <a href="/course/list">悬疑</a>
	                            </li>
	                             <li class="course-nav-item">
	                                <a href="/course/list">伦理</a>
	                            </li>
	                             <li class="course-nav-item">
	                                <a href="/course/list">科幻</a>
	                            </li>
	                             <li class="course-nav-item">
	                                <a href="/course/list">犯罪</a>
	                            </li>
	                           </ul>
                         </div>
					</div>
			    </div>
			    <div class="list-main">
			       <table class="movieL table table-striped">
			       	  <thead><tr><th>名称</th><th>下载次数</th><th>作者</th><th>更新时间</th></tr></thead>
			       	  <tbody>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	<tr><td><a href="detail.html">2016年科幻《科洛弗道10号》BD中英双字幕</a></td><td><span>200</span></td><td><span>王者风范</span></td><td><span>2016-06-09</span></td></tr>
			       	  	
			       	  </tbody>
			       	  <tfoot></tfoot>
			       </table>
			     	<div class="page"></div>
			     </div>
			</div>
		</div>
	</div>
	<footer class="wrap-footer">
		<div class="center-inner">
			<p class="copyr">版权所属二当家的2016</p>
			<div class="kef">
				<p><span>QQ群:451374145</span><span>邮箱:451374145@qq.com</span><span>电话:15001898194</span></p>
			
			</div>
		</div>
	</footer>
</body>
</html>



2.CSS代码

@charset "utf-8";
/* CSS Document */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,i,s,b,u,pre,code,form,strong,label,em,a,iframe,fieldset,legend,input,button,textarea,p,blockquote,td,th{-webkit-text-size-adjust:none;margin:0;padding:0; text-decoration:none;}
input,button,select,textarea{outline:none}
textarea{resize:none}
table{border-collapse:collapse;}
a{ cursor:pointer;}
a img,img{border:0;}
address,caption,cite,code,dfn,em,th,var,i,u,b{font-style:normal;font-weight:400;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6,b{font-size:100%;font-weight:400;}
input,button,textarea,select{font-family:inherit;}
a{outline:none;text-decoration:none;}
a:hover{text-decoration:none;}
img,input{ vertical-align:middle;}
body,html{width:100%;font-size:14px;font-family:Arial,"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu ;}
*{*font-family:"Microsoft YaHei",微软雅黑}

.clearfix:after{visibility:hidden;display:block;font-size:0;content:"\20";clear:both;height:0;}
* html .clearfix{zoom:1;}/* IE6 */
.clear{ clear:both;overflow:hidden;height:0px;line-height:0;display:block;font-size:0;}
:first-child+html .clearfix{zoom:1;}/* IE7 */
.clearfix{zoom:1;}/* IE6/7 */
a,area{blr:expression(this.onFocus=this.blur());}/* for IE */
:focus{-moz-outline-style:none;}/* for Firefox */




三、个人总结

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

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

四、精彩推荐

1.看到这里了就 【点赞收藏博文】 三连支持下吧,你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】

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


💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app
在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200