本文向您推荐的是 CSS Beauty 风格的两列新闻显示样式, 新闻是一般网站必不可少的功能, 而新闻列表的表现方式也是多姿多彩的, 本文介绍的是按两列显示的新闻列表方案, 同时还有一个 TAB 浏览的 Javascript 技巧和 FORM 元素的样式设计.
CSS 部分:
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
}
a {
color: #DCB20C; text-decoration: none; font-size: 12px;
}
a:hover {
color: #CC9933; text-decoration: underline; font-size: 12px;
}
/* ClearFix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* 公用 FORM 样式 */
input, textarea{
background: #fff;
border: 1px solid #83cde1;
border-top: 3px solid #83cde1;
}
input:hover, textarea:hover {
background: #F0FDE2;
border-top: 3px solid #b1e77a
}
input:focus, textarea:focus {
background: #FCFFEC;
border-top: 3px solid #b1e77a
}
.submit { border: 0; width: auto; }
.submit:hover, .submit:active { border:0; }
.radio { background: none; border: 0; }
#news {
margin:0;
padding:0 15px 5px 10px;
border-bottom: 1px dotted #BBE0EB;
}
/* TAB样式 开始 */
#news ul.domtabs {
list-style: none;
font-size: 0.9em;
border-bottom: 1px dotted #BBDFED;
margin: 0 0 20px 0;
padding: 0 30px 2px 0;
text-align: right;
}
#news ul.domtabs li {
display: inline;
margin: 0;
}
#news ul.domtabs a:link,
#news ul.domtabs a:visited,
#news ul.domtabs a:active,
#news ul.domtabs a:hover {
text-decoration: none;
padding: 2px 5px 4px 5px;
position: relative;
bottom: 0;
color: #89C7D9;
}
#news ul.domtabs li.active a:link,
#news ul.domtabs li.active a:visited,
#news ul.domtabs li.active a:active,
#news ul.domtabs li.active a:hover {
background:#fff;
padding: 2px 10px 4px 10px;
border: 1px dotted #BBDFED;
border-bottom: 1px solid #fff;
position: relative;
bottom: 0;
color: #418FA5;
}
#news ul.domtabs a:hover {
text-decoration: underline;
}
#news ul.domtabs li.active a:hover {
text-decoration: none;
}
/* 新闻列表样式 开始 */
#newswrap {
margin:0;
}
#news-left, #news-right {
float: right;
width: 48%;
max-width: 330px;
}
#news .more {
clear: both;
margin:0;
padding: 0 15px 0 0;
font-size: 0.85em;
text-align: right;
line-height: 1em;
}
#news .more img {
vertical-align: bottom;
border: 0;
margin: 0 0 0 5px;
}
#news-right p, #news-left p {
font-size: 0.85em;
padding: 0 5px 0 0;
margin: 0 0 0 12px;
color: #4896AC;
}
#news-right p a, #news-left p a {
font-weight: bold;
display:block;
}
#news-right p a.continue, #news-left p a.continue {
font-weight: normal;
}
#news p.author {
color: #83cde1;
border: 0;
padding: 0 0 5px 0;
margin: 0 10px 10px 12px;
border-bottom: 1px dotted #BBE0EB;
}
#news p.author a {
color: #86d734;
font-weight: normal;
display:inline;
font-size: 0.85em;
}
#news p.author a:hover {
text-decoration: underline;
}
#news p.author:hover {
background: none;
}
/* FORM 表单样式 开始 */
#news #form {
display: none;
}
#news form {
float: right;
margin: 0;
padding: 0;
background: #fff;
font-size: 0.9em;
width: 85%;
}
#news form p {
padding: 0 0 0 20px;
float: left;
margin: 0;
width: 180px;
color: #4896AC;
}
#news form p.note {
margin: 0 0 20px 0;
}
#news fieldset {
border: 0;
}
#news legend {
display: none;
}
#news label {
display: block;
}
#news input {
margin: 0 0 10px 0;
display: block;
width: 150px;
}
#news textarea {
margin: 0;
width: 150px;
height: 100px;
}
#news .submit {
width: auto;
border: 0;
}
-->
</style>
HTML 部分:
<div id="news" class="domtab clearfix"> <ul class="domtabs"> <li class="active"><a href="#news-right">Current News</a></li> <li><a href="#submit-news">Submit News</a></li> </ul> <div style="display: block;" id="newswrap"> <div id="news-right"> <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> <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 07 at 07:24 AM</p> <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> <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 04 at 08:38 AM</p> <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> <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 03 at 11:22 AM</p> <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> <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:50 AM</p> <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> <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:47 AM</p> </div> <div id="news-left"> <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> <p class="author">Posted by <a href="http://sonspring.com/">Nathan Smith</a> on Aug 15 at 01:37 AM</p> <p><a href="http://techfoolery.com/archives/2006/08/11/2021/">Animated Page Scroller</a>. An elegant JavaScript solution for page navigation</p> <p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:43 AM</p> <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> <p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:28 AM</p> <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> <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 10 at 11:06 AM</p> <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> <p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 09 at 09:31 AM</p> </div> <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> </div> <div id="form"> <form action="/news/submit/snews.php" method="post" id="submit-news"> <fieldset> <legend>Submit News</legend> <p> <label for="title">Title:</label> <input type="text" tabindex="1" name="n-title" id="title" /> <label for="url">News URL:</label> <input type="text" tabindex="2" name="n-url" id="url" /> <label for="description">News Description:</label> <textarea tabindex="3" name="n-description" id="description" rows="5" cols="15"></textarea> <small>Max 120 characters</small> </p> <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> <p> <label for="name">Your Name:</label> <input type="text" tabindex="4" name="s-name" id="name" /> <label for="email">Your email:</label> <input type="text" tabindex="5" name="s-email" id="email" /> <label for="yurl">Your Website:</label> <input type="text" tabindex="6" name="s-url" id="yurl" /> <input class="submit" type="image" src="submit.gif" alt="submit" tabindex="7" /> </p> </fieldset> </form> </div> </div>
本文只是摘录原网站的部分代码, 目的是整理其实现技巧, 如果您有其他目的或用途, 请联系原网站.
