Web前端期末大作业-卫浴商店公司网页设计（HTML+CSS+JS）

于 2021-12-10 19:08:36 发布
阅读量2k 收藏 9
点赞数 1
分类专栏： Web前端期末大作业 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51966461/article/details/121863101
版权

🍊作者：计算机编程-吉哥

🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。

🍊心愿：点赞 👍 收藏 ⭐评论 📝

🍅 文末获取源码联系 

效果展示：  

 

 部分代码：   

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>九牧卫浴——中国高端卫浴领导者</title>
<meta name="keywords" content="九牧卫浴——中国高端卫浴领导者" />
<meta name="description" content="九牧卫浴——中国高端卫浴领导者" />
<meta name="viewport" id="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="九牧">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript">window.bd && bd._qdc && bd._qdc.init({app_id: '471e133ea2e5cccb4405cdad'});</script>
<link href="css/index.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="js/jquery.banner.revolution.min.js"></script>
<script type="text/javascript" src="js/banner.js"></script>
<script type="text/javascript" src="js/swiper.scrollbar-1.2.js"></script>
<script type="text/javascript" src="js/swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fs.boxer.min.js"></script>
<script type="text/javascript" src="js/jquery.slides.min.js"></script>
<script type="text/javascript" src="js/customs.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->     
     <script src="js/jquery.isotope.min.js"></script>    
	 <script src="js/custom.js"></script>  
	 <script src="js/modernizr.custom.js"></script>
</head>
<body>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<!-- 头部 -->
<header class="header">
  <div class="container "> 
    <!-- 网站Logo -->
    <div class="logo-main fl">
      <a class="logo left" href="index.html" title=""><img src="images/logo.png" /></a>     
    </div>
    <!-- 网站Logo end --> 
    <!-- 导航菜单 -->
    <nav class="header-menu fr">
        <div>
			 <ul id="" class="menu">
				 <li  class="menu-item hover"><a href="about.html">关于九牧<span>ABOUT</span></a>
				      <ul class="sub-menu">
						<li class="menu-item"><a href="introduction.html">九牧简介</a></li>
						<li class="menu-item"><a href="development.html">发展历程</a></li>
						<li class="menu-item"><a href="news.html">公益活动</a></li>
					 </ul>
				 </li>
				 <li  class="menu-item"><a href="news.html">新闻资讯<span>NEWS</span></a>
					 <ul class="sub-menu">
						<li class="menu-item"><a href="news.html">公司动态</a></li>
						<li class="menu-item"><a href="news.html">行业动态</a></li>
					 </ul>
				</li>
				 <li  class="menu-item "><a href="prolist.html">九牧产品<span>PRODUCT</span></a>
					 <ul class="sub-menu">
						<li class="menu-item"><a href="prolist.html">浴室柜</a></li>
						<li class="menu-item"><a href="prolist.html">洗脸盆</a></li>
						<li class="menu-item"><a href="prolist.html">淋浴房</a></li>
						<li class="menu-item"><a href="prolist.html">浴缸</a></li>
						<li class="menu-item"><a href="prolist.html">淋浴器</a></li>
						<li class="menu-item"><a href="prolist.html">智能坐便器</a></li>
						<li class="menu-item"><a href="prolist.html">储物收纳用品</a></li>
						<li class="menu-item"><a href="prolist.html">水槽</a></li>
						<li class="menu-item"><a href="prolist.html">厨房龙头</a></li>
					 </ul>
				 </li>
				 <li class="menu-item"><a href="join.html">加盟九牧<span>JOIN</span></a></li>
				 <li class="menu-item "><a href="media.html">媒体报道<span>MEDIA</span></a></li>
				 <li class="menu-item "><a href="contact.html">联系九牧<span>CONTACT</span></a></li>
			 </ul>
		</div>    
	</nav>
    <!-- 导航菜单end --> 
  </div>
