搜城随州圈二级代码不是导航是版块介绍绝对漂亮（见演示站点）

搜城随州圈二级代码不是导航是版块介绍绝对漂亮（见演示站点）
其实就是全部html代码
没什么其他的
就这段代码放进去就可以了

1. <div id="pw_content" class=""><!--关闭侧栏使用样式 sideClose-->
   
2. 
   
3. <div id="sidebar" class="f_tree cc">
   
4. 
   
5. <div class="content_thread cc">
   
6. <div class="content_ie">
   
7. 
   
8. <div>
   
9. 
   
10. <style type="text/css">
    
11. #un_body{
    
12. width:960px;
    
13. overflow: hidden;
    
14. position: relative;
    
15. margin-bottom: 6px;
    
16. }
    
17. 
    
18. .un_child{
    
19. width:960px;
    
20. position: absolute;
    
21. z-index: 90;
    
22. top:0px;
    
23. left: 0px;
    
24. }
    
25. 
    
26. .un_child .list{
    
27. border-bottom: 4px solid #F26520;
    
28. background-image: url(diy/quanquan/child_bg.jpg);
    
29. background-position: left bottom;
    
30. background-repeat: repeat-x;
    
31. overflow: hidden;
    
32. margin-top: -75px;
    
33. float: left;
    
34. width:960px;
    
35. }
    
36. 
    
37. .un_child .item{
    
38. padding-left: 43px;
    
39. float: left;
    
40. width:273px!important;
    
41. height:62px!important;
    
42. }
    
43. 
    
44. .un_child .split{
    
45. background-image: url(diy/quanquan/child_item_bg.jpg);
    
46. background-position: right bottom;
    
47. background-repeat: no-repeat;
    
48. height:75px;
    
49. width:5px;
    
50. float: left;
    
51. }
    
52. .un_child .item h3{
    
53. font-weight: bold;
    
54. font-size: 14px;
    
55. height: 22px;
    
56. line-height: 22px;
    
57. width:250px;
    
58. }
    
59. 
    
60. .un_child .item h3 a{
    
61. color:#F06520;
    
62. }
    
63. 
    
64. .un_child .item p{
    
65. line-height: 18px;
    
66. color:#626262;
    
67. width:250px;
    
68. height:36px;
    
69. overflow: hidden;
    
70. margin-top: 3px;
    
71. }
    
72. 
    
73. .pd_btn{
    
74. text-align: right;
    
75. height:33px;
    
76. }
    
77. 
    
78. .pd_btn .span1{
    
79. background: url(diy/quanquan/food_child_btn.gif);
    
80. background-position: 1px top;
    
81. cursor: pointer;
    
82. width:123px;
    
83. height:33px;
    
84. display: block;
    
85. float: right;
    
86. }
    
87. 
    
88. .pd_btn .span2{
    
89. background: url(diy/quanquan/food_child_btn2.gif);
    
90. background-position: 1px top;
    
91. cursor: pointer;
    
92. width:123px;
    
93. height:33px;
    
94. display: block;
    
95. float: right;
    
96. }
    
97. 
    
98. .un_content{
    
99. background-image: url(diy/quanquan/food_bg.jpg);
    
100. background-position: left 4px;
     
101. background-repeat: no-repeat;
     
102. width: 960px;
     
103. height:467px;
     
104. position: relative;
     
105. z-index: 0;
     
106. top:0px;
     
107. left:0px;
     
108. }
     
109. 
     
110. .forum_info{
     
111. width:550px;
     
112. height:67px;
     
113. background-image: url(diy/quanquan/food_desc_bg.gif);
     
114. background-position: left bottom;
     
115. background-repeat: no-repeat;
     
116. position: absolute;
     
117. top: 19px;
     
118. left: 231px;
     
119. display: inline;
     
120. }
     
121. 
     
122. .ban_topicC{
     
123. padding-left: 17px;
     
124. height:20px;
     
125. color:#636363;
     
126. line-height: 20px;
     
127. }
     
128. 
     
129. .ban_topicC a{
     
130. color:#636363;
     
131. }
     
132. 
     
133. .forum_des{
     
134. padding-left: 17px;
     
135. color:#252525;
     
136. }
     
137. 
     
138. .hot_topics{
     
139. position: absolute;
     
140. top: 86px;
     
141. left: 374px;
     
142. display: inline;
     
143. width:330px;
     
144. }
     
145. 
     
