在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例网页布局 → 绿色健康食品公司网站模板

绿色健康食品公司网站模板

网页布局

下载此实例
  • 开发语言:CSS
  • 实例大小:0.50M
  • 下载次数:18
  • 浏览次数:163
  • 发布时间:2020-12-08
  • 实例类别:网页布局
  • 发 布 人:javawebhuan
  • 文件格式:.zip
  • 所需积分:2
 相关标签: 主页 导航页 简介

实例介绍

【实例简介】一个有三个网页的排版布局,效果非常不错


【实例截图】



from clipboard







【核心代码】<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="024" />
<title>纯绿色健康食品</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/banner.js"></script>
<script type="text/javascript" src="js/lihe.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/png.js"></script>
<script>DD_belatedPNG.fix('div,img,span,li,a,a:hover,dd,p,input,select')</script>
<![endif]-->

</head>
<body> 
<div class="header">
<div class="h_mid_c">
<div class="h_mid">
<div class="logo">
<a href="#" >
<img src="images/logo.png" />
</a>
</div>
        <div class="head_rtel"><span>订购热线</span><b> 86-0000-000000</b></div>
</div>
      <div class="c"></div>
</div>
<!-- logo 搜索 end-->
<!-- 导航 -->
<div class="nav_c">
<div class="nav">
<ul>
          <li><a href="index.html" >网站首页</a></li>
          <li><a href="show.html" >公司简介</a></li>
          <li><a href="product.html" >产品中心</a></li>
          <li><a href="news.html" >加盟中心</a></li>
          <li><a href="#" >店面展示</a></li>
          <li><a href="#" >基地展示</a></li>
          <li><a href="#" >人参养生</a></li>
          <li><a href="#" >人参常识</a></li>
          <li><a href="#" >资质荣誉</a></li>
          <li><a href="#" >联系我们</a></li>
</ul>
</div>
</div>
<!-- 导航 end-->
</div>
        <div class="banner">
            <div class="banner-box">
                <ul class="banner_pic">
                  <li><img src="images/banner1.jpg" /></li>
                  <li><img src="images/banner1.jpg" /></li>
                </ul>
                <div class="btns">
                    <div>
                        <a class="prev" href="#"></a>
                        <a class="next" href="#"></a>
                    </div>
                </div>
                <div class="num">
                    <ul></ul>
                </div>
            </div>
        </div>
<!-- banner -->
<div class="noticefra">
    <div class="notice">
      <div class="noticecon">
        <label class="index_sname">网站公告:</label>
        <marquee>诚信为本,天天看得见的健康美食!</marquee>
      </div>
      <div class="search">
        <form id="search" name="search" method="post" action="">
          <input type="text" name="kws" id="kws" value="请输入关键词" class="text" onfocus="if(value!='') {value=''}" onblur="if (value=='') {value='请输入关键词'}" />
          <input type="submit"  class="button" value=""/>
        </form>
      </div>
    </div>
  </div>
     
    <div class="indexpnav">
      <div class="slider"> <span id="left" class="left end"></span><span class="right" id="right"></span> </div>
        <div class="ipro" id="ipro2">
          <div class="main">
            <ul class="">
                <li><a href="#" ><img src="images/p1.jpg" width="140" height="140" /></a><span>海鲜搭配</span></li>
                <li><a href="#" ><img src="images/p2.jpg" width="140" height="140" /></a><span>排山肉海</span></li>
                <li><a href="#" ><img src="images/p3.jpg" width="140" height="140" /></a><span>豆粮系类</span></li>
                <li><a href="#" ><img src="images/p4.jpg" width="140" height="140" /></a><span>木瓜美食</span></li>
                <li><a href="#" ><img src="images/p5.jpg" width="140" height="140" /></a><span>蛋白膳食</span></li>
                <li><a href="#" ><img src="images/p1.jpg" width="140" height="140" /></a><span>海鲜搭配</span></li>
                <li><a href="#" ><img src="images/p3.jpg" width="140" height="140" /></a><span>豆粮系类</span></li>
                <li><a href="#" ><img src="images/p2.jpg" width="140" height="140" /></a><span>排山肉海</span></li>
                <li><a href="#" ><img src="images/p5.jpg" width="140" height="140" /></a><span>蛋白膳食</span></li>
            </ul>
          </div>
        </div>
    </div>
     <!--公司简介-->
<div class="index_ab">
    <div class="clear"></div>
    <p class="proname"><label>公司简介</label><a href="#" >更多</a></p>
        <div class="clear"></div>
        <div class="main">
        <span class="index_abimg"><img src="images/p3.jpg" width="220" height="130" /></span>
            <span class="index_abcon">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;相比于油腻的荤腥,自然吃素菜安全的系数是要高一些的。菠菜是冬春季节里很讨喜的一种绿叶菜,绿绿的肥厚宽大的叶片,在寒冷萧瑟的冬季里是这样的张扬着,显示着绿色的生命力。关于菠菜的营养和做法我就不絮叨了,我说的是我家的关于做“凉拌菠菜”的事情。每个人都有其过人之处,或者说是特长。同理,每个家庭或厨师对于做菜也自然会有其擅长的手段。不过我家或者说是我吧,就比较平庸了,对于做饭是马马虎虎,寥寥草草,其实,下厨房我原本就是奔着“糊口”去的。
            </span>
        </div>
    </div><div class="clear"></div>
 <!--公司简介-->
 <!--产品展示-->
  <div class="index_pro">