</header>
<div class="clearfix"></div>
<!-- 头部end -->
<script>
$(function(){
	var swiper = new Swiper('.swiper1', {
		pagination : '.pagination1',
		loop:true,
		grabCursor: true
	});	
	//Navigation arrows
	$('.arrow-left').click(function(e) {
        e.preventDefault()
		swiper.swipePrev()
    });
	$('.arrow-right').click(function(e) {
        e.preventDefault()
		swiper.swipeNext()
    });
    //Clickable pagination
    $('.pagination1 .swiper-pagination-switch').click(function(){
    	swiper.swipeTo($(this).index())
    })
});
</script>
	<div class="fullwidthbanner-container">
	    <div class="b_shadow"></div>
		<div class="fullwidthbanner">
			<ul>
				<li>
					<img src="images/banner.jpg" alt="" />									
				</li>
				<li>
					<img src="images/banner1.jpg" alt="" />		
				</li>
				<li>
					<img src="images/banner2.jpg" alt="" />		
				</li>
			</ul>
		</div>
	</div>            
		<div class="home-device">
			<a class="arrow-left" href="#"></a>
			<a class="arrow-right" href="#"></a>
			<div class="swiper-main">
				<div class="swiper-container swiper1">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><a href="" title="" target="_blank"><img src="images/sbanner.jpg" alt="" /></a></div>
						<div class="swiper-slide"><a href="" title="" target="_blank"><img src="images/sbanner1.jpg" alt="" /></a></div>
						<div class="swiper-slide"><a href="" title="" target="_blank"><img src="images/sbanner2.jpg" alt="" /></a></div>
					</div>
				</div>
			</div>
			<div class="pagination pagination1"></div>
		</div>
		 <div class="in_pro">			  
		     <div class="container">
				 <div class="tt_top">
				   <h1>PRODUCTS SERIES</h1>
				   <div class="line"></div>
				   <p>跨越，尊享非凡生活</p>
				 </div>
			  </div>
			  <div class="pro_class">
		
  <div id="cbp-so-scroller" class="cbp-so-scroller">
        <div id="portfolio" class="clearfix">
            <div class="portfolio-bg"> </div>
            <div class="container typo1 in_prolist">
                <div class="wrapper clearfix">                  
                    <div id="options" class="clearfix">
                        <ul id="filters" class="option-set clearfix" data-option-key="filter">
                        	<li><a href="#filter" data-option-value=".web-design" style="border:none;">浴室柜</a></li>
                            <li><a href="#filter" data-option-value=".photo">洗脸盆</a></li>
                            <li><a href="#filter" data-option-value=".ios-app">淋浴房</a></li>
                            <li><a href="#filter" data-option-value=".graphic">浴缸</a></li>
							<li><a href="#filter" data-option-value=".showers">淋浴器</a></li>
                            <li><a href="#filter" data-option-value=".intelligent">智能坐便器</a></li> 
							<li><a href="#filter" data-option-value=".storage">储物收纳用品</a></li>
                            <li><a href="#filter" data-option-value=".sink">水槽</a></li>    
							<li><a href="#filter" data-option-value=".kitchen">厨房龙头</a></li> 
                        </ul><!--end:filters-->
                    </div>                          
                </div><!--end:wrapper-->                
                <ul id="container" class=" clickable cs-style-5 grid clearfix isotope" style="position: relative; overflow: hidden; width: 1475px;">
                    <li class="element kitchen isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
					  <a href="proview.html">
                      <figure>
                          <img src="images/cf03.jpg" alt="">
                          <figcaption>
                                <h3>厨房龙头</h3>
								 <div class="meta-box clearfix">
                                    <span class="entry-categories">精铜阀体，结构严密;陶瓷阀芯，经久耐用</span>                                    
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"><p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                                </footer>
								
                            </figcaption>
                        </figure>   
						</a>
                    </li>   
					<li class="element kitchen isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/cf2.jpg" alt="">
                          <figcaption>
                                <h3><a href="proview.html">厨房龙头</a></h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">精铜阀体，结构严密;陶瓷阀芯，经久耐用</span>                            
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"><p> <span  data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                                </footer>
                            </figcaption>
                        </figure>   
						</a>
                    </li>      
                    <li class="element kitchen isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(295px, 0px, 0px);">
                      <a href="proview.html">
                      <figure>
                          <img src="images/cf03.jpg" alt="">
                          <figcaption>
                                <h3>厨房龙头</h3>
								 <div class="meta-box clearfix">
                                    <span class="entry-categories">精铜阀体，结构严密;陶瓷阀芯，经久耐用</span>                                    
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"><p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                                </footer>
								
                            </figcaption>
                        </figure>   
						</a>              
                    </li>   
					<li class="element photo isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
                     <a href="proview.html">
					  <figure>
                          <img src="images/xl02.jpg" alt="">
                          <figcaption>
                                <h3>洗脸盆</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">自洁釉，易清洁;优质粘土，健康环保;高温煅烧</span>                                    
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"><p> <span  data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                                </footer>
                            </figcaption>
                        </figure>  
						</a>
                    </li>   
					<li class="element photo isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
                       <a href="proview.html">
					  <figure>
                          <img src="images/0502001787.jpg" alt="">
                          <figcaption>
                                <h3>洗脸盆</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">自洁釉，易清洁;优质粘土，健康环保;高温煅烧</span>                                    
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"><p> <span  data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                                </footer>
                            </figcaption>
                        </figure>  
						</a>                   
                    </li>      
                    <li class="element web-design isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(295px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/xy01.jpg" alt="">
                          <figcaption>
                                <h3>浴室柜</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">多功能收纳，置物有序;PVC双面结皮板，防水性能好</span> 
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                            </figcaption>
                        </figure>
						</a>             
                    </li>   
					 <li class="element web-design isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(295px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/xy02.jpg" alt="">
                          <figcaption>
                                <h3>浴室柜</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">多功能收纳，置物有序;PVC双面结皮板，防水性能好</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>
                                </footer>
                            </figcaption>
                        </figure>  
						</a>
                    </li>           
                    <li class="element ios-app isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(590px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/pro.jpg" alt="">
                          <figcaption>
                                <h3>淋浴房</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">奢华古典原创设计;坚固铝材，厚实耐用</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                           
                                </footer>
                            </figcaption>
                        </figure>
						</a>
                    </li>      
					 <li class="element ios-app isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(590px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/ly1.jpg" alt="">
                          <figcaption>
                                <h3>淋浴房</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">奢华古典原创设计;坚固铝材，厚实耐用</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                           
                                </footer>
                            </figcaption>
                        </figure>
						</a>                    
                    </li>    
					<li class="element ios-app isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(590px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/ly2.jpg" alt="">
                          <figcaption>
                                <h3>淋浴房</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">奢华古典原创设计;坚固铝材，厚实耐用</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                           
                                </footer>
                            </figcaption>
                        </figure>
						</a>                  
                    </li>    
					 <li class="element ios-app isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(590px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/ly3.jpg" alt="">
                          <figcaption>
                                <h3>淋浴房</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">奢华古典原创设计;坚固铝材，厚实耐用</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                           
                                </footer>
                            </figcaption>
                        </figure>
						</a>                   
                    </li>    
                    <li class="element graphic isotope-item" style="position: absolute;left: 0px; top: 0px; -webkit-transform: translate3d(885px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/yg01.jpg" alt="">
                          <figcaption>
                                <h3>浴缸</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">进口板材 健康环保;稳固支撑，厚实耐用</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>
                            </figcaption>
                        </figure>     
						</a>                    
                    </li> 
					<li class="element graphic isotope-item" style="position: absolute;left: 0px; top: 0px; -webkit-transform: translate3d(885px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/yg05.jpg" alt="">
                          <figcaption>
                                <h3>浴缸</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">进口板材 健康环保;稳固支撑，厚实耐用</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>
                            </figcaption>
                        </figure>     
						</a>                    
                    </li> 
					<li class="element graphic isotope-item" style="position: absolute;left: 0px; top: 0px; -webkit-transform: translate3d(885px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/yg04.jpg" alt="">
                          <figcaption>
                                <h3>浴缸</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">进口板材 健康环保;稳固支撑，厚实耐用</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>
                            </figcaption>
                        </figure>     
						</a>
                    </li> 
                    <li class="element showers isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1180px, 0px, 0px);">
                     <a href="proview.html">
					  <figure>
                          <img src="images/lyq04.jpg" alt="">
                          <figcaption>
                                <h3>淋浴器</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">简易安装、免钉免钻;巧用空间、随心移动;优质材质、简约设计</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>    
                            </figcaption>
                        </figure> 
						</a>                   
                    </li>         
					<li class="element showers isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1180px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/lyq03.jpg" alt="">
                          <figcaption>
                                <h3>淋浴器</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">简易安装、免钉免钻;巧用空间、随心移动;优质材质、简约设计</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">View</span></p></div>                                  
                                </footer>    
                            </figcaption>
                        </figure> 
						</a>                    
                    </li>        
					<li class="element showers isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1180px, 0px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/lyq02.jpg" alt="">
                          <figcaption>
                                <h3>淋浴器</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">简易安装、免钉免钻;巧用空间、随心移动;优质材质、简约设计</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>    
                            </figcaption>
                        </figure> 
						</a>                    
                    </li>        
                    <li class="element intelligent isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 267px, 0px);">
                      <a href="proview.html">
					   <figure>
                          <img src="images/z01.jpg" alt="">
                          <figcaption>
                                <h3>智能坐便器</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">国际专利双涡轮冲刷系统;超净水技术，净享健康</span> 
                                </div>
                                <footer>
                                     <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                    
                                </footer>
                            </figcaption>
                        </figure>
						</a>
                    </li>
					<li class="element intelligent isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 267px, 0px);">
                      <a href="proview.html">
					   <figure>
                          <img src="images/z02.jpg" alt="">
                          <figcaption>
                                <h3>智能坐便器</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">国际专利双涡轮冲刷系统;超净水技术，净享健康</span> 
                                </div>
                                <footer>
                                     <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                    
                                </footer>
                            </figcaption>
                        </figure>
						</a>
                    </li>
                    <li class="element storage isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(295px, 267px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/cw2.jpg" alt="">
                          <figcaption>
                                <h3>储物收纳用品</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">简易安装、免钉免钻;巧用空间、随心移动;优质材质、简约设计</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>    
                            </figcaption>
                        </figure> 
						</a>                       
                    </li>    
					 <li class="element storage isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(295px, 267px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/cw1.jpg" alt="">
                          <figcaption>
                                <h3>储物收纳用品</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">简易安装、免钉免钻;巧用空间、随心移动;优质材质、简约设计</span> 
                                </div>
                                <footer>
                                    <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>    
                            </figcaption>
                        </figure> 
						</a>
                    </li> 
                    <li class="element sink isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(590px, 267px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/sc.jpg" alt="">
                          <figcaption>
                                <h3>水槽</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">不易挂污，一冲即净;快速排污，防堵防臭</span> 
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>
                            </figcaption>
                        </figure>
						</a>
                    </li> 
					<li class="element sink isotope-item" style="position:absolute; left:0px; top:0px; -webkit-transform: translate3d(590px, 267px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/sc3.jpg" alt="">
                          <figcaption>
                                <h3>水槽</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">不易挂污，一冲即净;快速排污，防堵防臭</span> 
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                                </footer>
                            </figcaption>
                        </figure>
						</a>
                    </li> 
					<li class="element sink isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(590px, 267px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/sc1.jpg" alt="">
                          <figcaption>
                                <h3>水槽</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">不易挂污，一冲即净;快速排污，防堵防臭</span> 
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div>                                  
                                </footer>
                            </figcaption>
                        </figure>
						</a>
                    </li>   
                    <li class="element photo isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(885px, 267px, 0px);">
                       <a href="proview.html">
					  <figure>
                          <img src="images/xl02.jpg" alt="">
                          <figcaption>
                                <h3>洗脸盆</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">自洁釉，易清洁;优质粘土，健康环保;高温煅烧</span>                                    
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"><p> <span  data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                                </footer>
                            </figcaption>
                        </figure>  
						</a>
                    </li>
                    <li class="element web-design isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1180px, 267px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/xy01.jpg" alt="">
                          <figcaption>
                                <h3>浴室柜</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">多功能收纳，置物有序;PVC双面结皮板，防水性能好</span> 
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                            </figcaption>
                        </figure>
						</a>
                    </li>
					 <li class="element web-design isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1180px, 267px, 0px);">
                      <a href="proview.html">
					  <figure>
                          <img src="images/xy01.jpg" alt="">
                          <figcaption>
                                <h3>浴室柜</h3>
								<div class="meta-box clearfix">
                                    <span class="entry-categories">多功能收纳，置物有序;PVC双面结皮板，防水性能好</span> 
                                </div>
                                <footer>
                                   <div id="nivo-lightbox-demo"> <p> <span data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> View</span> </p></div> 
                            </figcaption>
                        </figure>
						</a>
                    </li>
                    <div class="clear"> </div>
                </ul> 
            </div><!--end:typo1-->
        </div>      
    </div>
 </div>
		 </div>   