146. .hot_topics a{
     
147. color:#757575;
     
148. }
     
149. 
     
150. .hot_topics .topic_item{
     
151. height:24px;
     
152. line-height: 24px;
     
153. background-repeat: no-repeat;
     
154. padding-left: 30px;
     
155. font-size: 14px;
     
156. background-position: 10px 5px;
     
157. overflow: hidden;
     
158. }
     
159. 
     
160. .hot_topics .sort1{
     
161. background-image: url(diy/quanquan/sort_num_1.jpg);
     
162. }
     
163. 
     
164. .hot_topics .sort2{
     
165. background-image: url(diy/quanquan/sort_num_2.jpg);
     
166. }
     
167. 
     
168. .hot_topics .sort3{
     
169. background-image: url(diy/quanquan/sort_num_3.jpg);
     
170. }
     
171. 
     
172. .hot_topics .sort4{
     
173. background-image: url(diy/quanquan/sort_num_4.jpg);
     
174. }
     
175. 
     
176. .hot_topics .sort5{
     
177. background-image: url(diy/quanquan/sort_num_5.jpg);
     
178. }
     
179. 
     
180. .hot_topics .sort6{
     
181. background-image: url(diy/quanquan/sort_num_6.jpg);
     
182. }
     
183. 
     
184. .hot_topics .logo img{
     
185. _behavior: url("u/images/iepngfix.htc");
     
186. width:129px;
     
187. height:40px;
     
188. }
     
189. 
     
190. .hot_topics .logo{
     
191. height:56px;
     
192. }
     
193. 
     
194. .un_active{
     
195. background-image: url(diy/quanquan/unarea_food_bot_bg.jpg);
     
196. background-position: left bottom;
     
197. background-repeat: repeat-x;
     
198. position: absolute;
     
199. display: inline;
     
200. bottom: 0px;
     
201. height:110px;
     
202. width:960px;
     
203. z-index: 0;
     
204. }
     
205. 
     
206. .hot_topics .logo2 img{
     
207. _behavior: url("u/images/iepngfix.htc");
     
208. width:173px;
     
209. height:40px;
     
210. }
     
211. 
     
212. 
     
213. .hot_topics .logo2{
     
214. text-align: left;
     
215. margin-top: 14px;
     
216. }
     
217. 
     
218. .active_item{
     
219. width:300px;
     
220. height:90px;
     
221. float: right;
     
222. display: inline;
     
223. }
     
224. 
     
225. .active_item div{
     
226. float: left;
     
227. display: inline;
     
228. overflow: hidden;
     
229. }
     
230. 
     
231. .active_item img{
     
232. border:4px solid #E1E1E1;
     
233. width:280px;
     
234. height:70px;
     
235. }
     
236. 
     
237. .active_item .img{
     
238. width:290px;
     
239. height:80px;
     
240. margin-right: 10px;
     
241. border: none;
     
242. padding: 0px;
     
243. }
     
244. 
     
245. .active_item .title{
     
246. height:22px;
     
247. line-height: 28px;
     
248. font-size: 14px;
     
249. font-weight: bold;
     
250. width:190px;
     
251. }
     
252. 
     
253. .active_item .title a{
     
254. color:#F26520;
     
255. }
     
256. 
     
257. .active_item .desc{
     
258. margin-top: 14px;
     
259. color:#464646;
     
260. width:190px;
     
261. height:54px;
     
262. float: left;
     
263. display: inline;
     
264. }
     
265. 
     
266. #food_hot{
     
267. background-image: url(diy/quanquan/food_hot_bg.jpg);
     
268. background-position: left bottom;
     
269. background-repeat: repeat-x;
     
270. padding:0 12px;
     
271. padding:0 8px;
     
272. width:200px;
     
273. position: absolute;
     
274. top:86px;
     
275. right: 30px;
     
276. }
     
277. 
     
278. #food_hot span {
     
279. color:#F26520;
     
280. display:inline;
     
281. float:left;
     
282. font-size:14px;
     
283. font-weight:bold;
     
284. overflow:hidden;
     
285. width:200px;
     
286. }
     
287. 
     
288. #food_hot ul{
     
289. display:inline;
     
290. float:left;
     
291. margin-left:0;
     
292. margin-top:4px;
     
293. overflow:hidden;
     
294. width:200px;
     
295. margin-bottom: 4px;
     
296. }
     
297. 
     
298. #food_hot li {
     
