关于css中使用ul li的一些体会
参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40
如何修改ul li的显示
--------------------------------
css对应的定义:
ul{ margin-left: 15px;margin-bottom: 0px; } li{ list-style-type:disc; }
----------------
参考资料:
list-style-type的常用用法
语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
取值: disc : CSS1 默认值。实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字 lower-roman : CSS1 小写罗马数字 upper-roman : CSS1 大写罗马数字 lower-alpha : CSS1 小写英文字母 upper-alpha : CSS1 大写英文字母 none : CSS1 不使用项目符号
-------------------
LI代码的格式化:
A).运用CSS格式化列表符:
ul li{ list-style-type:none; }
B).如果你想将列表符换成图像,则:
ul li{ list-style-type:none; list-style-image: url(images/icon.gif); }
C).为了左对齐,可以用如下代码:
ul{ list-style-type:none; margin:0px; }
D).如果想给列表加背景色,可以用如下代码:
ul{ list-style-type: none; margin:0px; } ul li{ background:#CCC; }
E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:
ul{ list-style-type: none; margin:0px; } ul li a{ display:block; width: 100%; background:#ccc; } ul li a:hover{ background:#999; }
说明:display:block;这一行必须要加的,这样才能块状显示!
F).LI中的元素水平排列,关键FLOAT:LEFT:
ul{ list-style-type:none; width:100%; } ul li{ width:80px; float:left; }
关于css中使用ul li的一些体会的更多相关文章
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- CSS中的ul与li样式详解 list-type
转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
- css中实现ul两端的li对齐外面边缘
其实就是设置ul的宽度大一些就好
- jquery中对于ul>li列表分页。学习记录
这个是很简单的一种分页,只能对列表进行分页.为了开发有可能需要用到记录下来 Html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- html中去除ul,li标签的样式列表标签的点?
- css控制UL LI 的样式详解
用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...
- css控制UL LI 的样式详解(推荐)
代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...
随机推荐
- Android反编译APK
http://blog.csdn.net/vipzjyno1/article/details/21039349/ 关于被加壳工具添加我的apk如何脱壳 http://www.blogfshare.co ...
- 1分钟快速生成用于网页内容提取的xslt
1,项目背景 在<Python即时网络爬虫项目说明>一文我们说过要做一个通用的网络爬虫,而且能节省程序员大半的时间,而焦点问题就是提取器使用的抓取规则需要快速生成.在python使 ...
- Razor学习(二)@Html标签
原文链接:http://blog.csdn.net/pasic/article/details/7093802 只是因为原文作者说的东西,还有很多作为基础知识的东西,我都没有掌握,所以总结在这里,蓝字 ...
- MVC4 Win2008 aspnet_isapi配置问题
win2008下配置共2步 1.先确保你的应该程序池选择了asp.net 4.0框架 2.添加脚本映射(解决URL不能重写) 3.添加通配符脚本映射(解决图片不能显示) IIS中的Web应用程序有两种 ...
- Nginx学习之二-配置项解析及编程实现
在开发功能灵活的Nginx模块时,需要从配置文件中获取特定的信息.不过,我们并不需要再编写一套读取配置的系统,Nginx已经为用户提供了强大的配置项解析机制,同时还支持“-s reload”命令,可以 ...
- SD卡在单片机上的应用
(1)SD卡的引脚定义: SD卡SPI模式下与单片机的连接图: 注意:SPI模式时,这些信号需要在主机端用10~100K欧的电阻上拉. SD卡支持两种总线方式:SD方式与SPI方式. ...
- 原生应用native、Web应用、混合应用hybrid:3者的优缺点解析
最近原生应用.Web应用.混合应用的名字让我们听得比较熟悉了,现在我们就通过评析各种应用的优缺点来更进一步看看这三者的区别. 一. 原生应用: 你使用过微软PowerPoint 或者 Word吧?这些 ...
- unity3D 锁屏再开程序崩溃
在Uniyt3d 调用Android Plugin 的时候,会出现锁屏后再开,程序就崩溃的的现象,解决办法就是在 AndroidManifest.xml 加入 android:configChang ...
- poj 1458 Common Subsequence_最长公共子串
题意:略 求最长公共子串 #include<iostream> #include<cstdio> #include<string> using namespace ...
- Ubuntu 14.04 安装桌面
1.Ctrl+alt+T启动终端或者Ctrl+alt+F1登录字符界面,执行以下命令重新安装Ubuntu unity(Ubuntu基本桌面): sudo apt-get install ubuntu- ...