实例介绍
【实例简介】
卡诺瓦橱柜品牌宣传网页
【实例截图】
【核心代码】
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>卡诺瓦橱柜</title> | |
| <link href="css/style.css" type="text/css" rel="stylesheet" /> | |
| <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> | |
| </head> | |
| <body> | |
| <!--==logo==--> | |
| <div id="header"> | |
| <div class="logo"><img src="image/logo.jpg"></div> | |
| <div class="right_jm"><a href="index.html" class="shouye">首页</a><a href="jiameng.html" class="jiameng">加盟</a><a href="lianxi.html" class="lianxi">联系</a></div> | |
| <div class="biao"><img src="image/biaoyu.jpg"></div> | |
| </div> | |
| <!--==导航==--> | |
| <div id="nav"> | |
| <div class="conent"> | |
| <ul> | |
| <li><a href="index.html" class="hover_bj">网站首页</a></li> | |
| <li><a href="pinpai.html">卡诺瓦品牌</a> </li> | |
| <li><a href="xinwen.html">新闻资讯</a> </li> | |
| <li><a href="chanpin.html">产品中心</a> </li> | |
| <li><a href="kehu.html">客户服务</a> </li> | |
| <li><a href="zaixin.html">在线留言</a> </li> | |
| <li><a href="kefu.html">在线客服</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div id="demo01" class="flexslider"> | |
| <ul class="slides"> | |
| <li><div class="img"><img src="image/chugui.jpg" height="480" width="1000"/></div></li> | |
| <li><div class="img"><img src="image/ad_yuetu.jpg" height="480" width="1000" /></div></li> | |
| <li><div class="img"><img src="image/ad_nba.jpg" height="480" width="1000"/></div></li> | |
| <li><div class="img"><img src="image/ad_stock.jpg" height="480" width="1000"/></div></li> | |
| <li><div class="img"><img src="image/ad_auto.jpg" height="480" width="1000"/></div></li> | |
| </ul> | |
| </div><!--flexslider end--> | |
| <script type="text/javascript" src="js/slider.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| $('#demo01').flexslider({ | |
| animation: "slide", | |
| direction:"horizontal", | |
| easing:"swing" | |
| }); | |
| }); | |
| </script> | |
| <div id="main"> | |
| <div class="conent_zt"> | |
| <div class="conent_xl"> | |
| <div class="con_neri"> | |
| <h1>整体厨柜系列</h1> | |
| <div class="con_jieshao"><p>整体橱柜系列，打造出真正适合中国人的健康橱柜系列，势必开创出一个整体橱柜系列的新纪元。</p></div> | |
| <div class="con_img"><img src="image/tu1.jpg"></div> | |
| </div> | |
| </div> | |
| <div class="conent_xl" style="background:none; margin-left:0px;"> | |
| <div class="con_neri" style="float:right;"> | |
| <h1>厨房电器系列</h1> | |
| <div class="con_jieshao"><p>集成环保灶的设计，带来更健康的功能组合，更舒适的使用体验。无论是政绩的综合性能，个性化整体厨房的适配性，还是日常的清洁维护，都拥有与众不同的卓越魅力。</p></div> | |
| <div class="con_img"><img src="image/tu2.jpg"></div> | |
| </div> | |
| </div> | |
| <div class="con1" style="margin-left:10px;"> | |
| <div class="left_wen"><h1>欧卡罗品牌</h1> | |
| <div style="height:140px; overflow:hidden;"> | |
| <p>欧卡罗（OKELO），一家致力于满足全球消费者整体厨房应用需求的企业，中国最大的整体橱柜生产企业之一。始创与1998年，基于13年锐意进取和极具前瞻性的全球战略目光，欧卡罗橱柜迅速发展成在华东地区产业链前后相关联度趋合的知名企业，的交易平台、用面挂钩，并被应邀成为国家标准的修编单位。</p></div> | |
| <div class="bottom_wh"><a>企业文化</a><a>品牌介绍</a></div> | |
| <div></div> | |
| </div> | |
| <div class="right_tu"><img src="image/fangzi.jpg"></div> | |
| </div> | |
| <div class="con1"> | |
| <div class="left_wen"><h1>新闻资讯</h1> | |
| <div style="height:140px; overflow:hidden;"> | |
| <ul> | |
| <li><a>【公司新闻】步入竞争红海，悉数橱柜市场促</a></li> | |
| <li><a>【行业资讯】欧卡罗原创精品 挑战山寨价格</a></li> | |
| <li><a>【行业资讯】欧卡罗膜压新品雅典娜知</a></li> | |
| <li><a>【公司新闻】创新品质 尽在出众实力</a></li> | |
| </ul> | |
| </div> | |
| <div class="bottom_wh"><a>公司新闻</a><a>行业新闻</a></div> | |
| </div> | |
| <div class="right_tu"><img src="image/she.jpg"></div> | |
| </div> | |
| <div style="clear:both;"></div> | |
| </div> | |
| <div class="con2"> | |
| <div class="tittle_z"><a style="float:right; font-size:12px; margin-right:10px;">更多>></a>最新产品</div> | |
| <script type="text/javascript"> | |
| //js无缝滚动代码 | |
| function marquee(i, direction){ | |
| var obj = document.getElementById("marquee" i); | |
| var obj1 = document.getElementById("marquee" i "_1"); | |
| var obj2 = document.getElementById("marquee" i "_2"); | |
| if (direction == "up"){ | |
| if (obj2.offsetTop - obj.scrollTop <= 0){ | |
| obj.scrollTop -= (obj1.offsetHeight 20); | |
| }else{ | |
| var tmp = obj.scrollTop; | |
| obj.scrollTop ; | |
| if (obj.scrollTop == tmp){ | |
| obj.scrollTop = 1; | |
| } | |
| } | |
| }else{ | |
| if (obj2.offsetWidth - obj.scrollLeft <= 0){ | |
| obj.scrollLeft -= obj1.offsetWidth; | |
| }else{ | |
| obj.scrollLeft ; | |
| } | |
| } | |
| } | |
| function marqueeStart(i, direction){ | |
| var obj = document.getElementById("marquee" i); | |
| var obj1 = document.getElementById("marquee" i "_1"); | |
| var obj2 = document.getElementById("marquee" i "_2"); | |
| obj2.innerHTML = obj1.innerHTML; | |
| var marqueeVar = window.setInterval("marquee(" i ", '" direction "')", 20); | |
| obj.onmouseover = function(){ | |
| window.clearInterval(marqueeVar); | |
| } | |
| obj.onmouseout = function(){ | |
| marqueeVar = window.setInterval("marquee(" i ", '" direction "')", 20); | |
| } | |
| } | |
| </script> | |
| <div class="warp_sp"> | |
| <div id="marquee1" class="marqueeleft"> | |
| <div style="width:8000px;"> | |
| <ul id="marquee1_1"> | |
| <li> | |
| <a class="pic" href="xiangxi.html"><img width="290" height="180" src="image/tu3.jpg"></a></li> | |
| <li> | |
| <a class="pic" href="xiangxi.html"><img width="290" height="180" src="image/tu3.jpg"></a></li> | |
| <li> | |
| <a class="pic" href="xiangxi.html"><img width="290" height="180" src="image/tu3.jpg"></a></li> | |
| <li> | |
| <a class="pic" href="xiangxi.html"><img width="290" height="180" src="image/tu3.jpg"></a></li> | |
| </ul> | |
| <ul id="marquee1_2"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript">marqueeStart(1, "left");</script> | |
| </div> | |
| </div> | |
| <div style="clear:both;"></div> | |
| </div> | |
| <div id="footer"><div class="conent_bq"> | |
| <p><a>网站首页</a> | <a>欧卡罗品牌</a> | <a>新闻资讯</a> | <a>产品中心</a> | <a>客户服务</a>| <a>在线留言</a> | <a>在线客服</a> </p> | |
| <p>版权所有：橱柜|合肥橱柜|橱柜效果图|Welcome to http://www.mycodes.net</p> | |
| <div class="fenx"><a class="ximl" rel="nofollow" href="javascript:void((function(s,d,e){try{}catch(e){}var%20f='http://v.t.sina.com.cn/share/share.php?',u=d.location.href,p=['url=',e(u),'&title=',e(d.title),'&appkey=1392530042'].join('');function a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=620,height=450,left=',(s.width-620)/2,',top=',(s.height-450)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})(screen,document,encodeURIComponent));"></a><a class=" tengxun" href="javascript:void(0)" onClick="{ var _t = encodeURI(document.title); var _url = encodeURI(window.location); var _appkey = '333cf198acc94876a684d043a6b48e14'; var _site = encodeURI; var _pic = ''; var _u = 'http://v.t.qq.com/share/share.php?title=' _t '&url=' _url '&appkey=' _appkey '&site=' _site '&pic=' _pic; window.open( _u,'转播到腾讯微博', 'width=700, height=580, top=180, left=320, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no' ); };"></a></div> | |
| </div></div> | |
| <!--在线客服--> | |
| <div class="fixed_box" id="fixedBox"> | |
| <div class="content_box"> | |
| <div class="content_inner"> | |
| <div class="close_btn"><a title="关闭"><span>关闭</span></a></div> | |
| <div class="content_title"><span>客服中心</span></div> | |
| <div class="content_list"> | |
| <div class="qqserver"> | |
| <p> | |
| <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes"> | |
| <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息"> | |
| <span>方雨</span> | |
| </a> | |
| </p> | |
| <p> | |
| <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes"> | |
| <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息"> | |
| <span>方雨</span> | |
| </a> | |
| </p> | |
| <p> | |
| <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes"> | |
| <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息"> | |
| <span>方雨</span> | |
| </a> | |
| </p> | |
| </div> | |
| <hr> | |
| <div class="phoneserver"> | |
| <h5>客户服务热线</h5> | |
| <p>请直接QQ联系！</p> | |
| </div> | |
| <hr> | |
| <div class="msgserver"> | |
| <p><a href="http://www.mycodes.net/" target="_blank">给我们留言</a></p> | |
| </div> | |
| </div> | |
| <div class="content_bottom"></div> | |
| </div> | |
| </div> | |
| <div class="show_btn"><span>展开客服</span></div> | |
| </div> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $(".close_btn a").click(function(){ | |
| $(".content_box").hide(); | |
| $(".show_btn").show(); | |
| }); | |
| $(".show_btn").click(function(){ | |
| $(".show_btn").hide(); | |
| $(".content_box").show(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论