目录
一、网页简介
本实例应用html+css+js，包括bootstrap、jquery，响应式网页，可以根据不同的设备屏幕大小自动调整页面布局，手机等移动设备自适应界面，提高用户体验；适用于大学生网页课程作业设计、公司网页设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等主流编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本实例共包含9个页面
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>南京装修公司|南京装修报价|南京家装公司|2017装修效果图|</title>
<meta name="keywords" content="无效">
<meta name="description" content="南京亚驰装饰公司，一家集装修设计，施工为一体的互联网家居整装品牌，是全国首家推出45天极速装修的公司，装修施工高品质，致力整体家装,提供透明、环保、省心的装修服务!相继在长沙、北京、南京、杭州、上海、广州、深圳等城市开拓市场，">
<meta name="renderer" content="webkit">
<meta name="baidu-site-verification" content="QsxdEqkgCW" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<link href="css/common.css" type="text/css" rel="stylesheet">
<link href="font/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/style.js" type="text/javascript"></script>
<script src="js/cityselect.js" type="text/javascript"></script>
<script src="js/layer/layer.js" type="text/javascript"></script>
</head>
<body>
<!--幻灯片样式-->
<div class="header">
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="nav-left">
<h1 style="margin:0;">
<a href="index.html">
<img src="images/logo.jpg" alt="南京亚驰装饰公司" class="logo">
</a>
</h1>
</div>
</div>
<div class="col-xs-8 nav-center em16">
<ul class="clearfix ul_fl clear-mp nav" id="nav">
<li class="nLi"><a href="index.html" ><span>首页</span></a></li>
<li class="nLi"><a href="zxnewhome.html"><span>新房整装 </span><img style="margin-top:-20px;" src="images/qp.gif" id="qpone"></a></li>
<li class="nLi"><a href="gdzhibo.html"><span>工地直播 </span><img style="margin-top:-20px" src="images/qp.gif" id="qptwo"></a></li>
<li class="nLi"><a href="zxbaojia.html"><span>装修报价</span></a></li>
<li class="nLi"><a href="case.html"><span>精选案例</span></a>
<ul class="sub">
<li><a href="#">家装案例</a></li>
<li><a href="#">工装案例</a></li>
</ul>
</li>
<li class="nLi"><a href="about.html"><span>关于我们</span></a>
<ul class="sub">
<li><a href="about.html">公司介绍</a></li>
<li><a href="contact.html">联系方式</a></li>
</ul>
</li>
</ul>
<script>jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub",effect:"slideDown",delayTime:300,triggerTime:0,defaultPlay:false,returnDefault:true});</script>
</div>
<div class="col-xs-2 relative">
<img src="images/9.png">
<h4 style="position:absolute;top:5px; left: 35px;font-weight: bold; color:#F34D50; text-indent: 2px">4000-000-000</h4>
<h5 style="position:absolute;top:30px; left: 35px; color: #888888">移动热线：12345678910</h5>
</div>
</div>
</div>
</div>
<div class="bodyer">
<!--幻灯片-->
<div class="nhbanner">
<div class="slideBox_banner">
<div class="hd"><ul></ul></div>
<div class="bd">
<ul>
<li style=""><a href="#"><img src="images/banner1.jpg"></a></li>
<li style=""><a href="#"><img src="images/banner2.jpg"></a></li>
<li style=""><a href="#"><img src="images/banner3.jpg"></a></li>
</ul>
</div>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<script>jQuery(".slideBox_banner").slide({mainCell:".bd ul",autoPlay:true,delayTime:1000,interTime:3500});</script>
<div class="try_out">
<div class="clearfix homeBanneraAbout">
<div class="touimg"><img src="images/tux.png"></div>
<div class="delete_btn"><i class="fa fa-times"></i></div>
<div><h2>0元领取免费设计</h2><span class="places">亚驰装饰已为<em style="color:#FEDB00; font-style:normal;">98895</em>位业主提供免费设计</span></div>
<form action="" id="form-banner" class="clearfix">
<input class="name" type="text" id="username-banner" placeholder="请输入您的称呼">
<input class="tel" type="text" id="phone-banner" placeholder="填写手机号码，获取免费设计名额">
<input class="button" type="button" id="btn-banner" value="立即领取" οnclick="bnsign()">
</form>
</div>
</div>
</div>
<div class="index-entries">
<div class="allFloor_title_box"><div class="floor-titles"><span style="white-space: pre;"></span><span class="line"></span> <span style="white-space: pre;"></span><span class="txt">优势选择</span> <span style="white-space: pre;"></span><span class="line"></span></div> <p class="floor_summery">我们的优势能给你更好的装修体验</p>
</div>
<ul class="content-wrapper clearfix container">
<li class="entries-item">
<a href="#" class="clearfix" target="_blank">
<span class="entries-item-info">
<h5 class="entries-item-title">免费设计</h5>
<span class="entries-item-tip">获取三份设计方案</span>
</span>
<span class="entries-item-icon entries-item-icon-first"></span>
</a>
</li>
<li class="entries-item">
<a href="" target="_blank" class="clearfix">
<span class="entries-item-info">
<h5 class="entries-item-title">免费报价</h5>
<span class="entries-item-tip">算算装修要花多少钱</span>
</span>
<span class="entries-item-icon entries-item-icon-second"></span>
</a>
</li>
<li class="entries-item">
<a href="gdzhibo.html" target="_blank" class="clearfix">
<span class="entries-item-info">
<h5 class="entries-item-title">工地直播</h5>
<span class="entries-item-tip">时刻关注你的装修动态</span>
</span>
<span class="entries-item-icon entries-item-icon-third"></span>
</a>
</li>
<li class="entries-item">
<a href="" rel="nofollow" target="_blank" class="clearfix">
<span class="entries-item-info">
<h5 class="entries-item-title">装修保</h5>
<span class="entries-item-tip">专业质检排查62项装修指标</span>
</span>
<span class="entries-item-icon entries-item-icon-fourth"></span>
</a>
</li>
</ul>
</div>
<div class="Customer_case">
<div class="allFloor_title_box">
<div class="floor-titles"><span style="white-space: pre;"></span><span class="line"></span> <span style="white-space: pre;"></span><span class="txt">精选客户案例</span> <span style="white-space: pre;"></span><span class="line"></span>
</div>
<p class="floor_summery">精选真实成功客户案例，让你近距离了解</p>
</div>
<div class="slider">
<div class="bd">
<ul>
<li><a target="_blank" href="case_detailed.html"><img src="images/4.jpg"></a>
<div class="Case_info">
<div class="xxnr">
<div class="slide-js-tt">现代简约风格</div>
<div class="slide-info fontsize">新古典在形式上以浪漫主义为基础，强调线形流动的变化，色彩华丽，本案传承了优雅的气质和生活的品质感。</div>
<div class="slide-info">小区：<span class="slide-js-sz">时代中心一期</span></div>
<div class="slide-info">造价：<span class="slide-js-sz">6万</span></div>
<div class="slide-info">面积：<span class="slide-js-sz">80m²</span></div>
<div class="mtb40"><a href="case.html" class="morecase">查看更多案例</a></div>
</div>
</div>
</li>
<li><a target="_blank" href=""><img src="images/1.jpg"></a>
<div class="Case_info">
<div class="xxnr">
<div class="slide-js-tt">现代简约风格</div>
<div class="slide-info fontsize">新古典在形式上以浪漫主义为基础，强调线形流动的变化，色彩华丽，本案传承了优雅的气质和生活的品质感。</div>
<div class="slide-info">小区：<span class="slide-js-sz">时代中心一期</span></div>
<div class="slide-info">造价：<span class="slide-js-sz">6万</span></div>
<div class="slide-info">面积：<span class="slide-js-sz">80m²</span></div>
<div class="mtb40"><a href="#" class="morecase">查看更多案例</a></div>
</div>
</div>
</li>
<li><a target="_blank" href=""><img src="images/2.jpg"></a>
<div class="Case_info">
<div class="xxnr">
<div class="slide-js-tt">现代简约风格</div>
<div class="slide-info fontsize">新古典在形式上以浪漫主义为基础，强调线形流动的变化，色彩华丽，本案传承了优雅的气质和生活的品质感。</div>
<div class="slide-info">小区：<span class="slide-js-sz">时代中心一期</span></div>
<div class="slide-info">造价：<span class="slide-js-sz">6万</span></div>
<div class="slide-info">面积：<span class="slide-js-sz">80m²</span></div>
<div class="mtb40"><a href="#" class="morecase">查看更多案例</a></div>
</div>
</div>
</li>
<li><a target="_blank" href=""><img src="images/3.jpg"></a>
<div class="Case_info">
<div class="xxnr">
<div class="slide-js-tt">现代简约风格</div>
<div class="slide-info fontsize">新古典在形式上以浪漫主义为基础，强调线形流动的变化，色彩华丽，本案传承了优雅的气质和生活的品质感。</div>
<div class="slide-info">小区：<span class="slide-js-sz">时代中心一期</span></div>
<div class="slide-info">造价：<span class="slide-js-sz">6万</span></div>
<div class="slide-info">面积：<span class="slide-js-sz">80m²</span></div>
<div class="mtb40"><a href="#" class="morecase">查看更多案例</a></div>
</div>
</div>
</li>
</ul>
</div>
<div class="hd"><ul></ul></div>
<div class="pnBtn prev"><span class="blackBg"></span><a class="arrow" href="javascript:void(0)" style="display: none;"></a></div>
<div class="pnBtn next"><span class="blackBg"></span><a class="arrow" href="javascript:void(0)" style="display: none;"></a>
</div>
</div>
</div>
......
2.CSS
代码如下（节选示例）：
.nhbanner {
width: 100%;
height: 650px;
position: relative
}
.slideBox_banner{
width: 100%;
min-width: 1200px;
height: 650px;
position: relative;
text-align: center;
overflow: hidden;
z-index: 12;
}
.slideBox_banner .hd{}
.slideBox_banner .bd{ margin-top: -10px;}
.slideBox_banner .bd img{width: 100%; height: 100%}
.slideBox_banner .prev, .slideBox_banner .next {
width: 45px;
height: 99px;
position: absolute;
top: 200px;
z-index: 3;
filter: alpha(opacity=20);
-moz-opacity: .2;
opacity: .2;
-webkit-transition: All .5s ease;
-moz-transition: All .5s ease;
-o-transition: All .5s ease;
}
.slideBox_banner .prev:hover, .slideBox_banner .next:hover{
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.slideBox_banner .prev {
background-image: url(../images/index.png);
background-position: -112px 0;
left: 0;
}
.slideBox_banner .next {
background-image: url(../images/index.png);
background-position: -158px 0;
right: 0;
}
.nhbanner .homeBanneraAbout {
padding: 18px 40px 0;
}
.nhbanner .homeBanneraAbout div {
overflow: hidden;
color: #ffffff;
text-align: center;
line-height: 22px;
margin-bottom: 15px;
}
.nhbanner .homeBanneraAbout div h2 { margin:0;
font-style: normal;
font-weight: normal;
font-size: 22px;
}
.nhbanner .homeBanneraAbout div span {
font-size: 14px; height:14px; line-height:14px;margin-top:10px; display: block;
}
.nhbanner .try_out{
position: absolute;
margin: 0 auto;
left: 0;
z-index: 99;
right: 0;
bottom: -50px;
height: 165px;
width: 960px;
background: rgba(255, 88, 88, 0.9);
}
.nhbanner .try_out:after {
display: block;
content: "";
height: 10px;
margin-top: 25px;
background-color: #f5f5f5;
background-size: 10px 20px;
background-image: linear-gradient(45deg,rgba(255, 88, 88, 0.9) 25%, transparent 25%, transparent),
linear-gradient(-45deg, rgba(255, 88, 88, 0.9) 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, rgba(255, 88, 88, 0.9) 75%),
linear-gradient(-45deg, transparent 75%,rgba(255, 88, 88, 0.9) 75%);
}
.nhbanner .homeBanneraAbout input {
display: block;
float: left;
border: none;
font-size: 14px;
border-radius: 4px;
padding: 0 20px;
height: 50px;
margin-right: 10px;
}
.nhbanner .homeBanneraAbout input.name {
width: 310px;
}
.nhbanner .homeBanneraAbout input.tel {
width: 390px;
}
.nhbanner .homeBanneraAbout input.button {
background-color: #fed900 !important;
color: #fff;
text-align: center;
font-size: 18px;
margin-right: 0 !important;
cursor: pointer;
width: 160px;
}
.nhbanner .homeBanneraAbout .delete_btn{position: absolute; right:10px; top:5px;z-index: 111; cursor: pointer}
.homeBanneraAbout .touimg{position: absolute; width: 140px; height: 140px; left: 0px;top:-138px;}
.index-entries {
padding: 20px 0;
background: #f5f5f5;
}
.index-entries .entries-item {
float: left;
box-shadow: 0 0 0 #fff;
-webkit-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
.index-entries .entries-item a {
display: block;
width: 277px;
height: 120px;
padding: 23px 25px;
background-color: #fff;
}
.entries-item .entries-item-info {
float: left;
text-align: left;
}
.entries-item .entries-item-title {
font-size: 20px;
line-height: 44px;
color: #333;
font-weight: 400;
margin: 0px !important
}
.entries-item .entries-item-tip {
display: block;
font-size: 12px;
line-height: 17px;
color: #666;
}
.entries-item .entries-item-icon {
display: block;
float: right;
background-image: url(../images/index_bg_s.png);
background-image: -webkit-image-set(url(../images/index_bg_s.png) 1x,url(../images/index_bg_l.png) 2x);
background-image: image-set(url(../images/index_bg_s.png) 1x,url(../images/index_bg_l.png) 2x);
}
.entries-item-icon-first {
width: 101px;
height: 72px;
background-position: -7px -283px;
}
.index-entries .entries-item+.entries-item, .zzx-company-list+.zzx-company-list {margin-left: 20px;}
.allFloor_title_box {text-align: center;margin-top: 30px;}
.allFloor_title_box .floor-titles {height: 60px; line-height: 60px;text-align: center;}
.allFloor_title_box .floor_summery {font-size: 14px;color: #606060;}
.allFloor_title_box .floor-titles .line {
display: inline-block;
width: 79px;
border-top: 1px solid #b5b5b5;
vertical-align: 2px;
}
.index-entries .entries-item:hover {
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
box-shadow: 0 15px 30px rgba(0,0,0,.1);
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0);
border-radius: 2px;
}
.allFloor_title_box .floor-titles .txt {
color: #000;
vertical-align: middle;
font-size: 30px;
padding: 0px 20px;
}
.allFloor_title_box .floor-titles .line {
display: inline-block;
width: 79px;
border-top: 1px solid #b5b5b5;
vertical-align: 2px;
}
.entries-item-icon-second {
width: 75px;
height: 72px;
background-position: -136px -283px;
}
.entries-item-icon-third {
width: 79px;
height: 65px;
background-position: -232px -287px;
}
......
3.JS
代码如下（节选示例）：
$(document).ready(function(){
$(".index-kgl-lower,.designer_intos ,.Column_name_sort,.photo_gallery_switch").hover(function() {
$(this).addClass("hover");
$(this).find(".Case_contect").stop()
.animate({ opacity:1 , height:"100%"}, "fast")
.css("display","block");
}, function() {
$(this).removeClass("hover");
$(this).find(".Case_contect").stop()
.animate({ opacity: 1,height:"70px"}, "fast")
.css("display","block");
});
$(".case_list_content").hover(function() {
$(this).addClass("hover");
},function() {
$(this).removeClass("hover");
})
//地图选择
/***********/
$("#weixin").hover(function() {
$(".erweima_style").css("display","block");
$(this).prepend().addClass("hover");
},function(){
$(".erweima_style").css("display","none");
$(this).prepend().removeClass("hover");
});
$(".imgFull").each(function(index, element) {
$(".imgFull").eq(index).css("background-image", "url(" + $(".imgFull").eq(index).find("img").attr("src") + ")");
});
});
//置顶图标显示
$('#fixed_column').hide()
$(window).scroll(function(){
if($(this).scrollTop() > 350){
$("#fixed_column").fadeIn();
}
else{
$("#fixed_column").fadeOut();
}
});
$(function() {
var $this = $("#reservation_list");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");
function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
});
// custom formatting example
$('#count-number').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
//
$(function(){
$(".select").each(function(){
var s=$(this);
var z=parseInt(s.css("z-index"));
var dt=$(this).children("dt");
var dd=$(this).children("dd");
var _show=function(){dd.slideDown(200);dt.addClass("cur");s.css("z-index",z+1);}; //展开效果
var _hide=function(){dd.slideUp(200);dt.removeClass("cur");s.css("z-index",z);}; //关闭效果
dt.click(function(){dd.is(":hidden")?_show():_hide();});
dd.find("li").click(function(){dt.find(".text").html($(this).html());_hide();}); //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
$("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";});
})
})
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
$.fn.countTo = function (options) {
"use strict";
options = options || {};
return $(this).each(function () {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 300, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
(function($){
var zp = {
init:function(obj,pageinit){
return (function(){
zp.addhtml(obj,pageinit);
zp.bindEvent(obj,pageinit);
}());
},
addhtml:function(obj,pageinit){
return (function(){
obj.empty();
/*上一页*/
if (pageinit.current > 1) {
obj.append('<a href="javascript:;" class="prebtn">上一页</a>');
} else{
obj.remove('.prevPage');
obj.append('<span class="disabled">上一页</span>');
}
/*中间页*/
if (pageinit.current >4 && pageinit.pageNum > 4) {
obj.append('<a href="javascript:;" class="zxfPagenum">'+1+'</a>');
obj.append('<a href="javascript:;" class="zxfPagenum">'+2+'</a>');
obj.append('<span>...</span>');
}
if (pageinit.current >4 && pageinit.current <= pageinit.pageNum-5) {
var start = pageinit.current - 2,end = pageinit.current + 2;
}else if(pageinit.current >4 && pageinit.current > pageinit.pageNum-5){
var start = pageinit.pageNum - 4,end = pageinit.pageNum;
}else{
var start = 1,end = 9;
}
......
五 、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
