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="#"><img src="images/wenshu.jpg"/></a><br/>
                <a href="#">文殊菩萨</a>
            </li><!--li块元素,单独占一行-->
            <li><a href="#"><img src="images/puxian.jpg"/></a><br/>
                <a href="#">普贤菩萨</a>
            </li>
            <li><a href="#"><img src="images/guanyin.jpg"/></a><br/>
                <a href="#">观世音菩萨</a>
            </li>
            <li><a href="#"><img src="images/mile.jpg"/></a><br/>
                <a href="#">弥勒菩萨</a>
            </li>
        </ul>
        <!--ul,li是一个整体,要在ul的后面加cleardiv-->
        <div class="clear"></div>
    </div>
</body>
</html>

result:

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

时间: 2024-10-14 21:15:15

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

HTML&amp;CSS基础学习笔记1.13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: <ul> <li></li> <li></li> ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请前往http://www.mayacoder

html基础 无序列表ul li 项目符号的类型 type 小黑点disc 空心圆circle 实心方块sqaure

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

css基础 设置div块的上下左右外填充距离margin(缩写形式)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css基础 设置div块的上下左右的内填充距离padding(缩写形式)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

CSS基础(背景、文本、列表、表格、轮廓)

CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 把图像设置为背景. background-position 设置背景图像的起始位置. background-repeat 设置背景图像是否及如何重复. CSS 文本属性 属性 描述 color 设置文本颜色 directi

css基础-2 div布局

div布局 <html> <head> <title>div布局 </title> <meta charset="utf-8"> <style> .toubu {width:100%;height:100px;background:aqua;} .zhuti {width:80%;height:600px;background:red;float:left;} .left  {width:20%;height:60

css基础 设置div 上下左右边框线的样式

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

【css基础】div父元素根据子元素高度自适应高度

两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为0,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子! 解决这个问题的根源就是清除浮动: 1 , 给父节点增加样式overflow:hidden或者overflow:auto 2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.你可以用div

css基础 display:inline 块级标签-&gt;行内标签 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu