首页 > 代码库 > css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both

css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both

 镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*全局设置*/
        body,ul,li,a,img{
            margin:0px;
            padding:0px;
        }
        ul,li{
            list-style:none;
        }
        a:link,a:visited{
            color:blue;
            text-decoration:none;
        }
        a:hover{
            color:red;
        }
        body{
            font-size:12px;
            font-family:FangSong;
            background-color:#808080;
        }
        /*老师介绍模块*/
        .teacherIntroduction{
            width:420px;
            margin:10px auto;
            background-color:white;
            padding-top:9px;
            padding-left:7px;
            padding-bottom:5px;
        }/*这些数字的设定,真的需要反复的考虑,就是寻找美,在1px中!*/
        .teacherIntroduction img{
            width:196px;
            height:140px;
            padding:5px;
            border:none;/*去除边框,在火狐下没有边框,但是在IE下却有边框*/
        }
        .teacherIntroduction li{
            float:left;
            text-align:center;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="teacherIntroduction">
        <ul>
            <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/wenshu.jpg"/></a><br/>
                <a href="http://www.mamicode.com/#">文殊菩萨</a>
            </li><!--li块元素,单独占一行-->
            <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/puxian.jpg"/></a><br/>
                <a href="http://www.mamicode.com/#">普贤菩萨</a>
            </li>
            <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/guanyin.jpg"/></a><br/>
                <a href="http://www.mamicode.com/#">观世音菩萨</a>
            </li>
            <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/mile.jpg"/></a><br/>
                <a href="http://www.mamicode.com/#">弥勒菩萨</a>
            </li>
        </ul>
        <!--ul,li是一个整体,要在ul的后面加cleardiv-->
        <div class="clear"></div>
    </div>
</body>
</html>

 



result:

技术分享

 



——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。我跟着传智播客的视频教程学习。
我是一个新手,所以如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。

css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both