目录
一、更多推荐
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+网页案例完整代码，主题涵盖30+种类型:
二、网页简介
本实例应用html5+css3+js： 导航栏、图片轮翻效果、视频、注册页面、登录页面等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页文件
本网页实例共包含7个页面：
四、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
五、代码展示
1.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>摩尔庄园</title>
</head>
<body>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="zixun.html">游戏资讯</a></li>
<li><a href="juese.html">时装展示</a></li>
<li><a href="jietu.html">游戏截图</a></li>
<li><a href="zhuce.html">账号注册</a></li>
<li><a href="denglu.html">用户登录</a></li>
</ul>
</nav>
<div class="content">
<!--顶部-->
<div class="banner" id="banner">
<ul id="b_pic">
<li style="display: block;"><img src="images/banner1.jpg" alt=""></li>
<li><img src="images/banner2.jpg" alt=""></li>
<li><img src="images/banner3.jpg" alt=""></li>
</ul>
<ul id="b_an">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bar">
<h2>游戏资讯</h2>
</div>
<div class="cs">
<div class="v">
<video controls="" autoplay="" name="media" width="440" height="275">
<source src="video/shipin.mp4" type="video/mp4">
</video>
</div>
<ul>
<li><a href="info.html">摩尔庄园手游黑森林是什么 黑森林背景故事</a></li>
<li><a href="info.html">摩尔庄园手游勇士什么时候出 勇士上线时间</a></li>
<li><a href="info.html">摩尔庄园黑森林什么时候上线 黑森林上线时间</a></li>
<li><a href="info.html">摩尔庄园手游6月5日停服维护公告 音乐节系列活动来袭</a></li>
<li><a href="info.html">童年经典摩尔庄园手游将于1月28日左右上线！</a></li>
<li><a href="info.html">3月26日摩尔庄园“稻香”测试将启</a></li>
</ul>
</div>
<div class="bar">
<h2>时装展示</h2>
</div>
<div class="list">
<ul>
<li class="sa"> <img src="images/1.jpg" /> </li>
<li class="sa"> <img src="images/2.jpg" /> </li>
<li class="sa"> <img src="images/3.jpg" /> </li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<footer class="end">
<p>摩尔庄园 </p>
</footer>
<script src="js/lunbo.js" type="text/javascript"></script>
</body>
</html>
...
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
}
html {
background: #f6ecd8
}
body {
width: 1200px;
margin: 0px auto;
line-height: 21px;
}
.clear {
clear: both
}
.menu li {
list-style: none
}
.logo {
font-size: 36px;
font-weight: bold;
color: #fff;
}
.banner {
position: relative
}
.menu {
background:#ff8a00;
margin-top:30px;
clear: both;
height: 60px;
width: 100%;
}
.menu li a {
color: #fff;
display: block
}
.menu li {
text-align: center;
display: inline-block;
line-height: 60px;
float: left;
width: 16.66%;
text-align: center;
font-weight:bold;
font-size: 18px;
}
.menu li:hover {
background: #FF6666
}
.content {
font-size: 14px;
width: 100%
}
.tit{ text-align:center; padding-top:40px; font-weight:normal;}
.index {
line-height: 32px;
height: 240px;
float: left;
width: 96%;
padding: 2%
}
.mr {
background: #d06855;
display: inline-block;
padding: 10px 30px;
color: #fff;
margin-top: 20px;
}
.list li {
width:33.3%;
float: left;
margin: 5px 0;
text-align: center
}
...
3.JS
代码如下（节选示例）：
window.οnlοad=function(){
//第一个幻灯
var pic_lis=document.getElementById('b_pic').getElementsByTagName('li');
var an_lis=document.getElementById('b_an').getElementsByTagName('li');
an_lis[0].style.background='#fff';
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='#ff6c00';
}
pic_lis[c].style.display='block';
an_lis[c].style.background='#fff';
}
var timer=setInterval(h_slide,4000);
for(var j=0; j<pic_lis.length; j++){
an_lis[j].index=j;
an_lis[j].οnmοuseοver=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='#ff6c00';
}
pic_lis[index].style.display='block';
an_lis[index].style.background='#fff';
}
an_lis[j].οnmοuseοut=function(){
timer=setInterval(h_slide,4000);
}
}
}
...
六、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
标签：css3,Web,style,网页,li,background,lis,display From： https://blog.csdn.net/VX_L_5201314168/article/details/144197987