实例介绍
【实例简介】一个有三个网页的排版布局，效果非常不错
【实例截图】
<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">
相比于油腻的荤腥，自然吃素菜安全的系数是要高一些的。菠菜是冬春季节里很讨喜的一种绿叶菜，绿绿的肥厚宽大的叶片，在寒冷萧瑟的冬季里是这样的张扬着，显示着绿色的生命力。关于菠菜的营养和做法我就不絮叨了，我说的是我家的关于做“凉拌菠菜”的事情。每个人都有其过人之处，或者说是特长。同理，每个家庭或厨师对于做菜也自然会有其擅长的手段。不过我家或者说是我吧，就比较平庸了，对于做饭是马马虎虎，寥寥草草，其实，下厨房我原本就是奔着“糊口”去的。
</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 />
版权所有：某某某技术有限公司 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>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论