黑色宽屏风格的大理石建材整站网站源码下载



7 25 9



模板描述:黑色宽屏风格 大理石建材 整站网站,黑色宽屏风格的大理石建材整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代码

<!--头部start-->
<div class="header">
  <ul class="wrapper">
    <li class="con">
      <img src="images/logo.png" class="logo" />
      <div class="nav_list">
        <ul>
          <li>
            <a href="##" target="_blank" class="on">
							<p>网站首页</p>
							<span>home</span>
						</a>
					</li>
          <li>
            <img src="images/img_01.png" alt="" />
					</li>
          <li>
            <a href="##" target="_blank">
							<p>关于迪欧</p>
							<span>about</span>
						</a>
					</li>
          <li>
            <img src="images/img_01.png" alt="" />
					</li>
          <li>
            <a href="##" target="_blank">
							<p>产品展示</p>
							<span>products</span>
						</a>
					</li>
          <li>
            <img src="images/img_01.png" alt="" />
					</li>
          <li>
            <a href="##" target="_blank">
							<p>工程案例</p>
							<span>case</span>
						</a>
					</li>
          <li>
            <img src="images/img_01.png" alt="" />
					</li>
          <li>
            <a href="##" target="_blank">
							<p>品牌资讯</p>
							<span>news</span>
						</a>
					</li>
          <li>
            <img src="images/img_01.png" alt="" />
					</li>
          <li>
            <a href="##" target="_blank">
							<p>联系我们</p>
							<span>contacts</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="tel">
				<p>咨询服务热线:<b>400-666-8888</b></p>
			</div>
		</li>
	</ul>
</div>
<!--头部end-->
<!--banner start-->
<div class="banner">
  <div class="bd">
    <ul>
			<li><a href="##" target="_blank"><img src="images/banner.jpg" alt="" /></a></li>
			<li><a href="##" target="_blank"><img src="images/banner.jpg" alt="" /></a></li>
			<li><a href="##" target="_blank"><img src="images/banner.jpg" alt="" /></a></li>
		</ul>
	</div>
</div>
<!--banner end-->
<!--迪欧产品展示start--->
<div class="main">
  <ul class="wrapper">
    <div class="title">
      <img src="images/img_04.png" alt="" />
			<h2>迪欧<i>产品展示</i></h2>
			<p>简约而不简单,是迪欧对石英石的一种态度</p>
		</div>
    <div class="index_type">
      <ul>
				<li><a href="javascript:;"><em class="ico_01">最新产品<i>The latest</i></em></a></li>
				<li><a href="javascript:;"><em class="ico_02">单色系列<i>monochro</i></em></a></li>
				<li><a href="javascript:;"><em class="ico_03">双色系列<i>Double</i></em></a></li>
				<li><a href="javascript:;"><em class="ico_04">铂金系列<i>platinum</i></em></a></li>
				<li><a href="javascript:;"><em class="ico_05">纹路系列<i>grain</i></em></a></li>
			</ul>
		</div>
    <div class="show">
      <div class="show_banner">
        <div class="bd">
          <ul>
						<li>
						  <a href="##" target="_blank">
						    <img src="images/img_14.jpg" alt="" />
						    <div class="clearfix">
						      <p>随意游荡的纹理绽放出浪漫的石意人生,在空间里恣意挥洒表现细腻入骨的风情,大气典雅的空间品位与个性在无形中升华。</p>
									<i>more+</i>
								</div>
						  </a>
						</li>
						<li>
						  <a href="##" target="_blank">
						    <img src="images/img_14.jpg" alt="" />
						    <div class="clearfix">
						      <p>随意游荡的纹理绽放出浪漫的石意人生,在空间里恣意挥洒表现细腻入骨的风情,大气典雅的空间品位与个性在无形中升华。</p>
									<i>more+</i>
								</div>
						  </a>
						</li>
					</ul>
				</div>
				<div class="hd">
					<a href="javascript:;" class="prev"></a>
					<a href="javascript:;" class="next"></a>
				</div>
			</div>
		</div>    
	</ul>
</div>
<!--迪欧产品展示end--->
<!--特点start-->
<div class="index_special">
  <ul class="wrapper">
    <li>
      <img src="images/img_07.png" alt="" />
			<p>严格选材<br/>环保无辐射</p>
		</li>
    <li>
      <img src="images/img_08.png" alt="" />
			<p>色彩丰富<br/>纹理自然</p>
		</li>
    <li>
      <img src="images/img_09.png" alt="" />
			<p>易加工<br/>配套丰富</p>
		</li>
    <li>
      <img src="images/img_10.png" alt="" />
			<p>色差可控<br/>抗菌防污</p>
		</li>
    <li>
      <img src="images/img_11.png" alt="" />
			<p>光泽度高<br/>易翻新</p>
		</li>
    <li>
      <img src="images/img_12.png" alt="" />
			<p>应用广泛<br/>耐候性强</p>
		</li>
	</ul>
</div>
<!--特点end-->
<!--公司简介start-->
<div class="index_about">
  <ul class="wrapper">
    <li>
      <img src="images/img_14.png" alt="" />
			<h2>迪<img src="images/img_15.png" alt="" />欧<img src="images/img_15.png" alt="" /><i>公<img src="images/img_15.png" alt="" />司<img src="images/img_15.png" alt="" />简<img src="images/img_15.png" alt="" />介</i></h2>
			<p>迪欧石英石产品技术源自广州,是专业从事石英石板材研发、生产与销售的专业厂家。地理位置优越,西靠京沪铁<br/>路和京福高速公路,南依京杭大运河,坐拥举世闻名的万亩石榴园;公路交通便捷,风景秀丽。</p>
			<p>石英石板材生产厂家枣庄迪欧石英石有限公司创始于2009年,先期投资壹仟万元人民币,拥有世界先进技术的生产<br/>线,公司引进广州管理技术,研发工程师来自广州;企业占地30000平方米,年生产能力达到10万平方米。</p>
			<a href="##" target="_blank">more+</a>
		</li>
	</ul>
