CSS布局与文字的鼠标选择实例页面

展示

代码

CSS代码：

/* 以下单样式来自zxx.lib.css库 */
.l { float: left; }
.r { float: right; }
.rel { position: relative; }
.abs { position: absolute; }
.tr { text-align: right; }
            
.selected_area {
    width: 500px;
    line-height: 20px;
    margin: 0 auto;
    padding: 0 0 20px;
    list-style-type: none;
    font-size: 12px;
}
.selected_area li {
    padding: 5px;
    background-color: #f0f3f9;
}
.selected_area h4, .selected_area p {
    margin: 0;
    font-size: 1em;
}
            

HTML代码：

<ul class="selected_area">
    <li class="fix">
        <h4 class="l">左边的标题</h4>
        <p class="r">右边的描述文字</p>
    </li>
    <li>
        <h4 class="l">左边的标题</h4>
        <p class="tr">右边的描述文字</p>
    </li>
    <li class="fix">
        <h4 class="abs">左边的标题</h4>
        <p class="r">右边的描述文字</p>
    </li>
    <li>
        <h4 class="abs">左边的标题</h4>
        <p class="tr">右边的描述文字</p>
    </li>
    <li class="rel">
        <h4>左边的标题</h4>
        <p class="abs" style="right:5px; top:5px;">右边的描述文字</p>
    </li>
    <li>
        <p class="r">右边的描述文字</p>
        <h4>左边的标题</h4> 
    </li>
    <li>
        <h4>左边的标题</h4> 
        <p class="tr" style="margin-top:-20px;">右边的描述文字</p>
    </li>
</ul>