爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
JS特效
根据div层的高度实现长文章分页
根据div层的高度实现长文章分页
日期：2014-05-18 浏览次数：20140 次
根据div高度的实现的长文章分页
以下是HTML网页特效代码，点击运行按钮可查看效果：
以下是程序代码
<!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> <style type="text/css"> #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000000; overflow-pageINdex:hidden; overflow-y:hidden; word-break:break-all; } a{ font-size:12px; color:#000000; text-decoration:underline; } a:hover{ font-size:12px; color:#CC0000; text-decoration:underline; } </style> </head> <body> <div id="frameContent"> <p>北京奥运会颁奖礼仪服装共十六款。其中男装一款作为升旗手制服。女装十五款分为五个系列，每一系列分别按照嘉宾引导员、运动员引导员和托盘员的不同职能设计了三个不同款式。在奥运会的302场和残奥会的472场颁奖仪式上，这五个系列的礼服将分别出现在不同的场馆及比赛中。</p> <p> “青花瓷”系列使用在国家游泳中心水立方、顺义水上公园和青岛等所有水上项目的颁奖仪式中。 </p> <table cellspacing="0" cellpadding="0" align="left" border="0"> <tbody> <tr> <td valign="top"></td> </tr> <tr> <td></td> </tr> </tbody> </table> 设计灵感取自世界闻名的中国青花瓷器。中国传统乱针绣的运用形象逼真地再现了青花瓷的晕染效果。鱼尾裙的廓形设计凸显了中国女性的柔美曲线。 </p> <p> 宝蓝系列使用在体操、室内球类比赛和击剑等项目的颁奖现场。服装采用温润典雅的宝蓝色作为礼服主色，腰间饰有采用传统盘金绣制作的腰封，图案选用最具中国传统文化审美意趣和美好愿望的吉祥纹样——江山海牙纹、牡丹花纹，凸显了鲜明的中国特色和民族风格。同时也向全世界人民展示了中国最高超的刺绣工艺。中式的立领配以西式的肩部设计尽现中国女性落落大方的高贵气质。</p> <p> 国槐绿系列丝缎礼服使用在自行车、射击、现代五项等项目的颁奖仪式上。礼服寓意蓬勃朝气的生命和郁郁葱葱的环境，体现了与自然和谐发展的美好愿望及坚守“绿色奥运”的决心。立体银线绣制的吉祥牡丹和契合女性柔美曲线的卷曲花纹，更显身段的婀娜多姿和东方女性的恬静气质。</p> <p> “玉脂白”系列将出现在国家体育场、所有的室外球类比赛以及香港马术比赛中。它巧妙地呼应了奥运奖牌金镶玉的理念，彩绣腰封和玉佩的设计，既是中国玉文化的完美再现又是对传统旗袍设计的一次创新。层次丰富的绿色与牙白色丝绸面料的质感完美搭配，更突出了中国女性内敛、含蓄的特质。</p> <p> 粉红色系列主要出现在拳击、举重、摔跤等力量型比赛中，以传统盘金绣工艺制作的宝相花图案腰饰，分割出完美的人体比例。领部的设计突出了颈部的优美线条，同时以粉色的柔美来中和比赛的阳刚之气。</p> <p> 升旗手服装与青花瓷礼服遥相呼应，在体现中国传统文化的同时又不失阳刚之气，将出现在所有的奥运会和残奥会比赛场馆中。</p> <p> 所有的奥运礼服和升旗手制服都绣有“Beijing 2008”的字样。</p> <p> “十分具有中国文化特色”是国际奥委会对这些服装的第一评价。2007年5月23日，由北京奥组委主办、中国服装设计师协会和北京市工业促进局协办的北京奥运会颁奖礼仪服装设计征集活动启动后，共收到有效作品305份，包括服装成衣137套、效果图168份。投稿作品中包括全国“十佳”设计师投稿127份，服装设计专业院校投稿80份。</p> <p> 2007年8月2日—3日，经过初评和复评。由北京奥组委领导、中国艺术及服装设计界专家、国际奥委会形象景观专家及冠军运动员代表组成的评审小组共选出成衣作品30件，包括托盘员礼服8件、嘉宾引导员礼服7件、运动员引导员礼服10件、升旗手制服5件。2007年8月至2008年2月，北京奥组委组织专家召开了十余次方案修改研讨会。入围设计师在专家组的指导下多次修改方案、制作样衣。并先后于2007年11月8日和08年2月3日两次上报北京奥组委执委会审议。最终方案于2008年2月底通过国际奥委会审批。（张宇）</p> <!-- ..STYLE1 {color: #000000;font-weight: bold;font-size: 14px;} ..STYLE4 {color: #000000} ..STYLE5 {color: #000000; font-weight: bold;} ..STYLE6 {color: #000000}--> </div> <P> <div id="pages" style="font-size:12px;"></div> <script language="javascript"> var obj = document.getElementById("frameContent"); //获取内容层 var pages = document.getElementById("pages"); //获取翻页层 var pgindex=1; //当前页 window.onload = function() //重写窗体加载的事件 { var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量 pages.innerHTML = "<b>共"+allpages+"页</b>"; //输出页面数量 for (var i=1;i<=allpages;i++){ pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> "; //循环输出第几页 } pages.innerHTML += " <a href=\"javascript:gotopage('-1');\"</div></div> <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li> <li class="next"><a href="1926">下一篇：随日期变换文本</a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34375' title='中国手游总裁及8名高管集体下岗，被指涉不当交易' target="_blank"> 中国手游总裁及8名高管集体下岗，被指涉不当交易</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34308' title='迅雷再次在美提交IPO申请' target="_blank"> 迅雷再次在美提交IPO申请</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34097' title='柳传志马云陷舆论漩涡：请不要辜负这个时代' target="_blank"> 柳传志马云陷舆论漩涡：请不要辜负这个时代</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34167' title='都是300元内 乐视盒子与小米盒子对比体验' target="_blank"> 都是300元内 乐视盒子与小米盒子对比体验</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34286' title='一大波智能路由器正在袭来：小米、360、极路由大PK' target="_blank"> 一大波智能路由器正在袭来：小米、360、极路由大PK</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34157' title='传三星为赢得新兴市场：推廉价版Note3' target="_blank"> 传三星为赢得新兴市场：推廉价版Note3</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/680' title='腾讯再次重申：普通微信誉户相对不收费' target="_blank"> 腾讯再次重申：普通微信誉户相对不收费</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34402' title='不提老罗，不说情怀，仅从十四个投诉问题入手谈锤子手机' target="_blank"> 不提老罗，不说情怀，仅从十四个投诉问题入手谈锤子手机</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34390' title='微信企业号必须搬走四座大山，否则只能铩羽而归！' target="_blank"> 微信企业号必须搬走四座大山，否则只能铩羽而归！</a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/host/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/hostTest15day.png" alt="香港全能空间 免费试用15天香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/ItNews/34293 title='携程整合去哪儿陷入僵局 欲联手老对手艺龙' target="_blank"> 携程整合去哪儿陷入僵局 欲联手老对手艺龙</a></li> <li class="articleAbout"><a href=/ItNews/391 title='三星起诉LG在冰箱广告中玷污其企业笼统 ' target="_blank"> 三星起诉LG在冰箱广告中玷污其企业笼统 </a></li> <li class="articleAbout"><a href=/ItNews/34083 title='火一把就死： 百度魔图验证社交游戏衰亡宿命' target="_blank"> 火一把就死： 百度魔图验证社交游戏衰亡宿命</a></li> <li class="articleAbout"><a href=/ItNews/34354 title='中国邮政与阿里合作：邮政网点可做网购自提点' target="_blank"> 中国邮政与阿里合作：邮政网点可做网购自提点</a></li> <li class="articleAbout"><a href=/ItNews/6908 title='小米2S试水高端化 纯“性价比”玩法已成过去式' target="_blank"> 小米2S试水高端化 纯“性价比”玩法已成过去式</a></li> <li class="articleAbout"><a href=/ItNews/34127 title='三星手机在国内陷入困境：华为中兴小米紧追' target="_blank"> 三星手机在国内陷入困境：华为中兴小米紧追</a></li> <li class="articleAbout"><a href=/ItNews/34161 title='HTC曝出特大丑闻：高管诈骗＋商业间谍' target="_blank"> HTC曝出特大丑闻：高管诈骗＋商业间谍</a></li> <li class="articleAbout"><a href=/ItNews/34104 title='iPhone5S组件曝光 印证杀手级功能存在' target="_blank"> iPhone5S组件曝光 印证杀手级功能存在</a></li> <li class="articleAbout"><a href=/ItNews/34345 title='阿里入股虎嗅：媒体的脊梁弯了？未必！' target="_blank"> 阿里入股虎嗅：媒体的脊梁弯了？未必！</a></li> <li class="articleAbout"><a href=/ItNews/34315 title='国美在线叫板京东：李俊涛底气在哪?' target="_blank"> 国美在线叫板京东：李俊涛底气在哪?</a></li> <li class="articleAbout"><a href=/ItNews/34193 title='玩游戏式的趣味戒烟App：Kwit' target="_blank"> 玩游戏式的趣味戒烟App：Kwit</a></li> <li class="articleAbout"><a href=/ItNews/34230 title='O2O成"唐僧肉"：百度糯米抢食第一口令阿里腾讯颤抖' target="_blank"> O2O成"唐僧肉"：百度糯米抢食第一口令阿里腾讯颤抖</a></li> <li class="articleAbout"><a href=/ItNews/34442 title='成本效益全兼顾 混合云市场前景显现' target="_blank"> 成本效益全兼顾 混合云市场前景显现</a></li> <li class="articleAbout"><a href=/ItNews/34267 title='华为变阵:任正非调整三大业务布局' target="_blank"> 华为变阵:任正非调整三大业务布局</a></li> <li class="articleAbout"><a href=/ItNews/34445 title='百视通：Xbox One汉化获批 游戏迷欢呼吧' target="_blank"> 百视通：Xbox One汉化获批 游戏迷欢呼吧</a></li> <li class="articleAbout"><a href=/ItNews/34444 title='蘑菇街CEO陈琪：2015将回归社会化电商' target="_blank"> 蘑菇街CEO陈琪：2015将回归社会化电商</a></li> <li class="articleAbout"><a href=/ItNews/10838 title='打车App就是下一个团购骗局！？' target="_blank"> 打车App就是下一个团购骗局！？</a></li> <li class="articleAbout"><a href=/ItNews/34303 title='做大电影，阿里控股公司在港成立影业集团' target="_blank"> 做大电影，阿里控股公司在港成立影业集团</a></li> <li class="articleAbout"><a href=/ItNews/6890 title='HTC与苹果三星距离扩展 C2B形式成新武器' target="_blank"> HTC与苹果三星距离扩展 C2B形式成新武器</a></li> <li class="articleAbout"><a href=/ItNews/402 title='探析APP移动营销发扬实效的微妙' target="_blank"> 探析APP移动营销发扬实效的微妙</a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2025 爱易网页 当前在线：582人 网站在14时9分38秒内访问总人数：154322人 当前 12.24% <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>
以下是程序代码 以下是程序代码 以下是程序代码