首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

CSS Beauty 风格的两列新闻显示样式

作者: CSS Beauty     来源: cssBeauty.com     时间: 2006-08-17 12:58:54
摘要: 本文向您推荐的是 CSS Beauty 风格的两列新闻显示样式, 新闻是一般网站必不可少的功能, 而新闻列表的表现方式也是多姿多彩的, 本文介绍的是按两列显示的新闻列表方案, 同时还有一个 TAB 浏览的 Javascript 技巧和 FORM 元素的样式设计.
归类: Javascript, (X)HTML/CSS,

关键词: 表单, FORM, Javascript, 标签页, TAB, 新闻列表,

本文向您推荐的是 CSS Beauty 风格的两列新闻显示样式, 新闻是一般网站必不可少的功能, 而新闻列表的表现方式也是多姿多彩的, 本文介绍的是按两列显示的新闻列表方案, 同时还有一个 TAB 浏览的 Javascript 技巧和 FORM 元素的样式设计.

------------------------------------------------
点此查看示例文件
------------------------------------------------


CSS 部分:
CSS:
  1.  
  2. <style type="text/css"> 
  3. <!-- 
  4. body, td, div, p, span, textarea, select { 
  5.     font-size: 12px; font-family: verdana, arial, helvetica, sans-serif 
  6. } 
  7. a { 
  8.     color: #DCB20C; text-decoration: none; font-size: 12px; 
  9. } 
  10. a:hover { 
  11.     color: #CC9933; text-decoration: underline; font-size: 12px; 
  12. } 
  13.  
  14. /* ClearFix */ 
  15. .clearfix:after { 
  16.     content: ".";  
  17.     display: block;  
  18.     height: 0;  
  19.     clear: both;  
  20.     visibility: hidden; 
  21. } 
  22. .clearfix {display: inline-table;} 
  23.  
  24. /* Hides from IE-mac \*/ 
  25. .clearfix {height: 1%;} 
  26. .clearfix {display: block;} 
  27. /* End hide from IE-mac */ 
  28.  
  29.  
  30. /* 公用 FORM 样式 */ 
  31. input, textarea{ 
  32.     background: #fff; 
  33.     border: 1px solid #83cde1; 
  34.     border-top: 3px solid #83cde1; 
  35. } 
  36. input:hover, textarea:hover { 
  37.     background: #F0FDE2; 
  38.     border-top: 3px solid #b1e77a 
  39. } 
  40. input:focus, textarea:focus { 
  41.     background: #FCFFEC; 
  42.     border-top: 3px solid #b1e77a 
  43. } 
  44. .submit { border: 0; width: auto; } 
  45. .submit:hover, .submit:active { border:0; } 
  46. .radio { background: none; border: 0; } 
  47.  
  48.  
  49. #news { 
  50.     margin:0; 
  51.     padding:0 15px 5px 10px; 
  52.     border-bottom: 1px dotted #BBE0EB; 
  53. } 
  54.  
  55. /* TAB样式 开始 */ 
  56. #news ul.domtabs { 
  57.     list-style: none; 
  58.     font-size: 0.9em; 
  59.     border-bottom: 1px dotted #BBDFED; 
  60.     margin: 0 0 20px 0; 
  61.     padding: 0 30px 2px 0; 
  62.     text-align: right; 
  63. } 
  64. #news ul.domtabs li { 
  65.     display: inline; 
  66.     margin: 0; 
  67. } 
  68. #news ul.domtabs a:link, 
  69. #news ul.domtabs a:visited, 
  70. #news ul.domtabs a:active, 
  71. #news ul.domtabs a:hover { 
  72.     text-decoration: none; 
  73.     padding: 2px 5px 4px 5px; 
  74.     position: relative; 
  75.     bottom: 0; 
  76.     color: #89C7D9; 
  77. } 
  78. #news ul.domtabs li.active a:link, 
  79. #news ul.domtabs li.active a:visited, 
  80. #news ul.domtabs li.active a:active, 
  81. #news ul.domtabs li.active a:hover { 
  82.     background:#fff; 
  83.     padding: 2px 10px 4px 10px; 
  84.     border: 1px dotted #BBDFED; 
  85.     border-bottom: 1px solid #fff; 
  86.     position: relative; 
  87.     bottom: 0; 
  88.     color: #418FA5; 
  89. } 
  90. #news ul.domtabs a:hover { 
  91.     text-decoration: underline; 
  92. } 
  93. #news ul.domtabs li.active a:hover { 
  94.     text-decoration: none; 
  95. } 
  96.  
  97.  
  98. /* 新闻列表样式 开始 */ 
  99. #newswrap { 
  100.     margin:0; 
  101. } 
  102. #news-left, #news-right { 
  103.     float: right; 
  104.     width: 48%; 
  105.     max-width: 330px; 
  106. } 
  107. #news .more { 
  108.     clear: both; 
  109.     margin:0; 
  110.     padding: 0 15px 0 0; 
  111.     font-size: 0.85em; 
  112.     text-align: right; 
  113.     line-height: 1em; 
  114. } 
  115. #news .more img { 
  116.     vertical-align: bottom; 
  117.     border: 0; 
  118.     margin: 0 0 0 5px; 
  119. } 
  120. #news-right p, #news-left p { 
  121.     font-size: 0.85em; 
  122.     padding: 0 5px 0 0; 
  123.     margin: 0 0 0 12px; 
  124.     color: #4896AC; 
  125. } 
  126. #news-right p a, #news-left p a { 
  127.     font-weight: bold; 
  128.     display:block; 
  129. } 
  130. #news-right p a.continue, #news-left p a.continue { 
  131.     font-weight: normal; 
  132. } 
  133. #news p.author { 
  134.     color: #83cde1; 
  135.     border: 0; 
  136.     padding: 0 0 5px 0; 
  137.     margin: 0 10px 10px 12px; 
  138.     border-bottom: 1px dotted #BBE0EB; 
  139. } 
  140. #news p.author a { 
  141.     color: #86d734; 
  142.     font-weight: normal; 
  143.     display:inline; 
  144.     font-size: 0.85em; 
  145. } 
  146. #news p.author a:hover { 
  147.     text-decoration: underline; 
  148. } 
  149. #news p.author:hover { 
  150.     background: none; 
  151. } 
  152.  
  153.  
  154. /* FORM 表单样式 开始 */ 
  155. #news #form { 
  156.     display: none; 
  157. } 
  158. #news form { 
  159.     float: right; 
  160.     margin: 0; 
  161.     padding: 0; 
  162.     background: #fff; 
  163.     font-size: 0.9em; 
  164.     width: 85%; 
  165. } 
  166. #news form p { 
  167.     padding: 0 0 0 20px; 
  168.     float: left; 
  169.     margin: 0; 
  170.     width: 180px; 
  171.     color: #4896AC; 
  172. } 
  173. #news form p.note { 
  174.     margin: 0 0 20px 0; 
  175. } 
  176. #news fieldset { 
  177.     border: 0; 
  178. } 
  179. #news legend { 
  180.     display: none; 
  181. } 
  182. #news label { 
  183.     display: block; 
  184. } 
  185. #news input { 
  186.     margin: 0 0 10px 0; 
  187.     display: block; 
  188.     width: 150px; 
  189. } 
  190. #news textarea { 
  191.     margin: 0; 
  192.     width: 150px; 
  193.     height: 100px; 
  194. } 
  195. #news .submit { 
  196.     width: auto; 
  197.     border: 0; 
  198. } 
  199.  
  200. --> 
  201. </style> 
  202.  



