常用HTML代码模块

导航条

.nav { border-bottom:3px solid #003b68; height:37px;}
.nav ul li { width:93px; float:left; text-align:center; margin-left:1px;}
.nav ul li a{ color:#FFFFFF; display:block; background:url(dh2.jpg) no-repeat; height:37px; line-height:37px;}
.nav ul li a:hover{background:url(dh2.jpg) no-repeat left -40px;}
.nav ul li.index{ width:60px; margin:0}
.nav ul li.index { background-image:url(dh1.jpg);}

        <div class="nav">
            <ul>
                <li class="index"><a href="">首页</a></li>
                <li><a href="">商城首页</a></li>
                <li><a href="">商城首页</a></li>
                <li><a href="">商城首页</a></li>
                <li><a href="">商城首页</a></li>
                <li><a href="">商城首页</a></li>
                <li><a href="">商城首页</a></li>
                <li><a href="">商城首页</a></li>
            </ul>
        </div>

文字列表

.list-txt { padding:10px;}
.list-txt li { height:25px; line-height:25px; border-bottom:1px dotted #eee;}
.list-txt li span { float:right;}

            <ul class="list-txt">
                <li><a href="">水电费胜多负少地方水电费</a></li>
                <li><a href="">法国恢复和风格化覆盖和风格化风格化</a></li>
                <li><a href="">胜多负少发生的水电费水电费</a></li>
                <li><a href="">风格化风格化风格化风格化</a></li>
                <li><a href="">而儿童而二哥二哥</a></li>
            </ul>

 

图片+文字

.img-txt { padding:10px;}
.img-txt li {border-bottom:1px dotted #c9c9c9; padding:10px 0; clear:both; height:1%; overflow:hidden}
.img-txt li span{ display:block; width:70px; height:50px; float:left; margin-right:10px;}

        <ul class="img-txt">
                        <li>
                            <span><img src="images/p1.jpg" alt=""/></span>
                            <p><a href="">龙井啊</a><strong>￥302</strong></p>
                        </li>
                        <li>
                            <span><img src="images/p1.jpg" alt=""/></span>
                            <p><a href="">龙井啊</a><strong>￥302</strong></p>
                        </li>
                        <li>
                            <span><img src="images/p1.jpg" alt=""/></span>
                            <p><a href="">龙井啊</a><strong>￥302</strong></p>
                        </li>
            </ul>