</div>
<!--公司简介end-->
<!--工程案例start-->
<div class="main main01">
  <ul class="wrapper">
    <div class="title">
      <img src="images/img_04.png" alt="" />
			<h2>迪欧<i>工程案例</i></h2>
			<p>简约而不简单,是迪欧对石英石的一种态度</p>
		</div>
		<div class="index_type">
      <ul>
				<li><a href="javascript:;"><em class="ico_01">客厅<i>sitting </i></em></a></li>
				<li><a href="javascript:;"><em class="ico_02">餐厅<i>restaurant</i></em></a></li>
				<li><a href="javascript:;"><em class="ico_03">卧室<i>The bedroom</i></em></a></li>
				<li><a href="javascript:;"><em class="ico_04">厨房<i>The kitchen</i></em></a></li>
				<li><a href="javascript:;"><em class="ico_05">卫生间<i>The toilet</i></em></a></li>
			</ul>
		</div>
	</ul>
	<div class="slider">
	  <div class="bd">
	    <ul>
				<li><a href="##" title=""><img src="images/img_11.jpg" alt="" /><div><span>案例名称案例名称案例名称案例名称案例名称案例名称案例名称</span></div></a></li>
				<li><a href="##" title=""><img src="images/img_11.jpg" alt="" /><div><span>案例名称案例名称案例名称案例名称案例名称案例名称案例名称</span></div></a></li>
				<li><a href="##" title=""><img src="images/img_11.jpg" alt="" /><div><span>案例名称案例名称案例名称案例名称案例名称案例名称案例名称</span></div></a></li>
				<li><a href="##" title=""><img src="images/img_11.jpg" alt="" /><div><span>案例名称案例名称案例名称案例名称案例名称案例名称案例名称</span></div></a></li>
			</ul>
		</div>
		<div class="pnBtn prev"><a href="javascript:;"></a></div>
		<div class="pnBtn next"><a href="javascript:;"></a></div>
	</div>	
</div>
<!--工程案例end-->
<!--联系我们start-->
<div class="contact">
  <ul class="wrapper">
    <li class="fl">
      <img src="images/img_18.png" alt="" />
			<p>咨询服务热线:</p>
			<b>400-666-8888</b>
		</li>
    <li class="on fl">
      <img src="images/img_19.png" alt="" />
			<p>迪欧地址:</p>
			<span>枣庄市某某区某某路某某号</span>
			<span>枣庄市某某区某某路某某号</span>
		</li>
    <li class="fr">
      <img src="images/img_20.png" alt="" />
			<p>迪欧邮箱:</p>
			<b>diou@126.com</b>
		</li>
	</ul>
</div>
<!--联系我们end-->
<!--品牌资讯start-->
<div class="main main02">
  <ul class="wrapper">
    <div class="title">
      <img src="images/img_04.png" alt="" />
			<h2>迪欧<i>品牌资讯</i></h2>
			<p>简约而不简单,是迪欧对石英石的一种态度</p>
		</div>
    <div class="index_news">
      <ul class="clearfix">
				<li class="fl"><img src="images/img_13.jpg" alt="" /></li>
        <li class="fr">
          <div class="index_news_list">
            <ul>
              <li>
                <div class="time">
									<b>06</b>
									<p>2018-08</p>
								</div>
								<div class="con">
									<h4><a href="##" target="_blank">迪欧品牌新闻标题新闻标题品牌资讯</a></h4>
									<p>迪欧品牌资讯迪欧品牌资讯迪欧品牌资讯迪欧品牌资讯迪欧品牌</p>
								</div>
							</li>
              <li>
                <div class="time">
									<b>06</b>
									<p>2018-08</p>
								</div>
								<div class="con">
									<h4><a href="##" target="_blank">迪欧品牌新闻标题新闻标题品牌资讯</a></h4>
									<p>迪欧品牌资讯迪欧品牌资讯迪欧品牌资讯迪欧品牌资讯迪欧品牌</p>
								</div>
							</li>
              <li>
                <div class="time">
									<b>06</b>
									<p>2018-08</p>
								</div>
								<div class="con">
									<h4><a href="##" target="_blank">迪欧品牌新闻标题新闻标题品牌资讯</a></h4>
									<p>迪欧品牌资讯迪欧品牌资讯迪欧品牌资讯迪欧品牌资讯迪欧品牌</p>
								</div>
							</li>
						</ul>
						<a href="##" target="_blank" class="more">more+</a>
					</div>
				</li>
			</ul>
		</div>
	</ul>
</div>
<!--品牌资讯end-->
<!--底部start-->
<div class="footer">
  <ul class="wrapper clearfix">
    <li class="fl">
			<p>枣庄迪欧石英石有限公司</p>
			<p><a href="##" title="">网站首页</a> 丨 <a href="##" title="">关于迪欧</a> 丨 <a href="##" title="">产品展示</a> 丨 <a href="##" title="">工程案例</a> 丨 品<a href="##" title="">牌资讯</a> 丨 <a href="##" title="">联系我们</a></p>
			<p>Copyright © 2002-2011 dioushiyingshi.COM 迪欧石英石 版权所有 Power by DedeCms 粤ICP备:69856599号-1</p> 
		</li>
		<li class="fr">
		  <div class="code">
		    <img src="images/code.jpg" alt="" />
				<p>关注我们</p>
			</div>
		</li>
	</ul>
</div>
<!--底部end-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 黑色 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 宽屏 全屏 满屏 装修装饰 装潢 装修 装饰

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到