<script type="text/javascript" src="js/home.js"></script>
		 	 <!--news-->
		 <div  class="in_news">
		    <div class="container">
			   <div class="in_toptt">
				   <h1>NEWS</h1>
				   <h4>最新鲜视角，最专业的理论看待资讯的变迁</h4>
				   <small>Most fresh perspective, look at changes in the most professional information theory</small>
			   </div>
			   <section class="in_newslist clearfix col-md-3">
			         <div class="box box-l" init="false">            
					    <a class="shadow" href="newsview.html" target="_blank">
							<div class="ibox clearfix" >
							     <div class="img">
								    <img src="images/xw1.jpg" alt=""/><h3>九牧关爱老人健康，走进临澧县……</h3>
								    <p> &nbsp;&nbsp;1月15日下午，九牧携手湖南临澧县慈善总会捐献价值近30万的卫浴产品，用于改善老人如厕环境，将关爱…… </p>
									<div class="new_detial"><span>[2014-12-02]</span><a href="newsview.html">详细</a></div>
								 </div>
                                 
							  </div>
							<div class='shadow-line'></div>
						</a>
					 </div>
			   </section>
			    <section class="in_newslist clearfix col-md-3">
			         <div class="box box-l" init="false">            
					    <a class='shadow' href='newsview.html' target='_blank' >
							<div class="ibox clearfix" >
							     <div class="img">
								    <img src="images/xw2.jpg" alt=""/><h3>九牧高端智能晾衣架全球盛……</h3>
								    <p> &nbsp;&nbsp;12月11日下午，九牧高端智能晾衣架全球盛典暨产品全球发布会在安徽滁州盛大召开。九牧董事长林孝发…</p>
									<div class="new_detial"><span>[2014-12-02]</span><A href="newsview.html">详细</a></div>
								 </div>                                 
							  </div>
							<div class='shadow-line'></div>
						</a>
					 </div>
			   </section>
			    <section class="in_newslist clearfix col-md-3">
			         <div class="box box-l " init="false">            
					    <a class='shadow' href='newsview.html' target='_blank' >
							<div class="ibox clearfix" >
							     <div class="img">
								    <img src="images/xw3.gif" alt=""/><h3>创新共赢 九牧再获“最具影响力……</h3>
								    <p> &nbsp;&nbsp;近来，我国加强了国家房地产调控，这样虽然降低了国民经济压力，但也直接导致了建材行业…… </p>
									<div class="new_detial"><span>[2014-12-02]</span><A href="newsview.html">详细</a></div>
								 </div>
                                 
							  </div>
							<div class='shadow-line'></div>
						</a>
					 </div>
			   </section>
			    <section class="in_newslist clearfix col-md-3">
			         <div class="box box-l " init="false">            
					    <a class='shadow' href='newsview.html' target='_blank' >
							<div class="ibox clearfix" >
							     <div class="img">
								    <img src="images/xw4.jpg" alt=""/><h3>第二季再创造表彰大会隆重召开</h3>
								    <p> &nbsp;&nbsp;近来，我国加强了国家房地产调控，这样虽然降低了国民经济压力，但也直接导致了建材行业…… </p>
									<div class="new_detial"><span>[2014-12-02]</span><A href="newsview.html">详细</a></div>
								 </div>
                                 
							  </div>
							<div class='shadow-line'></div>
						</a>
					 </div>
			   </section>
		    </div>
        </div>
       <!--news-->
		 <!--about us-->
		 <div  class="in_about">
		    <div class="container">
			   <div class="in_toptt">
				   <h1>ABOUT US</h1>
				   <h4>开创独特的厨卫文化，成就人类美好健康厨卫生活</h4>
				   <small>Create a unique kitchen culture, achievements of mankind for a better life healthy kitchen</small>
			   </div>
			   <div class="in_aboutcon clearfix">
			       <img src="images/about_pic.jpg" />  <br />&nbsp;&nbsp;&nbsp;&nbsp;九牧厨卫股份有限公司于1990年成立， 长期专注于厨卫及配套产品的研发和生产，是一家以卫生陶瓷
