HTML浮动(补充)

今日份总结

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="#">"的意思是链接到本页,你不需要它跳转,但是又需要这个形式时,需要用这条语句。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,844评论 1 45
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,102评论 0 1
  • 爱乐之城被誉为一部极为难得的好片子,国内终于在昨天“2.14”情人节上映了。 你的梦想是什么?我会永远爱你。 凭着...
    哲儿疯king阅读 928评论 0 0
  • 一 黑莓开白花 夏去秋来结果果,你摘我采笑哈哈。 二 草坪放风筝 野花开路狗追着,彩色风筝过草坡。 稚子欢呼忙放线...
    珠江潮平阅读 1,712评论 43 59