Discuz教程网

1314学习网»站长论坛 › discuz资源中心 › discuz教程 › 便民电话超强漂亮的DIY 下滑式六格便民联系方式
返回列表 发新帖

[代码修改] 便民电话超强漂亮的DIY 下滑式六格便民联系方式

[复制链接]
authicon dly 发表于 2011-10-31 18:50:58 | 显示全部楼层 |阅读模式
一。便民电话截图及演示地址（有图有真相)

 115647bsb7n98ro1bh1olt.png.thumb.jpg
115648lodzbbffc88ba8o8.png.thumb.jpg
115648g6teb56kegbdmrkt.png.thumb.jpg
115649m5fb66bu6aummmzb.png.thumb.jpg
1156506a82a6vzvdfvtptv.png.thumb.jpg
115646ho3h65oon5lo45i0.png.thumb.jpg

便民电话 便民工具 DIY 实用

此便民电话是本人在别的网站看到，经过自己的修正添加，
以简单 大方 实用 分享给大家，
至今使用半年，没有网速慢或浏览等影响，
大家完全可以放心使用。

技术支持群：66021024

二。使用方法：

新建一个DIY   展示类模板   HTML 代码:


  1. <!DOCTYPE html PUBh2C "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>柳州顶级网便民服务电话</title>
  6. <style type="text/css">
  7. *{padding:0px; margin:0px;}
  8. body {
  9. background-color: #fff;
  10. font-size: 12px;
  11. color: #333;
  12. }
  13. a:link {text-decoration: none;color: #f00;}
  14. a:visited {text-decoration: none;color: #f00;}
  15. a:hover {text-decoration: underline;color: #016A9F;}
  16. a:active {text-decoration: none;color: #f00;}
  17. #xx_easy {margin:0px auto;width:958px;overflow:hidden;border:1px #cdcdcd solid;}
  18. #xx_easy .title {height:33px;line-height:33px;background-image: url(http://www.lzdjw.net/static/image/common/title_bg.gif);background-repeat: repeat-x;border-top-width: 0.5px;border-right-width: 0.5px;border-left-width: 0.5px;border-top-style: solid;border-right-style: solid;border-left-style: solid;border-top-color: #cdcdcd;border-right-color: #cdcdcd;border-left-color: #cdcdcd; padding-left:10px; overflow:hidden; font-weight:bold;}
  19. #xx_easy .xx_nav { float:left; width:88px; margin:1px; overflow:hidden;}
  20. #xx_easy .xx_info { float:left; width:848px; margin-left:10px; margin-right:5px; margin-top:8px; overflow:hidden;}
  21. #xx_easy h2 { width:88px;font-size:12px; text-align:center; line-height:28px; overflow:hidden;}
  22. #xx_easy h2.menuNo {font-weight:normal;color:#333;background-image: url(http://www.lzdjw.net/static/image/common/nav_bg.gif);background-repeat: repeat-y;}
  23. #xx_easy h2.menuOn {font-weight:bold;color:#fff;background-image: url(http://www.lzdjw.net/static/image/common/nav_bgon.gif);background-repeat: no-repeat;overflow:hidden;}
  24. #xx_easy .xx_info_none { display:none;}
  25. #xx_easy ul { overflow:hidden;}
  26. #xx_easy ul li { list-style-type:none; float:left; width:141px; line-height:22px;}
  27. #xx_easy .red { color:#F00;} /* 套红 red */
  28. #xx_easy .blue { color:#00F;} /* 套蓝 blue */
  29. #xx_easy .redb { color:#f00; font-weight:bold;} /* 套红+粗 redb */
  30. #xx_easy .blueb { color:#00f; font-weight:bold;} /* 套蓝+粗 blueb */
  31. </style>
  32. </head>
  33. <body>
  34. <div id="xx_easy">
  35. <script language="javascript">
  36. function switchmodTag(modtag,modcontent,modk) {
  37. for(i=1; i <7; i++) {
  38. if (i==modk) {
  39. document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="xx_info";}
  40. else {
  41. document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="xx_info_none";}
  42. }
  43. }
  44. </script>
  45. <div class="title">顶级网推荐商家： <a href="http://www.lzdjw.net/forum-79-1.html" target="_blank">点击提交收录</a></div>
  46. <div class="xx_nav">
  47. <h2 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','xx_info','1');this.blur();">市政服务</h2>
  48. <h2 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','xx_info','2');this.blur();">奶粉辅食</h2>
  49. <h2 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','xx_info','3');this.blur();">早教机构</h2>
  50. <h2 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','xx_info','4');this.blur();">儿童摄影</h2>
  51. <h2 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','xx_info','5');this.blur();">婴儿用品</h2>
  52. <h2 class="menuNo" id="mod6" onmouseover="switchmodTag('mod','xx_info','6');this.blur();">其它商家</h2>
  53. </div>
  54. <!--市政热线-->
  55. <div class="xx_info" id="xx_info1">
  56. <ul>
  57. <li>报警求助：110</li>
  58. <li>消防火警：119</li>
  59. <li>医疗急救：120</li>
  60. <li>交通违章：122</li>
  61. <li>天气预报：12121</li>
  62. <li>消费投诉：12315</li>
  63. </ul>
  64. <ul>
  65. <li>文化执法：12318</li>
  66. <li>城市管理：12319</li>
  67. <li>物价投诉：12358</li>
  68. <li>质量监督：12365</li>
  69. <li>税务查询：12366</li>
  70. <li>环保投诉：12369</li>
  71. </ul>
  72. <ul>
  73. <li>环保投诉：12369</li>
  74. <li>电力监管: 12398</li>
  75. <li>纪检监察：12388</li>
  76. <li>组织系统：12380</li>
  77. <li>机构编制：12310</li>
  78. <li>党员咨询：12371</li>
  79. </ul>
  80. <ul>
  81. <li>协和医院：83357896</li>
  82. <li>省立医院：87557768</li>
  83. <li>人民医院：88055116</li>
  84. <li>空军医院：83930000</li>
  85. <li>市中医院：83570372</li>
  86. <li>中心血站：83898059</li>
  87. </ul>
  88. <ul>
  89. <li>电信宽带：10000</li>
  90. <li>联通宽带：10060</li>
  91. <li>铁通宽带：10050</li>
  92. <li>广电宽带：968896</li>
  93. <li>电力服务: 95598</li>
  94. <li>煤气服务：83663333</li>
  95. </ul>
  96. <ul>
  97. <li>市劳动局: 83341202</li>
  98. <li>市质监局: 83713814</li>
  99. <li>市城市执法: 83312385</li>
  100. <li>市运输管理处: 83313000</li>
  101. <li>市政工程管理: 83351066</li>
  102. <li>市自来水客服: 87548855</li>
  103. </ul>
  104. <ul>
  105. <li>柳州火车站：3925112</li>
  106. <li>柳州长途车：3670988</li>
  107. <li>柳州莲花站：3121437</li>
  108. <li>柳邕客运站：3255000</li>
  109. <li>白沙客运站: 2514079</li>
  110. <li>南长汽车站: 3670127</li>
  111. </ul>
  112. </div>
  113. <!--奶粉辅食-->
  114. <div class="xx_info_none" id="xx_info2">
  115. <ul>
  116. <li>贝因美</li>
  117. <li>太子乐</li>
  118. <li>明一</li>
  119. <li></li>
  120. <li></li>
  121. <li></li>
  122. </ul>
  123. <ul>
  124. <li></li>
  125. <li></li>
  126. <li></li>
  127. <li></li>
  128. <li></li>
  129. <li></li>
  130. </ul>
  131. <ul>
  132. <li></li>
  133. <li></li>
  134. <li></li>
  135. <li></li>
  136. <li></li>
  137. <li></li>
  138. </ul>
  139. <ul>
  140. <li></li>
  141. <li></li>
  142. <li></li>
  143. <li></li>
  144. <li></li>
  145. <li></li>
  146. </ul>
  147. <ul>
  148. <li></li>
  149. <li></li>
  150. <li></li>
  151. <li></li>
  152. <li></li>
  153. <li></li>
  154. </ul>
  155. <ul>
  156. <li></li>
  157. <li></li>
  158. <li></li>
  159. <li></li>
  160. <li></li>
  161. <li></li>
  162. </ul>
  163. <ul>
  164. <li></li>
  165. <li></li>
  166. <li></li>
  167. <li></li>
  168. <li></li>
  169. </ul>
  170. </div>
  171. <!--早教机构-->
  172. <div class="xx_info_none" id="xx_info3">
  173. <ul>
  174. <li>金宝贝早教中心</li>
  175. <li>万婴早教中心</li>
  176. <li>金太阳艺术学校</li>
  177. <li>智慧1+1</li>
  178. <li></li>
  179. <li></li>
  180. </ul>
  181. <ul>
  182. <li></li>
  183. <li></li>
  184. <li></li>
  185. <li></li>
  186. <li></li>
  187. <li></li>
  188. </ul>
  189. <ul>
  190. <li></li>
  191. <li></li>
  192. <li></li>
  193. <li></li>
  194. <li></li>
  195. <li></li>
  196. </ul>
  197. <ul>
  198. <li></li>
  199. <li></li>
  200. <li></li>
  201. <li></li>
  202. <li></li>
  203. <li></li>
  204. </ul>
  205. <ul>
  206. <li></li>
  207. <li></li>
  208. <li></li>
  209. <li></li>
  210. <li></li>
  211. <li></li>
  212. </ul>
  213. <ul>
  214. <li></li>
  215. <li></li>
  216. <li></li>
  217. <li></li>
  218. <li></li>
  219. <li></li>
  220. </ul>
  221. <ul>
  222. <li></li>
  223. <li></li>
  224. <li></li>
  225. <li></li>
  226. <li></li>
  227. </ul>
  228. </div>
  229. <!--儿童摄影-->
  230. <div class="xx_info_none" id="xx_info4">
  231. <ul>
  232. <li><a href="http://ly.91.com" target="_blank">91乐印</a></li>
  233. <li>宝宝当家</li>
  234. <li>爱你宝贝</li>
  235. <li>印象宝贝</li>
  236. <li>万福娃</li>
  237. <li></li>
  238. </ul>
  239. <ul>
  240. <li></li>
  241. <li></li>
  242. <li></li>
  243. <li></li>
  244. <li></li>
  245. <li></li>
  246. </ul>
  247. <ul>
  248. <li></li>
  249. <li></li>
  250. <li></li>
  251. <li></li>
  252. <li></li>
  253. <li></li>
  254. </ul>
  255. <ul>
  256. <li></li>
  257. <li></li>
  258. <li></li>
  259. <li></li>
  260. <li></li>
  261. <li></li>
  262. </ul>
  263. <ul>
  264. <li></li>
  265. <li></li>
  266. <li></li>
  267. <li></li>
  268. <li></li>
  269. <li></li>
  270. </ul>
  271. <ul>
  272. <li></li>
  273. <li></li>
  274. <li></li>
  275. <li></li>
  276. <li></li>
  277. <li></li>
  278. </ul>
  279. <ul>
  280. <li></li>
  281. <li></li>
  282. <li></li>
  283. <li></li>
  284. <li></li>
  285. </ul>
  286. </div>
  287. <!--婴儿用品-->
  288. <div class="xx_info_none" id="xx_info5">
  289. <ul>
  290. <li><a href="http://www.ibaole.com" target="_blank">爱宝乐商城</a></li>
  291. <li><a href="http://item.taobao.com/item.htm?id=12666192277" target="_blank">史努比书包全场五折起</a></li>
  292. <li></li>
  293. <li></li>
  294. <li></li>
  295. <li></li>
  296. </ul>
  297. <ul>
  298. <li></li>
  299. <li></li>
  300. <li></li>
  301. <li></li>
  302. <li></li>
  303. <li></li>
  304. </ul>
  305. <ul>
  306. <li></li>
  307. <li></li>
  308. <li></li>
  309. <li></li>
  310. <li></li>
  311. <li></li>
  312. </ul>
  313. <ul>
  314. <li></li>
  315. <li></li>
  316. <li></li>
  317. <li></li>
  318. <li></li>
  319. <li></li>
  320. </ul>
  321. <ul>
  322. <li></li>
  323. <li></li>
  324. <li></li>
  325. <li></li>
  326. <li></li>
  327. <li></li>
  328. </ul>
  329. <ul>
  330. <li></li>
  331. <li></li>
  332. <li></li>
  333. <li></li>
  334. <li></li>
  335. <li></li>
  336. </ul>
  337. <ul>
  338. <li></li>
  339. <li></li>
  340. <li></li>
  341. <li></li>
  342. <li></li>
  343. </ul>
  344. </div>
  345. <!--其它商家-->
  346. <div class="xx_info_none" id="xx_info6">
  347. <ul>
  348. <li></li>
  349. <li></li>
  350. <li></li>
  351. <li></li>
  352. <li></li>
  353. <li></li>
  354. </ul>
  355. <ul>
  356. <li></li>
  357. <li></li>
  358. <li></li>
  359. <li></li>
  360. <li></li>
  361. <li></li>
  362. </ul>
  363. <ul>
  364. <li></li>
  365. <li></li>
  366. <li></li>
  367. <li></li>
  368. <li></li>
  369. <li></li>
  370. </ul>
  371. <ul>
  372. <li></li>
  373. <li></li>
  374. <li></li>
  375. <li></li>
  376. <li></li>
  377. <li></li>
  378. </ul>
  379. <ul>
  380. <li></li>
  381. <li></li>
  382. <li></li>
  383. <li></li>
  384. <li></li>
  385. <li></li>
  386. </ul>
  387. <ul>
  388. <li></li>
  389. <li></li>
  390. <li></li>
  391. <li></li>
  392. <li></li>
  393. <li></li>
  394. </ul>
  395. <ul>
  396. <li></li>
  397. <li></li>
  398. <li></li>
  399. <li></li>
  400. <li></li>
  401. </ul>
  402. </div>
  403. </div>
  404. </body>
  405. </html>
复制代码
注：链接地址和文字依自己实际情况更换，感谢大家支持，尊重作者发帖的劳动，用上顶个回帖让更多的人可以分享，谢谢各位了，上帝会保佑你们


补充：以下是用到的三张图片
1. nav_bgon.gif
2. title_bg.gif
3. nav_bg.gif
模板



上一篇：仿2010猪八戒首页导航菜单
下一篇：discuz!x2缩略图加水印方法详解

相关帖子
回复

举报

authicon wsyp 发表于 2011-10-31 22:53:37 | 显示全部楼层
谢谢分享！
回复

举报

authicon 山外人￥机器 发表于 2011-11-1 13:37:15 | 显示全部楼层
原来是这个。。这个我已经用了呢
回复

举报

authicon 笑屁孩 发表于 2011-11-1 17:31:05 | 显示全部楼层
LZ，这个代码里面带的图片呢？我在代码里看到图片地址了，但是打开那个地址却没有发现图片！！！
回复

举报

authicon  楼主| dly 发表于 2011-11-1 21:12:20 | 显示全部楼层
笑屁孩 发表于 2011-11-1 17:31
LZ，这个代码里面带的图片呢？我在代码里看到图片地址了，但是打开那个地址却没有发现图片！！！

打开是有图的，可能因为颜色与背景太相似你没看出来，为了方便我已经上传图片了
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 12:40

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表