文章目录
网页作品介绍
效果演示
代码演示
源码获取
网页作品介绍
本HTML静态网页作品采用DW制作，主题为华为热门产品，共10个页面，首页1页，二级图文页面1页，二级产品1页，三级产品详情6页，留言表单1页。 学生基础水平，未使用特殊技术，制作了留言表单页面，表单页面插入了背景图，美化了表单项。三级产品介绍页面直接调用的图片。 页面整体精美但!无技术难点，只是图片漂亮，适合中低要求。
效果演示
代码演示
首页
< a href=" ">我在找OA系统
< img src="images/twoo.png" />
< a href="#">首页
< a href="list.html" target="_blank">内容
< a href="content.html" target="_blank">详情
< a href="#">介绍
< a href="#">更多
神秘魔法从天而降，艾莎生世如何揭晓
让我们一探究竟...
< img src="images/two.jpg" />
@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.以上内容技术相关问题可以相互学习，可关注↓公众号 获取更多源码 !