HTML中的ul标签
UL格式:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ul是无序列表,每一个li前面有个点。如果想要去掉无序列表的“.”,添加list-style-type=none属性,防止list-style的其他属性失效。eg.list-style-image。
OL格式:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
ol是有序列表,序列号类型由type属性控制,type属性值分别为:1、a、A、I、i。序列号的开始值由属性start控制,start属性值为type所属类型值的范围值。
问题描述:
在使用ul制作下拉菜单时,要给菜单栏(即ul)加上背景色,发现background-color没起作用。查看ul元素盒子大小,发现盒子高度为0。
解决方案: 由于ul没有直接制定高度,其高度根据里面的li来伸缩。由于li设置了向左浮动,因此得清除浮动才能显示背景色。
1. 清除浮动可以给ul添加一个overflow:hidden的样式。
2. 或者在</ul>前面加入一个清除浮动的div,即
<div style="clear: both;"></div>
CSS:
ul{
list-style: none;
background-color: gray;
}
ul li{
float: left;
padding: 0 5px;
border-left: solid 1px black;
}
HTML:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML中的ul标签的更多相关文章
- 用正则表达式抓取网页中的ul 和 li标签中最终的值!
获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...
- 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- JQuery中两个ul标签的li互相移动实现方法
这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery ...
- JQuery中两个ul标签的li互相移动
实例 <html > <head> <meta http-equiv="Content-Type" content="text/html; ...
- HTML之body标签中的相关标签
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...
- 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面
script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...
- HTML中body相关标签-02
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- html5中的容器标签和文本标签
html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...
- HTML_body中常用的标签部分
meta: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...
随机推荐
- eclipse中怎么导入git库下载下来的web项目
总的看来是有两种方式: 方式一:可以对已经从版本库下载到本地的项目操作(Maven导入) 你可以通过公司提供的内部的版本库的网址登录版本库,之后在里面下载自己想要的那个版本的代码包,见下图 点击右侧的 ...
- ILM --interface logic model
1.描述接口逻辑的模型. 2.包括 netlist spef sdc def 3.所有以上文件只描述和接口相关的逻辑,其他逻辑一概排除 3.用于STA/PR/DC的hierachical flow, ...
- mongodb的一些操作
插入: db.inventory.insert( { _id: 10, type: "misc", item: "card", qty: 15 } ) db.i ...
- css颜色+透明度的写法
今天在学习页面的时候,看到视频里用到颜色的十六进制表达式直接设置透明度,但是后来在实践过程中发现是有误的,特此记录一下,也算是学习了一个新知识. RGBA表示式 比如我们设置rgba(0, 0, 0, ...
- Windows Server 2016安装.NET Framework 3.5
1.打开“服务器管理器” 2.点击“添加角色和功能” 3.点击“下一步” 4.点击“下一步” 5.点击“下一步” 6.点击“下一步” 7.勾选“.NET Framework 3.5功能”,点击“下一步 ...
- 排序算法之归并排序的python实现
采用分治法: 分割:递归地把当前序列平均分割成两半. 集成:在保持元素顺序的同时将上一步得到的子序列集成到一起(归并). 归并操作(归并算法),指的是将两个已经排序的序列合并成一个序列的操作.归并排序 ...
- 微信支付之H5支付
HoJe男孩子你要加油阿 前言准备材料H5支付请求的参数返回结果统一下单回调接口用到的工具类886 . 前言 大家好,分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于 ...
- ES6-三点运算符
首先理解一下函数总的arguments变量,这个变量是函数内部自动生成的,他用来保存传入函数的实参,是一个伪数组. 例: function fun(a,b){ console.log(argument ...
- Laravel Vuejs 实战:开发知乎 (7)验证问题表单字段
上一节代码中已经实现 下面代码中的validate内部配置就是: public function store(Request $request) { // $data = $request->v ...
- Genetic Algorithm 资源
算法源码: NeuralGenetic : https://github.com/ahmedfgad/NeuralGenetic evolving-simple-organisms : https:/ ...