661.大学生HTML期末大作业 —【新质生产力解码精品网页(6页)】 Web前端网页制作 html5+css3+js
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3+js： 图片轮翻、三级页面、下拉菜单、鼠标滑动特效、视频、留言表单、带设计说明报告等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含6个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="index_files/css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>主页</title>
</head>
<body>
<script>
function getD1(){
var date=new Date();
var d1=date.toLocaleString();
document.getElementById("datetime").innerHTML =d1;}
setInterval("getD1();",1000);
</script>
<div class="total">
<div class="head">
<div class="ma">
<div class="logo"> <img src="index_files/images/logo.jpg" width="250" /></div>
<div class="menu">
<ul class="nav_menu">
<li class="nav_menu-item"><a target="_blank" href="index.html" >首页</a></li>
<li class="nav_menu-item"><a target="_blank" href="jbys.html" >要素特征</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a target="_blank" href="jbys.html" >基本要素</a></li>
<li class="nav_submenu-item"> <a target="_blank" href="jbtz.html" >基本特征</a></li>
</ul>
</li>
<li class="nav_menu-item"><a target="_blank" href="xgxw.html" >相关新闻</a></li>
<li class="nav_menu-item"><a target="_blank" href="spjs.html" >视频介绍</a></li>
<li class="nav_menu-item"><a target="_blank" href="lyfk.html" >留言反馈</a></li>
</ul>
</div>
<div class="clear"></div><div id ="datetime"></div>
</div>
</div>
<div class="content" style="position:relative; padding-bottom:0">
<div class="banner">
<div class="banner" id="banner">
<ul id="b_pic">
<li style="display: block;"><img src="index_files/images/banner1.jpg" alt=""></li>
<li><img src="index_files/images/banner2.jpg" alt=""></li>
<li><img src="index_files/images/banner3.jpg" alt=""></li>
</ul>
<ul id="b_an">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="lsc">
<ul>
<a href="jbys.html">
<li style="background:rgba(226,54,54,0.8)">— 要素特征 — <p>新质生产力</p></li>
</a>
<a href="xgxw.html">
<li style="background:rgba(226,139,53,0.8)">— 相关新闻 — <p>新质生产力</p></li>
</a>
<a href="spjs.html">
<li style="background:rgba(69,137,202,0.8)">— 视频简介 — <p>新质生产力</p> </li>
</a>
<a href="lyfk.html">
<li style="background:#85C770">— 留言反馈 — <p>新质生产力</p> </li>
</a>
</ul>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#000}
img{ display:block}
body{ width:1000px; background:#ddd; margin:0 auto; line-height:21px}
.total{width: 1000px;height: 100%;margin:0 auto;}
.clear{ clear:both}
.menu li{ list-style:none}
.logo{ margin-left:10px; float:left}
.logo img{margin-left:15px;margin-top:10px; margin-bottom:12px; width:100px}
.banner{ position:relative; width:1000px;}
.banner1{ position:relative; width:1000px;margin-left:-50px;}
.head{background: #1F1F5A; height:150px;width:1000px;}
.menu{ text-align:center; float:right;margin-right: 30px;}
.menu li a{ padding:10px 20px; font-size:15px;color:#fff}
.menu li { float:center; padding:20px 0;}
.nav_menu {line-height: 16px;font-weight: 700;}
.nav_menu-item {display: inline-block;position: relative;width: 163px;text-align: center;}
.nav_menu-item:hover {background-color: #373535;}
.nav_menu-item:hover .nav_submenu {display: block;}
.nav_submenu {font-weight: 300;text-transform: none;display: none;position: absolute;width: 163px;background-color: #373535;text-align: center;}
.nav_submenu-item:hover {background:#6C6C70;width: 163px;}
.datetime{margin-left:20px;}
.jsc{ font-size:18px; line-height:30px}
.right{ text-align:left; float:center; width:900px; margin-right:10px; margin-left:50px;}
.left{ float:left; width:260px; margin-left:20px; padding:0px}
.mid{ float:left; width:460px; margin-left:20px; padding:0px}
.content{ clear:both;background:#fff ; padding-bottom:30px; width:100%}
.content,.ma{ width: 1000px; margin: 0 auto}
.content:after{ clear: both; display: block; content: ''}
.end{ clear:both; background: #1F1F5A; color:#fff; padding:20px 0; text-align:center;width:1000px;}
.produce img{ margin:0 20px 20px 0}
.produce { line-height:30px}
.pad{ padding:20px; display:block;margin-left: 30px;}
.pics p{ text-align:center}
.of{ width:600px; margin-left: 50px;}
.imglist{ width:100%; margin:0 auto}
.imglist li{ float:left; width:33.3%; text-align:center}
.imglist li:hover img{ opacity:0.7}
.imglist li img{ border-radius:10px; margin:0 auto; margin-bottom:10px; width:90%}
.imglist li p{ font-size:20px; padding-bottom:20px}
.scrollleft{ margin:0 0px}
.scrollleft li{ float:left; width:250px; margin-bottom:10px;}
.news li{ padding:5px;}
.banner2{ position:relative}
.banner2 div{ position:absolute; left:50%; margin-left:-350px; width:600px;top:50%; margin-top:-200px; text-align:center; padding:50px; background:rgba(255,255,255,0.5)}
.banner2 div p{ text-align:justify}
.banner2 div h3{ font-size:30px; margin:20px 0}
.banner3{ position:relative}
.banner3 div{ position:absolute; height:100%; right:5%; width:300px;top:0%; padding:0 50px; background:rgba(255,255,255,0.5)}
.banner3 div p{ text-align:justify; line-height:24px}
.banner3 div h3{ font-size:25px; weight:100px; height:50px;100px; margin:20px 0; padding-top:40px; }
#banner {
width: 100%;
height: 750px;
position: relative;
}
#banner ul#b_pic li {
width: 100%;
height: 750px;
float: center;
overflow: hidden;
position: absolute;
top: 0;
display: none;
left: 0px;
}
#banner ul#b_pic li img {
width: 100%;
height:550px;
display: block;
}
...
3.JS
代码如下（节选示例）：
window.onload=function(){
//第一个幻灯
var pic_lis=document.getElementById('b_pic').getElementsByTagName('li');
var an_lis=document.getElementById('b_an').getElementsByTagName('li');
an_lis[0].style.background='#b31114';
var c=0;
function h_slide(){
c++;
if(c==pic_lis.length){c=0;}
for(var i=0; i<pic_lis.length; i++){
pic_lis[i].style.display='none';
an_lis[i].style.background='#fff';
}
pic_lis[c].style.display='block';
an_lis[c].style.background='#b31114';
}
var timer=setInterval(h_slide,4000);
for(var j=0; j<pic_lis.length; j++){
an_lis[j].index=j;
an_lis[j].onmouseover=function(){
index=this.index;
clearInterval(timer);
for(var k=0; k<an_lis.length; k++){
pic_lis[k].style.display='none';
an_lis[k].style.background='#fff';
}
pic_lis[index].style.display='block';
an_lis[index].style.background='#b31114';
}
an_lis[j].onmouseout=function(){
timer=setInterval(h_slide,4000);
}
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
18
0- 0
已为社区贡献24条内容
所有评论(0)