UL/OL与LI 标签结合CSS的运用
list-style-type:none;
}
B).如果你想将列表符换成图像，则：
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).为了左对齐，可以用如下代码：
list-style-type:none;
margin:0px;
}
D).如果想给列表加背景色，可以用如下代码：
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
E).如果想给列表加MOUSEOVER背景变色效果，可以用如下代码：
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }
F).LI中的元素水平排列,关键FLOAT:LEFT：
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<html>
<head>
<style><!--
#table {clear:none;width:300px;border-top:1px #000 solid;}
#table ul {clear:left;margin:0px;padding:0px;width:301px;list-style-type:none;border-bottom:1px #000 solid;border-left:1px #000 solid;}
#table li {float:left;display:block;margin:0px;padding:0px;border-right:1px #000 solid;width:60px;}
--></style>
</head>
<body>
<div id="table">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
<ul> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>DEF</li></ul><ul> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>456</li></ul><ul> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> <li>def</li></ul><ul> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>DEF</li></ul><ul> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>456</li></ul><ul> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> <li>def</li>
</ul>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/ayajenson/articles/1305332.html
UL/OL与LI 标签结合CSS的运用相关推荐
- css里面li标签怎么加图片_css 点击ul切换其中li标签内的图片
如下图所示,在ul内有两个li标签,一个放图片一个显示文字.现在我希望当鼠标移动到图片上时,图片切换,并且字体颜色改变,点击后任然是这右边的样式. 总之,就是点击后切换样式,当点击其他位置时变成原来的 ...
- HTML知识点总结之ul，ol，li标签
HTML列表分为有序列表,无序列表和描述列表.我们常用的是有序列表(ol)与无序列表(ul). 有序列表 <ol>标签就可以定义一个有序列表,之所以称其为有序列表,是因为可以使列表具有排序 ...
- #4 CSS表格＜table＞-表单＜form＞-列表＜ul/ol/dl＞标签的使用
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8&qu ...
- html中ol和li,HTML ol和li标签
定义与用法 The tag defines the start of an ordered list. 标签可定义有序列表的起始 在HTML和XHTML中的区别 The "compact&q ...
- 鼠标悬停在li标签上时显示一个弹框_HTML标签——列表标签
列表使用场景: 内容相关.结构相似.样式相近的内容,根据内容的不同分为:无序列表.有序列表.定义列表 无序列表:两个标签<ul>和<li>,是嵌套关系,快捷键ul>li ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
- CSS样式 ul li 标签的坑
CSS样式中 ul li 标签设置出现下列问题以及解决方法,为了自己方便,谁若是不小心点击来了,见谅 1.上面这个原因是li标签内的图片设置宽度,有可能出现的BUG,解决方案很简单 将图片设置的宽 ...
- HTML上的ul li标签消除,去掉ul li 前面的点与空白（div+css）
如果直接在网页用 ul li 标签,默认情况下有一个小黑点,并且每个li前面还有一段空白,尤其是li中包括图片的情况.为什么会出现这种情况?ul li 是 html 中的列表标签,所以默认每个li前面 ...
- css去掉 ul li标签的前的点
开发中ul li标签前默认存在一个小点,去掉默认点使用list-style-type: none;即可 list-style-type: none;
最新文章
- ux设计_从UX设计人员的角度来看Microsoft Build 2018
- java集合总结_Java中集合总结
- Swift如何使用Masonry和SnapKit
- 配置cisco路由器特定时间重启
- windows2012下一端口多网站 Apache配置
- 计算机英语基础课程论文,计算机专业英语课程教学论文
- 阿里云mariadb无法启动问题
- 3种常见的Class级别的错误
- 自己动手实现一个html2canvas
- Became Jane(成为简.奥斯丁)
- [20171107]dbms_shared_pool.pin.txt
- 如何使用泛型在新的可空上下文中启动健壮的C#项目？
- .htaccess更改目录下的默认主页
- RobotLegs框架解析
- CSS中伪类选择器及伪元素
- AXure RP8 破解码
- 计算机保护插件无法安装,电脑无法安装ActiveX控件怎么办
- jenkins下载及安装
- 佳能EOS 500D、尼康D5000、宾得Kx PK 纠结！
- Winform常用控件的使用（一）