299. display:inline;
     
300. float:none;
     
301. height:18px;
     
302. line-height:18px;
     
303. padding-left:0;
     
304. padding-right:5px;
     
305. width:auto;
     
306. }
     
307. 
     
308. .un_flash{
     
309. position: absolute;
     
310. top:92px;
     
311. width:324px;
     
312. height:317px;
     
313. }
     
314. 
     
315. .flash_btn{
     
316. background-image: url(diy/quanquan/food_flash_btn_bg.gif);
     
317. 
     
318. height: 15px;
     
319. width: 15px;
     
320. color:#F36324;
     
321. text-align: center;
     
322. line-height: 15px;
     
323. position: absolute;
     
324. font-weight: bold;
     
325. z-index: 5;
     
326. cursor: pointer;
     
327. }
     
328. 
     
329. .flash_btn_current{
     
330. background-image: url(diy/quanquan/food_flash_btn_h_bg.gif);
     
331. 
     
332. color:#fff;
     
333. }
     
334. 
     
335. .fbtn1 {
     
336. left:128px;
     
337. top:410px;
     
338. }
     
339. .fbtn2 {
     
340. left:149px;
     
341. top:415px;
     
342. }
     
343. .fbtn3 {
     
344. left:170px;
     
345. top:417px;
     
346. }
     
347. .fbtn4 {
     
348. left:191px;
     
349. top:416px;
     
350. }
     
351. .fbtn5 {
     
352. left:212px;
     
353. top:412px;
     
354. }
     
355. 
     
356. .flash_img{
     
357. width:288px;
     
358. height:282px;
     
359. position:absolute;
     
360. top:127px;
     
361. left:36px;
     
362. z-index: 2;
     
363. }
     
364. 
     
365. .a_img{
     
366. width:288px;
     
367. height:282px;
     
368. z-index: 3;
     
369. position: absolute;
     
370. top:127px;
     
371. left:36px;
     
372. }
     
373. </style>
     
374. <script type="text/javascript" src="diy/quanquan/jquery-1.3.2.min.js"></script>
     
375. <script type="text/javascript">
     
376. jQuery.noConflict();
     
377. </script>
     
378. <div id="un_body">
     
379. <div class="un_child">
     
380. <div class="list">
     
381. 
     
382. <div class="item">
     
383. <h3><a href="#">同城食品</a></h3>
     
384. <p>都为零食狂</p>
     
385. </div>
     
386. 
     
387. <div class="split"></div>
     
388. 
     
389. <div class="item">
     
390. <h3><a href="#">美食商家自荐</a></h3>
     
391. <p>商家发布餐厅、菜品、食材食器信息专区</p>
     
392. </div>
     
393. 
     
394. <div class="split"></div>
     
395. 
     
396. <div class="item">
     
397. <h3><a href="#">随州美食打折专区</a></h3>
     
398. <p>分享随州美食餐饮打折优惠信息。</p>
     
399. </div>
     
400. 
     
401. <div style="clear:both;"></div>
     
402. </div>
     
403. <div class="pd_btn">
     
404. <span class="span1"></span>
     
405. </div>
     
406. </div>
     
407. <div class="un_content">
     
408. <div class="forum_info">
     
409. <div class="ban_topicC">
     
410. 版主:
     
411. 
     
412. <a class="username" href="#">林夕</a>
     
413. 
     
414. 商务合作电话:15897649850
     
415. </div>
     
416. <div class="forum_des">
     
417. 每次享受美食的同时要记得先拍照哦，那样就方便参加“吃了就来秀”活动了！如果你觉得活动不错，别忘了提醒你身边的朋友们，享受美食，分享美食，有机会得大奖哦！
     
418. </div>
     
419. </div>
     
420. <div class="hot_topics">
     
421. <div class="logo">
     
422. <img alt="美食热门推荐" src="diy/quanquan/food_hot_logo.png"/>
     
423. </div>
     
424. 
     
425. <div class="topic_item sort1">
     
426. <a href="#" target="_blank">生日蛋糕 哈根达斯淘宝购物切记~</a>
     
427. </div>
     
428. 
     
429. <div class="topic_item sort2">
     
430. <a href="#" target="_blank">郊外觅食FB小记 泽园别有一番洞天</a>
     
431. </div>
     
432. 
     
433. <div class="topic_item sort3">
     
434. <a href="#" target="_blank">港丽茶餐厅，这里的柠檬水淡的像白开水</a>
     
