目录
前言
软件公司响应式网页设计实例，应用html+css+js： Div、导航栏、三级菜单、下拉菜单、无缝滚动插件、图片轮翻效果、鼠标滑动特效、悬浮菜单、背景特效、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。
一、网页概述
网页布局为“同字型”的布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含12个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="lib/swiper/css/swiper.min.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--顶部-->
<div class="top_box">
<div class="container">
<div class="clearfix top_in">
<p class="left dec">网页游戏代理，页游平台研发</p>
<div class="right contact">
<div class="call contact_item">
<i class="iconfont icon-tubiao210"></i>
咨询热线：15920618199
</div>
<div class="other_contact contact_item">
<a href="javascript:;">
<i class="iconfont icon-qq1"></i>
</a>
<a href="javascript:;">
<i class="iconfont icon-weibo"></i>
</a>
<a href="javascript:;">
<i class="iconfont icon-weixin"></i>
</a>
</div>
<div class="search contact_item">
<a href="javascript:;"><i class="iconfont icon-11"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--导航-->
<div class="top_nav_box">
<div class="container">
<div class="clearfix">
<div class="logo left">
<a href="javascript:;">
<img src="images/logo.png" alt="">
</a>
</div>
<ul class="nav_list left clearfix">
<li class="item active">
<a href="javascript:;" class="nav_name">首页</a>
</li>
<li class="item">
<a href="javascript:;" class="nav_name">企业介绍</a>
</li>
<li class="item">
<a href="javascript:;" class="nav_name">产品介绍</a>
</li>
<li class="item">
<a href="javascript:;" class="nav_name">风格演示</a>
</li>
<li class="item">
<a href="javascript:;" class="nav_name">服务套餐</a>
<ul class="down_list">
<li class="down_list_item">
<a href="javascript:;">产品套餐</a>
</li>
<li class="down_list_item">
<a href="javascript:;">服务列表</a>
</li>
</ul>
</li>
<li class="item">
<a href="javascript:;" class="nav_name">游戏列表</a>
</li>
<li class="item">
<a href="javascript:;" class="nav_name">H5平台系统</a>
</li>
<li class="item">
<a href="javascript:;" class="nav_name">云服务器</a>
</li>
<li class="item">
<a href="javascript:;" class="nav_name">联系我们</a>
</li>
</ul>
</div>
</div>
<div class="screen_small">
<a href="javascript:;" class="small_logo">
<img src="images/logo.png" alt="">
</a>
<span class="screen_small_menu"><i class="iconfont icon-caidan"></i></span>
<ul class="screen_small_list">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">企业介绍</a>
</li>
<li>
<a href="#">产品介绍</a>
</li>
<li>
<a href="#">风格演示</a>
</li>
<li class="">
<a href="javascript:;">产品套餐</a>
</li>
<li class="">
<a href="javascript:;">服务列表</a>
</li>
<li>
<a href="#">游戏列表</a>
</li>
<li>
<a href="#">H5平台系统</a>
</li>
<li>
<a href="#">云服务器</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
</div>
<!--banner-->
<div class="swiper-container banner_container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="images/banner.jpg" alt="">
</a>
</div>
<div class="swiper-slide" >
<a href="#">
<img src="images/banner.jpg" alt="">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next banner_next"></div>
<div class="swiper-button-prev banner_prev"></div>
</div>
<!--服务介绍-->
<div class="service_wrap">
<div class="title">
<div class="title_top">
<h2><span class="color_b">S</span>ERVICE</h2>
</div>
<p class="title_name">服务介绍</p>
</div>
<div class="container">
<ul class="service_list clearfix">
<li class="service_item">
<div class="service_title">
<p class="default_title">01. 平台系统</p>
<p class="hover_title">
<span class="num">01</span>
<span class="name">平台系统</span>
</p>
</div>
<div class="service_pic">
<i class="service_icon"></i>
</div>
<div class="service_dec">
<p>215YX系统是我公司耗时2年研发的一套欣辰PHP系统，具有安全，…</p>
</div>
<a href="javascript:;" class="more_btn">More</a>
</li>
<li class="service_item">
<div class="service_title">
<p class="default_title">02. 游戏渠道</p>
<p class="hover_title">
<span class="num">02</span>
<span class="name">游戏渠道</span>
</p>
</div>
<div class="service_pic">
<i class="service_icon icon_game"></i>
</div>
<div class="service_dec">
<p>上百款热门火爆页游接入，长期保持接口更新，海量渠道全程协…</p>
</div>
<a href="javascript:;" class="more_btn">More</a>
</li>
<li class="service_item">
<div class="service_title">
<p class="default_title">03. 运营指导</p>
<p class="hover_title">
<span class="num">03</span>
<span class="name">运营指导</span>
</p>
</div>
...
2.CSS
代码如下（节选示例）：
@charset "UTF-8";
html {
font-size: 625%;
}
/* 初始化CSS */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
margin: 0;
padding: 0;
}
body {
background: #fff;
}
* {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s ;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s ;
}
fieldset,
img {
border: none;
}
img {
display: block;
}
ul,
ol {
list-style: none;
}
input {
padding-top: 0;
padding-bottom: 0;
outline: none;
color: #2d2d2d;
font-family: "microsoft yahei";
}
input::-moz-focus-inner {
border: none;
padding: 0;
}
button {
outline: none;
font-family: "microsoft yahei";
}
.gt {
font-family: "宋体";
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
select,
input {
vertical-align: middle;
}
select,
input,
textarea {
font-size: 12px;
margin: 0;
outline: none;
resize: none;
font-family: "microsoft yahei";
}
table {
border-collapse: collapse;
}
body {
color: #666;
font-size: 12px;
line-height: 20px;
min-height: 320px;
font-family: "microsoft yahei";
overflow-x: hidden;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
.clearit {
clear: both;
height: 0;
font-size: 0;
overflow: hidden;
}
a {
color: #2d2d2d;
text-decoration: none;
}
i {
font-style: normal;
}
a:hover {
text-decoration: none;
}
em {
font-style: normal;
}
.color_r {
color: #f00;
}
.color_b {
color: #1a81d2 !important;
}
.color_y {
color: #fbc111 !important;
}
.color_g {
color: #72c899 !important;
}
.color_w {
color: #fff !important;
}
.color_h {
color: #919191 !important;
}
.font_bold {
font-weight: bold;
}
.left {
float: left;
}
.right {
float: right;
}
.container {
margin: 0 auto;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.border-right-none {
border-right: none !important;
}
.border-none {
border: none !important;
}
.border-bottom-none {
border-bottom: none !important;
}
h1,
.h1 {
font-size: 36px;
}
h2,
.h2 {
font-size: 16px;
font-weight: normal;
}
h3,
.h3 {
font-size: 14px;
}
h4,
.h4 {
font-size: 13px;
}
h5,
.h5 {
font-size: 13px;
}
h6,
.h6 {
font-size: 12px;
}
.text_left {
text-align: left;
}
.text_right {
text-align: right;
}
.text_center {
text-align: center;
}
.text_justify {
text-align: justify;
}
.text_nowrap {
white-space: nowrap;
}
.text_lowercase {
text-transform: lowercase;
}
.text_uppercase {
text-transform: uppercase;
}
.text_capitalize {
text-transform: capitalize;
}
.font_sl {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mg15 {
margin: 0 0 15px 0;
}
.white_bg {
background: #fff !important;
}
.bread_page {
padding: 20px 0 20px 16px;
font-size: 14px;
color: #919191;
}
.bread_page a {
color: #919191;
}
.bread_page a:hover {
color: #f6a200;
}
/*头部*/
.top_box {
height: 0.4rem;
line-height: 0.4rem;
background: #fff;
border-bottom: 1px solid #f2f2f2;
}
.top_box .dec {
padding: 0 0.4rem 0 0.4rem;
border-right: 1px solid #f2f2f2;
}
.top_box .top_in {
color: #666666;
font-size: 14px;
}
.top_box .top_in .contact .contact_item {
display: inline-block;
vertical-align: middle;
}
.top_box .top_in .contact .call {
padding: 0 0.4rem 0 0.4rem;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
}
.top_box .top_in .contact .other_contact {
padding: 0 0.4rem 0 0.4rem;
border-right: 1px solid #f2f2f2;
}
.top_box .top_in .contact .other_contact a {
padding: 0 0.06rem;
color: #9b9b9b;
}
...
3.JS
代码如下（节选示例）：
/**
* Created by Administrator on 2017/10/25 0025.
*/
;(function(){
function _indexFn(){};
_indexFn.prototype = {
_init:function(){
this.scrollTop();
this.event();
},
_hover:function(parentEle){
$(parentEle).children().hover(function(){
$(this).addClass('active');
},function () {
$(this).removeClass('active');
});
},
scrollTop:function(){
var H = $(window).height();
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>H){
$('.float_box').show();
}else{
$('.float_box').hide();
}
});
$('.float_up').on('click',function(){
$('body,html').animate({scrollTop:0},500);
});
},event:function(){
$('.screen_small_menu').on('click',function(){
$(this).siblings('.screen_small_list').toggleClass('active');
});
$('.nav_list li').hover(function(){
$(this).find('.down_list').show();
},function(){
$(this).find('.down_list').hide();
});
}
}
window._indexFn = new _indexFn();
})();
$(function(){
_indexFn._hover('.float_list');
_indexFn._init();
});
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。