精美而实用的网站,关注web编程技术与网站SEO推广,追求极致,让您轻松愉快的学习

本例主要跟大家介绍了:div+css水平文字链接列表,是最简单的水平文字列表实现方式,用于初学者参考学习,主要用到了浮动float属性。

div+css水平文字链接列表运行效果

div+css水平文字链接列表HTML代码

<div class="m-list1">
    <ul class="f-cb">
        <li><a href="#">列表文字</a></li>
        <li><a href="#">文字或链接</a></li>
        <li><a href="#">文字或链接</a></li>
        <li><a href="#">文字</a></li>
    </ul>
</div>
<div class="clear"></div>
<div class="m-list1 m-list1-c1">
    <ul class="f-cb">
        <li><a href="#">文字</a></li>
        <li><a href="#">文字或链接</a></li>
        <li><a href="#">文字或链接</a></li>
        <li><a href="#">文字</a></li>
    </ul>
</div>

div+css水平文字链接列表CSS代码

/* 水平文字链接列表 */
.m-list1{line-height:30px;}
.m-list1 ul{margin-left:-10px;}
.m-list1 ul li{float:left;padding-left:10px;}
.m-list1 a,.m-list1 a:hover{text-decoration:none;color:#333; font-size:14px;}
/* 水平文字链接列表-颜色1 */
.m-list1-c1 a,.m-list1-c1 a:hover{color:#3891eb;}
.clear{ clear:both;}


在线Demo预览

Tags:DIV+CSS HTML CSS
没有了
如果本文帮到了您,请分享到朋友圈或推荐给好友!

网络编程 - 分类栏目