<div class="clear"></div>
    <p class="proname"><label>产品中心</label><a href="#" >更多</a></p>
    
    <div class="clear"></div>
    <div class="pro-ul" >
  <ul class="index_jul" >
          <li> <a href="#" ><img src="images/p1.jpg" width="246" height="185" /><span>中国味道</span></a></li>
          <li> <a href="#" ><img src="images/p2.jpg" width="246" height="185" /><span>美味搭配</span></a></li>
          <li> <a href="#" ><img src="images/p3.jpg" width="246" height="185" /><span>记忆忧心</span></a></li>
          <li> <a href="#" ><img src="images/p5.jpg" width="246" height="185" /><span>家乡味道</span></a></li>
          <li> <a href="#" ><img src="images/p2.jpg" width="246" height="185" /><span>中国味道</span></a></li>
          <li> <a href="#" ><img src="images/p5.jpg" width="246" height="185" /><span>美味搭配</span></a></li>
          <li> <a href="#" ><img src="images/p4.jpg" width="246" height="185" /><span>记忆忧心</span></a></li>
          <li> <a href="#" ><img src="images/p1.jpg" width="246" height="185" /><span>家乡味道</span></a></li>
      </ul>

    </div>
    <div class="clear"></div>

</div>
 <!--产品展示enf-->
 <!--技术支持-->
 <div class="indexcafra">
  <div class="main">
        <div class="newsleft">
              <div class="nameff"><p>新闻中心</p><a href="#" >更多</a></div>
              <ul class="news_ful">
                  <li><a href="#" > > 粉红女人节 到家美食会福袋健美焕新生</a></li>
                  <li><a href="#" > > 饮食养生:必知14种最清肠排毒美食</a></li>
                  <li><a href="#" > > 来太子湾赏花,还有美食相迎</a></li>
                  <li><a href="#" > > 粉红女人节 到家美食会福袋健美焕新生</a></li>
                  <li><a href="#" > > 莫让美食伤了肠胃</a></li>
            </ul>  
              </div>
               <div class="newsright">
                <div class="nameff"><p>探讨美食</p><a href="#" >更多</a></div>
                    <ul class="news_ful" >
                       <li><a href="#" > >“舌尖上的观湖”展示原味客家美食</a></li>
                       <li><a href="#" > > 自带家乡美食返校 快来尝尝乡愁味道</a></li>
                       <li><a href="#" > > 全球最惊悚的“美食” 重口味也要慎重围观</a></li>
                       <li><a href="#" > > 养肝正当时 美食补起来</a></li>
                       <li><a href="#" > > 这些高颜值美食,为春日抹上一缕缤纷色彩</a></li>
                    </ul>  
               </div>
              
        </div>
 </div>
 <!--案例-->
<div class="indexnews">
<div class="clear"></div>
    <p class="proname"><label>美食展示</label><a href="#" >更多</a></p>    
    <div class="main">

    <ul class="index_jul" >
          <li> <a href="#" ><img src="images/p1.jpg" width="246" height="185" /><span>中国味道</span></a></li>
          <li> <a href="#" ><img src="images/p2.jpg" width="246" height="185" /><span>美味搭配</span></a></li>
          <li> <a href="#" ><img src="images/p4.jpg" width="246" height="185" /><span>记忆忧心</span></a></li>
          <li> <a href="#" ><img src="images/p5.jpg" width="246" height="185" /><span>家乡味道</span></a></li>
      </ul>

   </div>
</div>
 
    <div class="links">
  <div class="fmain">
    <div class="linkleft"> <span>友情链接:</span>
      <a href="#" target="_blank">百度</a>
    </div>
  </div>
  <div class="c"></div>
</div>


<div class="footclear"></div>
    <div class="foot">
  <div class="foot-con">
            <div class="foo-cont">
                <p class="name">联系我们</p>
                <div class="cont-fcon f1">电话: 88-0000-00000</div>
                <div class="cont-fcon f2">传真: 88-0000-00000</div>
                <div class="cont-fcon f3">邮箱:这里是您公司的邮箱地址</div>
                <div class="cont-fcon f4">地址:这里是您的公司地址</div>
            </div>
        <div class="foo-right">
                <div class="footlink">
                    <div class="head_rtel1"><span> 88-0000-00000</span><b>订购热线   节假日不休息</b></div>
                    <div class="site">网站地图</div>
                </div>
                <div class="foot-left">电话: 88-0000-00000 传真: 88-0000-00000 地址:这里是您的公司地址<br />  
                   版权所有:某某某技术有限公司&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ICP备案编号:<a href="#"  target="_blank">ICP备********号</a>
                </div>
        </div>
        
     </div>
   </div>
        <div class="footnav">
          <div class="foofra">
           <a href="#" >网站首页</a>|
           <a href="#" >公司简介</a>|
           <a href="#" >产品中心</a>|
           <a href="#" >加盟中心</a>|
           <a href="#" >店面展示</a>|
           <a href="#" >基地展示</a>|
           <a href="#" >人参养生</a>|
           <a href="#" >人参常识</a>|
           <a href="#" >资质荣誉</a>|
           <a href="#" >联系我们</a>
          </div>
        </div>
<div class="side_nav">
<ul>
<li class="back_top">
<a href="#" >
<span>返回顶部</span>
</a>
</li>
</ul>
<div class="c"></div>
</div>
</body>
</html>

标签: 主页 导航页 简介

实例下载地址

绿色健康食品公司网站模板

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
;
报警