435. </div>
     
436. 
     
437. <div class="topic_item sort4">
     
438. <a href="#" target="_blank">海派风情老克勒不是李克勤，上海菜餐厅尝鲜</a>
     
439. </div>
     
440. 
     
441. <div class="topic_item sort5">
     
442. <a href="#" target="_blank">小房子，橘色顶。来自街有食情。</a>
     
443. </div>
     
444. 
     
445. <div class="topic_item sort6">
     
446. <a href="#" target="_blank">吃喝版主又一大贴，福利加腐败的一天</a>
     
447. </div>
     
448. 
     
449. <div class="logo2">
     
450. <img alt="美食精彩活动" src="diy/quanquan/food_active_logo.png"/>
     
451. </div>
     
452. </div>
     
453. <div id="food_hot">
     
454. <span>[热门菜]</span>
     
455. <ul>
     
456. 
     
457. <li><a target="_blank" href="#">自助餐</a></li>
     
458. 
     
459. <li><a target="_blank" href="#">西餐</a></li>
     
460. 
     
461. <li><a target="_blank" href="#">韩国菜</a></li>
     
462. 
     
463. <li><a target="_blank" href="#">泰国菜</a></li>
     
464. 
     
465. <li><a target="_blank" href="#">川菜</a></li>
     
466. 
     
467. <li><a target="_blank" href="#">日本料理</a></li>
     
468. 
     
469. <li><a target="_blank" href="#">龙虾</a></li>
     
470. 
     
471. </ul>
     
472. <span>[热门商圈]</span>
     
473. <ul>
     
474. 
     
475. <li><a target="_blank" href="#">新天地</a></li>
     
476. 
     
477. <li><a target="_blank" href="#">随州</a></li>
     
478. 
     
479. <li><a target="_blank" href="#">曾都区</a></li>
     
480. 
     
481. <li><a target="_blank" href="#">百盛</a></li>
     
482. 
     
483. </ul>
     
484. <span>[热门街区]</span>
     
485. <ul>
     
486. 
     
487. <li><a target="_blank" href="#">丁公路</a></li>
     
488. 
     
489. <li><a target="_blank" href="#">福州路</a></li>
     
490. 
     
491. <li><a target="_blank" href="#">二七北路</a></li>
     
492. 
     
493. <li><a target="_blank" href="#">民德路</a></li>
     
494. 
     
495. <li><a target="_blank" href="#">子固路</a></li>
     
496. 
     
497. <li><a target="_blank" href="#">沿江路</a></li>
     
498. 
     
499. <li><a target="_blank" href="#">建德观街</a></li>
     
500. 
     
501. </ul>
     
502. <span>[热门分类]</span>
     
503. <ul>
     
504. 
     
505. <li><a target="_blank" href="#">近郊觅食</a></li>
     
506. 
     
507. <li><a target="_blank" href="#">随州老字号</a></li>
     
508. 
     
509. <li><a target="_blank" href="#">西餐</a></li>
     
510. 
     
511. <li><a target="_blank" href="#">火锅</a></li>
     
512. 
     
513. <li><a target="_blank" href="#">咖啡馆</a></li>
     
514. 
     
515. <li><a target="_blank" href="#">夜宵</a></li>
     
516. 
     
517. <li><a target="_blank" href="#">喝粥</a></li>
     
518. 
     
519. </ul>
     
520. </div>
     
521. 
     
522. <img class="flash_img" src="diy/quanquan/hdp_17.jpg" style="display: list-item;"/>
     
523. <a target="_blank" href="#"><img class="a_img" style="display: list-item;" src="diy/quanquan/tm.gif"/></a>
     
524. 
     
525. <img class="flash_img" src="diy/quanquan/hdp_18.jpg" style="display: none;"/>
     
526. <a target="_blank" href="#"><img class="a_img" style="display: none;" src="diy/quanquan/tm.gif"/></a>
     
527. 
     
528. <img class="flash_img" src="diy/quanquan/hdp_19.jpg" style="display: none;"/>
     
529. <a target="_blank" href="#"><img class="a_img" style="display: none;" src="diy/quanquan/tm.gif"/></a>
     
530. 
     
531. <img class="flash_img" src="diy/quanquan/hdp_20.jpg" style="display: none;"/>
     
532. <a target="_blank" href="#"><img class="a_img" style="display: none;" src="diy/quanquan/tm.gif"/></a>
     
