CSS中去除li前面的小黑点 a下划线 和ul LI部分属性方法

对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。

1、在CSS中写入代码。找到相关性的CSS，在。.li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。

2、在相关的页面找到head部分写入下面的代码

<style type="text/css">

list-style:none;

</style>

3、在li,ul内加入list-style。如<ul style="list-style-type:none><li><a herf="/business122">我的博客</a></li>< /ul> 当然这种是很麻烦的了。

最简单的就是第一种了，通过CSS来控制，这个当然会有不错的效果了。

这几种方法都是通过设置list-style:none来设置的，有的是会用list-style-type，下面我们来看一看它的属性.

none不使用项目符号

disc实心圆，默认值

circle空心圆

square实心方块

decimal阿拉伯数字

lower-roman小写罗马数字

upper-roman大写罗马数字

lower-alpha小写英文字母

upper-alpha大写英文字母

这些都可以来代替上文中的none,想要什么样的都会有一个相应的对应。

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%;

}

<a>标签的伪类样式一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符＋样式规则来控制。伪类选择符包括：总: a表示所有状态下的连接 如 a{color:red}① a:link： 未访问链接 ,如 a:link {color:blue}② a:visited： 已访问链接 ,如 a:visited{color:blue}③ a:active： 激活时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue}④ a:hover： 鼠标移到链接上时 ,如 a:hover {color:blue}一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。举例：伪类的常见状态值<style type = “text/css”> <!-- a {font-size:16px} a:link {color: blue; text-decoration:none;} //未访问：蓝色、无下划线 a:active:{color: red; } //激活：红色 a:visited {color:purple;text-decoration:none;} //已访问：紫色、无下划线 a:hover {color: red; text-decoration:underline;} //鼠标移近：红色、下划线 --> </style>如何去掉<a>的下划线：对超链接下划线设置 使用代码"text-decoration"语法：text-decoration : none || underline || blink || overline || line-throughtext-decoration参数：none : 无装饰blink : 闪烁underline : 下划线line-through : 贯穿线overline : 上划线去掉下划线的方法就是将其text-decoration设置为none即可。如：<style>a{text-decoration:none}</style>可以在此基础上发挥:如：<style>.myclass a{text-decoration:none}</style><style>div a{text-decoration:none}</style>可以扩展至<a>标签的伪类：a:link{text-decoration:none; cursor:pointer; color:red;}a:visited{text-decoration:overline; cursor:pointer}a:active{text-decoration:overline; cursor:pointer}a:hover{text-decoration:overline; cursor:pointer}.myclass:hover{text-decoration:overline; cursor:pointer}<a>标签的一些属性<a>标签是成对出现的,以<a>开始, </a>结束属性.Common -- 一般属性accesskey -- 代表一个链接的快捷键访问方式charset -- 指定了链接到的页面所使用的编码方式,比如UTF-8coords -- 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标href -- 代表一个链接源(就是链接到什么地方)hreflang -- 指出了链接到的页面所使用的语言编码rel -- 代表文档与链接到的内容(href所指的内容)的关系rev -- 代表文档与链接到的内容(href所指的内容)的关系shape -- 使用图像地图的时候可以使用shape指定链接区域tabindex -- 代表使用&quot;tab&quot;键,遍历链接的顺序target -- 用来指出哪个窗口或框架应该被此链接打开title -- 代表链接的附加提示信息type -- 代表链接的MIME类型---------------------本文来自 mylitboy 的CSDN 博客 ，全文地址请点击：/mylitboy/article/details/6613518?utm_source=copy

1 块级元素：div , p ,form, ul,li, ol,dl,form, address,fieldset, hr, menu, table

行内元素：span, strong, em,br, img, input, label, select, textarea, cite,

内联元素(inline element)a - 锚点b - 粗体(不推荐)br- 换行em - 强调font - 字体设定(不推荐)i - 斜体img - 图片input - 输入框label - 表格标签select - 项目选择small - 小字体文本span - 常用内联容器，定义文本内区块strike - 中划线strong - 粗体强调sub - 下标sup - 上标textarea - 多行文本输入框tt - 电传文本u - 下划线

内联元素（行内元素）内联元素(inline element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器，定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易，也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。* applet - java applet* button - 按钮* del - 删除文本* iframe - inline frame* ins - 插入的文本* map - 图片区块(map)* object - object对象* script - 客户端脚本

2 区别：

1）块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

2） 块级元素可以设置 width, height属性，行内元素设置width, height无效

【注意：块级元素即使设置了宽度，仍然是独占一行的】

3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）