<ul class="tabs">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
</ul>
<div class="tabs-content">
    <ul>
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three">3</li>
        <li id="four">4</li>
        <li id="five">5</li>
    </ul>
</div>

.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content li {
    width:960px;
    height:300px;
}

<div id="scroll-box">
    <!-- Контент -->
</div>

#scroll-box{
    width:300px;
    height:150px;
    overflow:hidden;
    float:left;
}
#scroll-box p{
    width:1000px;
}
a.jScrollArrowLeft{
    height:20px;
}
a.jScrollArrowRight{
    height:20px;
}

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.min.js"></script>

$(function(){
    $('#scroll-box').jScrollHorizontalPane({
        showArrows:true,
        arrowSize:20,
        scrollbarHeight:20,
        scrollbarMargin:0
    });
});

<p>Я люблю <img src="soccer.png" width="16" height="16" alt="Футбол" /></p>

<!--[if IE 6]>
<div id="ie6">
<![endif]-->
    <div id="wrap">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
<!--[if IE 6]>
</div>
<![endif]-->

#wrap { … } /* Общее правило */ 
#ie6 #wrap { … } /* Правило для IE6 */

@media screen and (max-width:1000px) {
    /* Стили при ширине экрана <= 1000px */
}

<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        <!-- Контент -->
    </div>
</div>
 
<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        <!-- Контент -->
    </div>
</div>
 
…

.post {
    padding:10px 20px;
    position:relative;
    background:#eee;
    margin-bottom:20px
}
.inactive {
    color:#bbb
}
.post .title {
    position:relative;
    height:1%
}
.post .title h3 {
    font-size:1.4em
}
.post .title h3 a {
    text-decoration:none;
    color:#000
}
.inactive .title h3 a {
    color:#bbb
}
.post .title p {
    font-size:0.7em;
    font-style:italic;
    font-weight:bold;
    margin:0
}
.post .title span {
    position:absolute;
    right:0;
    top:30%;
    cursor:pointer;
    width:14px;
    height:14px;
    background:url(trigger.gif) no-repeat left bottom;
    display:block;
    font-size:0
}
#content .inactive .title span {
    background-position:left top
}
#content .post .entry {
    padding:10px 0
}

$('.title').append('<span></span>');
$('.post span').each(function() {
   var trigger = $(this), state = false, el = trigger.parent().next('.entry');
   trigger.click(function(){
      state = !state;
      el.slideToggle();
      trigger.parent().parent().toggleClass('inactive');
   });
});

<input type="text" />

input{
   width:200px;
   height:19px;
   padding:8px 10px;
   border:none;
   background:url(images/input-bg.png) no-repeat left top;
   font:1em Arial,Helvetica,sans-serif
}