HTML 部分:
HTML:
  1.  
  2. <div id="news" class="domtab clearfix"> 
  3.  
  4.     <ul class="domtabs"> 
  5.         <li class="active"><a href="#news-right">Current News</a></li> 
  6.         <li><a href="#submit-news">Submit News</a></li> 
  7.     </ul> 
  8.  
  9.     <div style="display: block;" id="newswrap">     
  10.      
  11.         <div id="news-right"> 
  12.              
  13.             <p><a href="http://www.sitepoint.com/article/accessibility-techniques">Advanced Accessibility Techniques.</a> Techniques you can implement to achieve advanced accessibility beyond the W3C guidelines.</p> 
  14.             <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 07 at 07:24 AM</p> 
  15.                          
  16.             <p><a href="http://www.brothercake.com/site/resources/reference/3d/">Dynamic 3D with CSS and the DOM.</a>Underground - A 3D dungeon environment built using Tantek's technique of creating shapes out of the interaction of CSS borders.</p> 
  17.             <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 04 at 08:38 AM</p> 
  18.                          
  19.             <p><a href="http://www.brothercake.com/site/resources/scripts/dbx/">Docking boxes (dbx).</a> Adds animated drag 'n' drop, snap-to-grid, and show/hide-contents functionality to any group of elements.</p> 
  20.             <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 03 at 11:22 AM</p> 
  21.                          
  22.             <p><a href="http://www.useit.com/alertbox/screen_resolution.html">Screen Resolution and Page Layout.</a> Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.</p> 
  23.             <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:50 AM</p> 
  24.                          
  25.             <p><a href="http://accessites.org/gbcms_xml/news_page.php?id=19">Visual Vs. Structural.</a> Does the choice of approach — visual vs structural — have any impact on the accessibility or usability of a site?</p> 
  26.             <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:47 AM</p> 
  27.              
  28.         </div> 
  29.  
  30.         <div id="news-left"> 
  31.              
  32.             <p><a href="http://www.456bereastreet.com/archive/200608/google_valid_and_strict/">Google valid and strict.</a>Roger Johansson debunks the myth that Google has deprecated code tosave on bandwidth. He speculates why they still use old markup.</p> 
  33.             <p class="author">Posted by <a href="http://sonspring.com/">Nathan Smith</a> on Aug 15 at 01:37 AM</p> 
  34.                          
  35.             <p><a href="http://techfoolery.com/archives/2006/08/11/2021/">Animated Page Scroller</a>. An elegant JavaScript solution for page navigation</p> 
  36.             <p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:43 AM</p> 
  37.                          
  38.             <p><a href="http://www.aptana.com/" title="JavaScript Love Maker">Aptana Web IDE</a>. A robust, JavaScript-focused IDE for building dynamic web applications.</p> 
  39.             <p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:28 AM</p> 
  40.                          
  41.             <p><a href="http://www.flickrshow.com/">Flickrshow.</a> Provides you with the simplest way of displaying your Flickr photosets on your own website with the use of some javascript.</p> 
  42.             <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 10 at 11:06 AM</p> 
  43.                          
  44.             <p><a href="http://jquery.com/demo/thickbox/">ThickBox 2.0.</a> Version 2 of the JQuery based photo slideshow script, new features include iFrame support, multi-picture slideshows and more.</p> 
  45.             <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 09 at 09:31 AM</p> 
  46.              
  47.         </div> 
  48.  
  49.         <p class="more"><a href="http://www.cssbeauty.com/news/">News Archive</a> <a href="http://www.cssbeauty.com/rss/news/"><img src="rss.gif" alt="RSS Feed" /></a></p> 
  50.  
  51.     </div> 
  52.  
  53.     <div id="form"> 
  54.         <form action="/news/submit/snews.php" method="post" id="submit-news"> 
  55.             <fieldset> 
  56.                 <legend>Submit News</legend> 
  57.  
  58.                 <p> 
  59.                 <label for="title">Title:</label> 
  60.  
  61.                 <input type="text" tabindex="1" name="n-title" id="title" /> 
  62.  
  63.                 <label for="url">News URL:</label> 
  64.                 <input type="text" tabindex="2" name="n-url" id="url" /> 
  65.  
  66.                 <label for="description">News Description:</label> 
  67.                 <textarea tabindex="3" name="n-description" id="description" rows="5" cols="15"></textarea> 
  68.                 <small>Max 120 characters</small> 
  69.  
  70.                 </p> 
  71.  
  72.                 <p class="note"><strong>Note:</strong> Your submission will be placed on queue pending review, if accepted your news item will show up in the next few hours.</p> 
  73.                      
  74.                 <p> 
  75.                 <label for="name">Your Name:</label> 
  76.                 <input type="text" tabindex="4" name="s-name" id="name" /> 
  77.  
  78.                 <label for="email">Your email:</label> 
  79.  
  80.                 <input type="text" tabindex="5" name="s-email" id="email" /> 
  81.  
  82.                 <label for="yurl">Your Website:</label> 
  83.                 <input type="text" tabindex="6" name="s-url" id="yurl" /> 
  84.                      
  85.                 <input class="submit" type="image" src="submit.gif" alt="submit" tabindex="7" /> 
  86.                 </p> 
  87.             </fieldset> 
  88.         </form> 
  89.     </div> 
  90.  
  91. </div> 
  92.  




本文只是摘录原网站的部分代码, 目的是整理其实现技巧, 如果您有其他目的或用途, 请联系原网站.




相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)