智能厨卫整体卫浴、厨卫家具、五金龙头、厨卫五金为主体业务的大型厨卫企业，被认定为“国家高新技术
型企业九牧厨卫用地2000余亩,下辖7家子公司、4大事业部，员工8500余人。<br />
     &nbsp;&nbsp;&nbsp;&nbsp; 强有力的研发系统，保障九牧厨卫团体连续创新。九牧厨卫团体检测中心，是行业内首家通过中国及格
评定国度认可委员会（CNAS）资质认可并通过加拿大CSA试验室资质认可的检测中心， 为国度最威望的试
验检测机构之一截止2010年，团体拥有技巧专利近400项。在推进自身品牌建设的同时，九牧厨卫团体也积
极参与《温控水嘴》、《环境标记产品技巧请求-水嘴》等行业尺度、国度尺度的起草和制订工作，助推我公
民族卫浴产业发展 。     
      九牧厨卫旗下品牌“JOMOO”，是消费者最为熟悉的厨卫品牌之一……

			   </div>
		    </div>
        </div>
       <!--about us-->
<footer>
	<div class="container ">
	    <div class="footer_l fl">
			<div class="clearfix links">
				<a href="about.html">关于九牧</a>|<a href="news.html">新闻资讯</a>|<a href="prolist.html">九牧产品</a>|<a href="join.html">加盟九牧</a>|<a href="media.html">媒体报道</a>|<a href="contact.html">联系九牧</a>
			</div>
			<div class="copy">版权所有：九牧厨卫股份有限公司所有 @2015    闽ICP备11009004号-1 <br />
	电话：400-696-0551    技术支持：<a href="">政维嘉楠</a></div>
        </div>
		<div class="footer_r fr"><img src="images/f_logo.png" /></div>
	</div>
</footer>  

</body>
</html>

 更多文章：Web前端期末大作业 

公众号：IT跃迁谷【更多精彩文章】

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓如果大家有任何疑虑，请在下方昵称位置详细咨询。

计算机编程-吉哥
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

计算机编程-吉哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值