目录
一、网页简介
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html5+css3+js： 导航菜单、图片轮翻效果、三级页面、下拉菜单、鼠标滑动特效等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含23个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欧麦喜官网</title>
<link href="css/rest.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="css/video-js.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main1 animated bounceInDown" data-wow-delay="4.4s">
<div class="index_top">
<div class="w1200">
<div class="nav animated bounceInRight " style="animation-delay:1s;-webkit-animation-delay:1s;">
<div class="nav_logo fl"><img src="images/logo.png"></div>
<div class="nav_ul fr">
<ul>
<li>
<a href="#">企业•实力 </a>
<dl>
<dd><a href="#">企业•实力1</a></dd>
<dd><a href="#">企业•实力2</a></dd>
<dd><a href="#">企业•实力3</a></dd>
</dl>
</li>
<li>
<a href="#">极简•形象</a>
<dl>
<dd><a href="#">极简•形象1</a></dd>
<dd><a href="#">极简•形象2</a></dd>
<dd><a href="#">极简•形象3</a></dd>
</dl>
</li>
<li>
<a href="#">喜作•产品</a>
<dl>
<dd><a href="#">喜作•产品1</a></dd>
<dd><a href="#">喜作•产品2</a></dd>
<dd><a href="#">喜作•产品3</a></dd>
</dl>
</li>
<li class="cur"><a href="#">欧麦喜</a></li>
<li>
<a href="#">合作•惊喜</a>
<dl>
<dd><a href="#">合作•惊喜1</a></dd>
<dd><a href="#">合作•惊喜2</a></dd>
<dd><a href="#">合作•惊喜3</a></dd>
</dl>
</li>
<li>
<a href="#">火爆•动态</a>
<dl>
<dd><a href="#">火爆•动态1</a></dd>
<dd><a href="#">火爆•动态2</a></dd>
<dd><a href="#">火爆•动态3</a></dd>
</dl>
</li>
<li>
<a href="#">联系•我们</a>
<dl>
<dd><a href="#">联系•我们1</a></dd>
<dd><a href="#">联系•我们2</a></dd>
<dd><a href="#">联系•我们3</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
@media (min-width:0px) and (max-width:1200px) ,(min-height: 0px) and (max-height: 800px) {
.fixicon{width: 60px;height: 400px;position: fixed;right: 0px;bottom: 10px;}
.fixicon a{float: left;margin-bottom: 10px;}
.fixicon a img{width: 60px;}
}
@media (min-width:1200px) and (min-height: 800px) {
.fixicon{width: 110px;height: 600px;position: fixed;right: 10px;bottom: 10px;}
.fixicon a{float: left;margin-bottom: 10px;}
}
.nav{height: 200px;width:100%;z-index:8;transition:all 0.2s;}
.nav_black li a{color: #2c2d30;}
.nav_logo{margin: 53px 0 25px 0;}
.nav_ul{margin: 77px 0 0 0;}
.nav_ul ul li{float:left;height:70px;line-height:70px;position:relative;transition:all 0.2s;margin-left: 30px;}
.nav_ul a{font-size: 21px;color: #ffffff;/* margin-left:30px; */transition:all 0.2s;padding: 5px 10px;}
.nav_ul ul li.cur a{border: 1px solid #71b057;color: #71b057;}
.nav_ul ul li:hover a{border: 1px solid #71b057;color: #71b057;}
.nav_ul ul li:hover dl{display:block;}
.nav_ul dl{position:absolute;top:70px;border-top:0px;display:none;}
.nav_ul dl dd{height:40px;line-height:40px;width:148px;margin-bottom: 10px;}
.nav_ul dl dd a{display:block;width:100%;height:40px;line-height:40px;margin:0px;padding:0px;overflow:hidden;text-indent:18px;background:url(../images/nav_bg1.png) 148px center no-repeat;transition:all 0.5s;}
.nav_ul dl dd a:hover{background:#f6f6f6 url(../images/nav_bg1.png) 130px center no-repeat;text-indent: 10px;}
.main1{width: 100%;overflow:hidden;position: relative;}
.main2{background: #000 url(../images/bg2.jpg) no-repeat top center;width: 100%;height:1080px;overflow:hidden;}
.main3{background:url(../images/bg3.jpg) no-repeat center center;width: 100%; height:1140px; overflow:hidden;}
.main4{background:url(../images/bg4.jpg) no-repeat center center;width: 100%; height:1080px; overflow:hidden;}
.main5{background:url(../images/bg5.jpg) no-repeat center center;width: 100%; height:972px; overflow:hidden;}
.maincom{position: absolute;left: 50%; top:50%;}
.main1-0 {width:143px;height:672px;left: 0;top: 227px;background:url(../images/part1-0.png) no-repeat;}
.main1-1 {width:417px;height:112px;margin: 262px 0 0 102px;background:url(../images/part1-1.png) no-repeat;}
.main1-2 {width:417px;height:47px;margin: 410px 0 0 102px;background:url(../images/part1-2.png) no-repeat;}
.main1-3 {width:418px;height:27px;margin: 478px 0 0 102px;background:url(../images/part1-3.png) no-repeat;}
.main2-0 {width:730px;height:410px;left: 0px;top: 547px;}
.main2-1 {width:415px;height:425px;top: 145px;left: 785px;}
.main2-2 {width:415px;height:425px;top:600px;left: 785px;}
.main2-3 {width:129px;height:93px;margin: 740px 0 0 -547px;background:url(../images/part2-3.png) no-repeat;}
.main3-0 {width: 175px;height: 177px;margin: 894px 0 0 45px;background:url(../images/part3-0.png) no-repeat;}
.main3-1 {width: 392px;height: 177px;margin: 900px 0 0 236px;background:url(../images/part3-1.png) no-repeat;}
.main4-0 {width: 1145px;height: 586px;margin: 104px 0 0 -554px;background:url(../images/part4-0.png) no-repeat;}
.main4-1 {width: 1180px;height: 288px;margin:570px 0 0 -600px;background-color:#9ac680;padding: 25px 10px;}
.main5-0 {width:494px;height:94px;margin: 110px 0 0 -257px;background:url(../images/part5-0.png) no-repeat;}
.main5-1 {width:866px;height:77px;margin: 250px 0 0 -433px;background:url(../images/part5-1.png) no-repeat;}
.main5-2 {width:471px;height:44px;margin: 347px 0 0 -235px;background:url(../images/part5-2.png) no-repeat;}
.indexpro{}
.indexpro img{width: 415px;height: 285px;float: left;}
.indexpro p{background-color: #2c2d30;width: 365px;float: left;text-align: left;}
.indexpro p.p1{color: #71b057;font-size: 18px;padding: 25px;}
.indexpro p.p2{font-size: 14px;color: #fff;line-height: 22px;padding:0 25px 25px 25px;}
/*footer*/
.footer { width: 100%; height: 400px; background: #2c2d30; position: relative;}
.footer ul { display: block; width: 1200px; margin: 0 auto; padding-top: 80px; }
.footer ul li { float: left; }
.footer ul li:nth-of-type(1) {width: 435px;}
.footer ul li:nth-of-type(1) p span {color: #fff;font-size: 14px;font-family: "Microsoft YaHei";}
.footer ul li:nth-of-type(1) p { margin-bottom: 10px; position: relative; }
.footer ul li:nth-of-type(1) p input {width: 300px;height: 45px;background: #858587;border:none;outline: none;padding-left: 10px;color: white;font-size: 14px;margin-left: 20px;}
.footer ul li:nth-of-type(1) p:nth-of-type(2) input { margin-left: 18px; }
.footer ul li:nth-of-type(1) textarea {width: 298px;height: 100px;border:none;outline: none;padding-left: 10px;color: white;background: #858587;font-size: 14px;margin: 28px auto;padding-top: 5px;position: absolute;top: -26px;left: 60px;}
.footer ul li:nth-of-type(1) p:nth-last-of-type(1) { margin-top: 100px; }
.fbtn1,.fbtn2 {width: 140px;height: 40px;line-height: 40px;font-size: 16px;border:none;margin: 0 10px;outline: none;cursor: pointer;}
.fbtn1 {background: #858587;color: #fff;border: 2px solid #858587;margin-left: 60px;}
.fbtn1:hover { background: #a74f49;border: 2px solid #a74f49; }
.fbtn2 {background: #858587;color: #fff;border: 1px solid #858587;}
.fbtn2:hover { background: #333; border: 2px solid #333;}
.footer ul li:nth-of-type(2) img {border-left: 1px solid #fff;border-right: 1px solid #fff;padding: 0 65px;}
.footer ul li:nth-of-type(3) { width: 400px; color: #CCCCCC; margin-left: 40px;}
.footer ul li:nth-of-type(3) p {color: #CCCCCC;font-size: 16px;margin-top: 11px;}
.footer ul li:nth-of-type(3) p span { display: inline-block; color: #9ac680; font-size: 16px;border: 1px solid #9ac680; border-radius: 50%; padding: 11px 5px; margin-right: 10px;}
.footer ul li:nth-of-type(3) em { font-size: 38px; color: #fff; font-style: normal; font-weight: bold; }
.footer ul li:nth-of-type(3) em img { margin-right: 5px; }
.flink {width: 100%;background: #2c2d30;padding: 20px 0;text-align: center;}
.flink p {color: #fff;font-size: 13px;}
.flink p:nth-of-type(1) { margin-bottom: 10px; }
.flink p a {color: #fff;margin-left: 10px;}
.flink p a:hover { color: #9F9466; }
.page-logo{background:url(../images/page-logo.jpg) no-repeat center center;width: 100%; height:1080px; overflow:hidden;}
.cumb{height: 60px;background-color:#71b057;}
.cumba a{color: #3e3a39;border:1px solid #fff;border-radius: 20px;font-size: 21px;margin: 10px 0;float: left;height: 35px;line-height: 35px;padding: 0 10px;margin-right: 10px;width: 105px;text-align: center;}
.cumba a:hover{color: #313131;background: #fff;}
.cumba a.cur{color: #313131;background: #fff;font-weight: bold;}
.page-logo-m{background:url(../images/page-logo-m.jpg) no-repeat center center;width: 100%; height:1080px; overflow:hidden;}
.page-sjcx-m{background:url(../images/page-sjcx-m.jpg) no-repeat center center;width: 100%; height:2125px; overflow:hidden;}
.write-cumb{background:url(../images/write-cumb.png) no-repeat center center;width: 100%;overflow:hidden;padding-top: 85px;}
.write-dh{width: 192px;height: 192px;border: 1px solid #fff;padding: 10px;margin: 0 auto;border-radius: 50%;}
.write-dh span{background-color: #fff;color:#2c2d30;font-size: 58px;border-radius: 50%;width: 192px;height: 192px;float: left;line-height: 192px;text-align: center;}
.logotext{font-size: 24px;line-height: 43px;color: #fff;position: absolute;right: 170px;top: 562px;}
.sjcxtext{font-size: 24px;line-height: 43px;color: #2c2d30;position: absolute;right: 10px;top: 1414px;}
.page-vi-m{background:url(../images/page-vi-m.jpg) no-repeat center center;width: 100%; height:193px; overflow:hidden;padding: 85px 0 115px 0;}
...
3.JS
代码如下（节选示例）：
videojs.addLanguage("zh-CN",{
"Play": "播放",
"Pause": "暂停",
"Current Time": "当前时间",
"Duration Time": "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
"LIVE": "直播",
"Loaded": "加载完毕",
"Progress": "进度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Mute": "静音",
"Unmute": "取消静音",
"Playback Rate": "播放码率",
"Subtitles": "字幕",
"subtitles off": "字幕关闭",
"Captions": "内嵌字幕",
"captions off": "内嵌字幕关闭",
"Chapters": "节目段落",
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
"No compatible source was found for this media.": "无法找到此视频兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。"
});
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
