1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > HTML使用DIV+css实现展开全文的功能

HTML使用DIV+css实现展开全文的功能

时间:2018-07-11 05:36:15

相关推荐

HTML使用DIV+css实现展开全文的功能

手机app展示图文内容太长,导致底部评论等功能需要下拉到最底部才能看到,影响用户使用,所以用webview加载html页面,实现了展开全文的功能。直接上代码。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图文展开</title><style>#myarticle{width:700px;height:300px;overflow-y:hidden;border:1px solid green;margin:20px auto;}p{text-indent: 2em;margin-bottom: 10px;}button{width:700px;margin:10px auto;text-align: center;display: none;}</style></head><body><div id="myarticle"><p>横道河子镇是牡丹江通往哈尔滨的咽喉要道,301国道和缤绥铁路穿越全境,距省会哈尔滨253公里,距牡丹江市45公里,距绥芬河口岸210公里,距海林市33公里,距国际航空港牡丹江机场54公里,交通十分发达。横道河子镇行政区总面积为794平方公里,城镇规划区面积为7.85平方公里。镇内有2个社区,辖6个行政村,总人口32000人。

该镇有着悠久的历史与文化脉络,由于1897年中东铁路的修建而使其得以发展,自沙俄经营中东铁路至日伪时期,当年商贾云集,高楼林立,有“花园城镇”之称,由于独特的俄罗斯文化资源优势,使横道河子在俄罗斯和国内都享有一定的知名度。全省唯一的木制东正教堂,中东铁路机车库、大白楼都完整的保留至今,并有近200处俄式建筑留存下来,其中市级保护建筑104栋,国家级保护建筑5处。新建的中东铁路运输博物馆、油画村、剧照馆、王洛宾纪念馆、中共海林党史纪念馆等展馆也极大地丰富了横道河镇的旅游资源,如今横道河子俄罗斯小镇风景区已经获批国家AAAA级景区。。</p><p>东正教堂、机车库、木格楞、俄式民宅,俄式办公楼,小镇依山就势错落有致的建筑,完全是俄罗斯乡间别墅的布局,最为珍贵的是,横道河子的老建筑保护得非常好,几乎没被破坏。

没有了战争,教堂的钟声也远去了,可这些俄式古屋却仍然显示着小镇异域风情的存在。现在横道河子小镇的人依然喜欢喝啤酒、果酒和烈性白酒,喜欢吃火腿肠、面包和果酱,人们的生活仍旧带有俄罗斯民族的习俗。

择一城终老,横道河子古镇真的是一处可以安放灵魂的地方,宁静、祥和、缓慢。</p><p>东正教堂、机车库、木格楞、俄式民宅,俄式办公楼,小镇依山就势错落有致的建筑,完全是俄罗斯乡间别墅的布局,最为珍贵的是,横道河子的老建筑保护得非常好,几乎没被破坏。

没有了战争,教堂的钟声也远去了,可这些俄式古屋却仍然显示着小镇异域风情的存在。现在横道河子小镇的人依然喜欢喝啤酒、果酒和烈性白酒,喜欢吃火腿肠、面包和果酱,人们的生活仍旧带有俄罗斯民族的习俗。

择一城终老,横道河子古镇真的是一处可以安放灵魂的地方,宁静、祥和、缓慢</p><p>东正教堂、机车库、木格楞、俄式民宅,俄式办公楼,小镇依山就势错落有致的建筑,完全是俄罗斯乡间别墅的布局,最为珍贵的是,横道河子的老建筑保护得非常好,几乎没被破坏。

没有了战争,教堂的钟声也远去了,可这些俄式古屋却仍然显示着小镇异域风情的存在。现在横道河子小镇的人依然喜欢喝啤酒、果酒和烈性白酒,喜欢吃火腿肠、面包和果酱,人们的生活仍旧带有俄罗斯民族的习俗。

择一城终老,横道河子古镇真的是一处可以安放灵魂的地方,宁静、祥和、缓慢</p><p>非常感谢女儿和她同年同月同日生的小伙伴,是两个孩子的四只小手,牵起了两个家长的四只大手(八爪鱼有木有),携手在线为您忽悠,还要感谢携手在线的姑娘、小伙们,你们应该的呵!</p></div><button id="btn">展开全文……</button><script>var btn = document.getElementById('btn');var obj = document.getElementById('myarticle');var total_height = obj.scrollHeight;//文章总高度var show_height = 300;//定义原始显示高度if(total_height>show_height){btn.style.display = 'block';btn.onclick = function(){obj.style.height = total_height + 'px';btn.style.display = 'none';}}</script></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。