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