美文网首页
HTML浮动(补充)

HTML浮动(补充)

作者: 浮浮子 | 来源:发表于2018-07-21 23:19 被阅读0次

    今日份总结

    2018.7.21

    昨天写了一部分关于浮动的语句,即“使图像浮动于段落左右侧、将有标题的图片居于文本左右侧、将带边框,边界的图像浮动于段落的左右侧、使段落的首字母浮动于段落左侧”

    今天补充一条。(明天写几种常用的清除方法)

    创建水平菜单栏

    ul为无序列表,ol为有序列表。而创建水平菜单栏时为了不显示序号就是用ul。而如果想显示序号就用ol。我们把 ul元素和li元素浮向左浮动(用昨天的方法2,float)。li 元素显示为行内元素(元素前后没有换行)。这样就可以使列表排列成一行。ul 元素的宽度是 100%,还加了颜色和边框。将块级元素li转换为行级元素。

    ul

    {

    float:left;

    width:100%;

    padding:0;

    margin:0;

    list-style-type:none;

    }

    li{

    float:left;

    color:white;

    background-color:purple;

    padding:0.2em 0.6em;

    border-right:1px solid white;

    }

    li {display:inline}

    例题举例为

    图片中"<a href="#">"的意思是链接到本页,你不需要它跳转,但是又需要这个形式时,需要用这条语句。

    相关文章

      网友评论

          本文标题:HTML浮动(补充)

          本文链接:https://www.haomeiwen.com/subject/rjxkmftx.html