533. 
     
534. <img class="flash_img" src="diy/quanquan/hdp_21.jpg" style="display: none;"/>
     
535. <a target="_blank" href="#"><img class="a_img" style="display: none;" src="diy/quanquan/tm.gif"/></a>
     
536. 
     
537. <div style="z-index: 2; background-image: url(diy/quanquan/food_flash_bg.png);_behavior: url(u/images/iepngfix.htc); height: 375px; width: 356px; position: absolute; top: 92px;"></div>
     
538. 
     
539. <div class="flash_btn flash_btn_current fbtn1" current="1" num="1">1</div>
     
540. 
     
541. <div class="flash_btn fbtn2" current="0" num="2">2</div>
     
542. 
     
543. <div class="flash_btn fbtn3" current="0" num="3">3</div>
     
544. 
     
545. <div class="flash_btn fbtn4" current="0" num="4">4</div>
     
546. 
     
547. <div class="flash_btn fbtn5" current="0" num="5">5</div>
     
548. 
     
549. <script language="JavaScript">
     
550. var autoplay = setInterval(function(){flash_play(-1)},2*1000);
     
551. 
     
552. jQuery(".a_img,.flash_btn").mouseover(function(){
     
553. clearInterval(autoplay);
     
554. });
     
555. jQuery(".a_img,.flash_btn").mouseout(function(){
     
556. autoplay = setInterval(function(){flash_play(-1)},2*1000);
     
557. });
     
558. jQuery(".flash_btn").mouseover(function(){
     
559. flash_play(parseInt(jQuery(this).attr("num"))-1);
     
560. });
     
561. function flash_play(i){
     
562. if(i==-1){
     
563. i = parseInt(jQuery(".flash_btn[current=1]").attr("num"));
     
564. }
     
565. 
     
566. jQuery(".flash_btn_current").attr("current","0");
     
567. jQuery(".flash_btn_current").removeClass("flash_btn_current");
     
568. jQuery(".flash_img,.a_img").css("display","none");
     
569. 
     
570. var count = jQuery(".flash_btn").length;
     
571. if(i==count){
     
572. i=1;
     
573. }else{
     
574. i++;
     
575. }
     
576. jQuery(".flash_btn[num="+i+"]").addClass("flash_btn_current");
     
577. jQuery(".flash_btn[num="+i+"]").attr("current","1");
     
578. jQuery(".flash_img").eq(i-1).css({"display":"list-item","opacity":"0"});
     
579. jQuery(".flash_img").eq(i-1).animate({"opacity":"1"},{queue:false},600);
     
580. jQuery(".a_img").eq(i-1).css({"display":"list-item","opacity":"0"});
     
581. jQuery(".a_img").eq(i-1).animate({"opacity":"1"},{queue:false},600);
     
582. }
     
583. </script>
     
584. <div class="un_active">
     
585. 
     
586. <div class="active_item">
     
587. <div class="img"><a href="#" target="_blank"><img src="diy/quanquan/hd_6.jpg"/></a></div>
     
588. <div class="title"><a href="#" target="_blank">【吃了就来秀12】新一期的活动</a></div>
     
589. </div>
     
590. 
     
591. <div class="active_item">
     
592. <div class="img"><a href="#" target="_blank"><img src="diy/quanquan/hd_5.jpg"/></a></div>
     
593. <div class="title"><a href="#" target="_blank">Office零食大作战</a></div>
     
594. </div>
     
595. 
     
596. <div style="clear:both"></div>
     
597. </div>
     
598. </div>
     
599. </div>
     
600. <script type="text/javascript">
     
601. jQuery(".pd_btn span").click(function(){
     
602. if(jQuery(this).attr("class")=='span1'){
     
603. jQuery(this).attr("class","span2");
     
604. jQuery(".un_child .list").animate({marginTop:"0px"},200);
     
605. }else{
     
606. jQuery(this).attr("class","span1");
     
607. jQuery(".un_child .list").animate({marginTop:"-75px"},200);
     
608. }
     
609. });
     
610. </script>
     
611. 
     
612. </div>

复制代码

素材大家可以自己下载

www.xosyy.com
新欧尚社区
来支持哦。相当的不错。。

很不错的说。。

大家一起分享撒
呵呵
www.230722.com

代码放在 板块简介里？

很好啊

很漂亮  但代码好多哦··

呵呵
谢谢支持