文章目录
网页作品介绍
成果演示
代码演示
源码获取
网页作品介绍
本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.以上内容技术相干问题能够互相学习，可关注↓公众号 获取更多源码 !
发表回复