学生HTML动漫主题(人物)作业作品下载 个人人物博客网页设计制作 大学生个人网站作业模板 简单个人动漫主题网页制作
文章目录
网页作品介绍
效果演示
代码演示
源 码获取
网页作品介绍
本HTML静态网页作品采用DW制作，主题为华为热门产品，共10个页面，首页1页，二级图文页面1页，二级产品1页，三级产品详情6页，留言表单1页。 学生基础水平，未使用特殊技术，制作了留言表单页面，表单页面插入了背景图，美化了表单项。三级产品介绍页面直接调用的图片。 页面整体精美但!无技术难点，只是图片漂亮，适合中低要求。
效果演示
代码演示
<!DOCTYPE htmlPUBLIC "-//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=utf-8" /><title>首页</title><!--添加链入式--><link href="css/index.css" type="text/css" rel="stylesheet" /><!--添加链入式结束-->
</head><body><a name="1"></ a><!--添加1号书签-->< a href=" ">我在找OA系统</ a><br /><!--添加head--><div id="head">< img src="data:images/twoo.png" /><!--添加head_hf--><div id="head_hf">< a href="#">首页</ a>< a href="list.html" target="_blank">内容</ a>< a href="content.html" target="_blank">详情</ a>< a href="#">介绍</ a>< a href="#">更多</ a></div><!--添加head_hf结束--></div><!--添加head结束--><!--添加top--><div id="top"></div><!--添加top结束--><!--添加banner--><div id="banner"><!--添加banner_nr--><div id="banner_nr"><!--添加banner_nr_left--><div id="banner_nr_left"><h2>11月22日</h2><p>上映时间</p ></div><!--添加banner_nr_left结束--><!--添加banner_nr_right--><div id="banner_nr_right"><h2>历经6年倾力之作</h2><p>敬请期待...</p ></div><!--添加banner_nr_right结束--></div><!--添加banner_nr结束--></div><!--添加banner结束--><!--添加conten--><div id="content"><h2>神秘魔法从天而降，艾莎生世如何揭晓</h2><p>让我们一探究竟...</p ><div class="one">< img src="data:images/two.jpg" /></div></div><!--添加conten结束--><!--添加nav--><div id="nav"><!--添加two--><div class="two"><h2>相关视频</h2><p>冒险旅程</p ></div><!--添加two结束--><!--添加vi--><div id="vi"><video width="800px" height="500px" controls="controls" /><source src="videos/jianji.mp4" type="video/mp4" /></div><!--添加vi结束--></div><!--添加nav结束--><!--添加sc--><div id="sc"></div><!--添加sc结束--><!--添加footer--><div id="footer">< img src="data:images/twos.png" /><!--添加footer_right--><div id="footer_right"><span>< a href="#">关于网页</ a></span><span>< a href="#">制作人员</ a></span><span>< a href="#">联系作者</ a></span><span>< a href="#1">返回顶部</ a></span></div><a name="d3"></ a><!--添加footer_right结束--></div><!--添加footer结束-->
</body></html>@charset "utf-8";
/*设置全局控制*/*{ margin:0; padding:0;}
/*添加body的背景图片*/body{ background-color:000;font-family:楷体; /*给予body全体文字为楷体*/}
/*设置head开始*/#head{ height:60px;background-color:#000;}#head_hf{ height:60px;width:600px;background-color:#000;float:right; /*设置为右浮动*/line-height:60px; /*行高为60px*/}#head_hf a{ display:block;width:120px;height:55px;float:left; /*设置为左浮动*/text-align:center; font-size:22px;}#head_hf a:link,#head_hf a:visited{background-color:#000;color:#CFB53B;text-decoration:none; /*消除下划线*/}#head_hf a:hover{ border-bottom:solid 2px #CFB53B;background-color:#212121;color:#FFF;}
/*设置head结束*/
/*设置top开始*/#top{ height:670px;background-image:url(../images/44.jpg);background-size:100% 100%; /*背景图片大小*/background-repeat:no-repeat; /*背景图片不做任何平铺*/}
/*设置top结束*/
/*设置banner开始*/#banner{ height:150px;margin:0 auto; /*上下边距为0，且此盒子居中于父级*/background-color:#212121;}#banner_nr{ width:842px;height:150px;margin:0 auto; /*上下边距为0，且此盒子居中于父级*/background-color:#cfb53b;}#banner_nr_left{ float:left; /*设置为左浮动*/height:150px;width:420px;background-color:#212121;}#banner_nr_left h2{ text-align:center; /*此盒子文本元素居中*/color:#cfb53b;font-size:50px;margin-top:20px;}#banner_nr_left p{ color:#bdbdbd;text-align:center;font-size:36px;}#banner_nr_right{ float:right; /*设置为右浮动*/height:150px;width:420px; background-color:#212121;}#banner_nr_right h2{ text-align:center;color:#cfb53b;font-size:50px;margin-top:20px;}#banner_nr_right p{ color:#bdbdbd;text-align:center;font-size:36px;}
/*设置banner结束*/
/*设置content开始*/#content{ height:1200px;background-image:url(../images/010.jpg);background-attachment:fixed; /*给予此背景图片固定位置*/background-size:100% 100%; /*背景图片大小为100%*/background-repeat:no-repeat; /*背景图片不做任何平铺*/}
/*对于one类设置*/.one{ width:920px;height:920px;margin:50px auto;}#content h2{ color:#FFF;font-size:40px;text-align:center;line-height:80px; /*设置行高为80px*/margin-bottom:30px;}#content p{ color:#bdbdbd;text-align:center;font-size:28px; margin-top:20px;}
/*设置content结束*/
/*设置nav开始*/#nav{ height:600px; background-color:#000;}#nav h2{ color:#FFF;font-size:40px;text-align:center;line-height:60px; /*行高设为60px*/}#nav p{ color:#bdbdbd;text-align:center;font-size:28px; }
/*设置nav结束*/
/*设置视频*/#vi{ width:800px;height:500px;margin:0px auto;}.two{ background-color:#212121;height:100px;width:100%; }#sc{ height:800px;background-image:url(../images/55.jpg);background-size:100% 100%; /*背景图片大小为100%*/background-repeat:no-repeat; /*背景图片不做任何平铺*/}
/*设置footer开始*/#footer{ height:150px;background-color:#000;}#footer img{float:left;}#footer_right{ background-color:#000;width:800px;height:60px;text-align:center;line-height:60px; /*设置行高为60px*/float:right; /*设置为右浮动*/}#footer_right a{ display:block; /*将a标签转换为块级元素*/width:200px;height:58px;}#footer_right a:link,#footer_right a:visited{background-color:#000;color:#CFB53B;text-decoration:none; /*清除下划线*/}#footer_right a:hover{ border-bottom:solid 2px #CFB53B;background-color:#212121;color:#FFF;}#footer span{float:left;} /*设置为左浮动*/
/*设置footer结束*/
代码目录
前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
获取源码
❀ ~ 关注我，点赞博文~ 每天带你涨知识!
❀ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❀ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❀ 3.以上内容技术相关问题可以相互学习，可关注↓公众号 获取更多源码 !
学生HTML动漫主题(人物)作业作品下载 个人人物博客网页设计制作 大学生个人网站作业模板 简单个人动漫主题网页制作相关推荐
- Div+CSS、鼠标滑过特效、导航栏效果——简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5+CSS大作业--简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公 ...
- HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:游戏网站设计--腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...
- HTML5+CSS大作业——简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5+CSS大作业--简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公 ...
- HTML5期末大作业：游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:游戏网站设计--腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...
- HTML5期末大作业：网购商城网站设计——服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载 个人商城网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:网购商城网站设计--服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载 个人商城网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计 ...
- HTML5期末大作业：个人商城网站设计——商城个人中心网站模板(56页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:个人商城网站设计--商城个人中心网站模板(56页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 ...
- web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:电影网站设计--电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 文章 ...
- HTML+CSS大作业——商城个人中心网站模板(56页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:个人商城网站设计--商城个人中心网站模板(56页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 一.作品展示 二.文件目录 三.代码实现 <!doctype ...
- 美食主题网页设计 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 dreamweaver简单个人网页制作
HTML5期末大作业--美食主题6页面带导航下拉菜单 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设计源码HTML ...
- HTML期末大作业:学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 dreamweaver简单个人网页制作...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
最新文章
- 底部固定菜单_捡起一只妲己团团，附送一个同校固定队友！还有这种好事？
- 1.10 访问对象的属性和行为
- 主成分分析(PCA)原理详解_转载
- Symbol Mc1000 快捷键 的 设置 事件 开发
- mysql数据库实操笔记20170418
- 网络协议篇之CWMP协议（一）—— CWMP（TR-069）基础
- 飞凌OK6410A 多媒体视频编解码 player-qt4 QT视频播放器
- Laya shader opengles 2.0 第一章-飘扬的旗帜 gitee代码
- 经验分享：半桥电路的工作原理及注意问题（转载）
- Definer 预言机攻击事件分析
- 微信公众号怎么清缓存
- Perl年满30岁，其社区继续蓬勃发展
- 打工还是创业？思路决定出路！
- A Vertical Kelvin Test Structure for Measuring the True Specific Contact Resistivity
- MacOS好用的系统清理工具CleanMyMac有哪些特点功能?
- HA_ProxyCap_v302
- 计算机网络中帧和字节的关系,关于“帧frame”、“比特bite”、“字节byte”
- 子墨掩码到底是干嘛的？
- 流媒体文件应用常见问题解答
- 【教程】dropbox+droppages搭建静态网页