文章目录
网页作品介绍
成果演示
代码演示
源码获取
网页作品介绍
本HTML动态网页作品采纳DW制作，主题为华为热门产品，共10个页面，首页1页，二级图文页面1页，二级产品1页，三级产品详情6页，留言表单1页。 学生根底程度，未应用非凡技术，制作了留言表单页面，表单页面插入了背景图，丑化了表单项。三级产品介绍页面间接调用的图片。 页面整体精美但!无技术难点，只是图片丑陋，适宜中低要求。
成果演示
代码演示
<!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=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="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="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="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.以上内容技术相干问题能够互相学习，可关注↓公众号 获取更多源码 !