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

清疚 2024-02-18 23:54 46阅读 0赞

对于很多人用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="http://blog.csdn.net/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”> 
     
    </style>
    
    
    如何去掉<a>的下划线：
    
    
    
    对超链接下划线设置 使用代码"text-decoration"
    语法： 
    text-decoration : none || underline || blink || overline || line-through 
    
    text-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-8
    coords -- 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标
    href -- 代表一个链接源(就是链接到什么地方)
    hreflang -- 指出了链接到的页面所使用的语言编码
    rel -- 代表文档与链接到的内容(href所指的内容)的关系
    rev -- 代表文档与链接到的内容(href所指的内容)的关系
    shape -- 使用图像地图的时候可以使用shape指定链接区域
    tabindex -- 代表使用"tab"键,遍历链接的顺序
    target -- 用来指出哪个窗口或框架应该被此链接打开
    title -- 代表链接的附加提示信息
    type -- 代表链接的MIME类型
    
    ---------------------
    
    本文来自 mylitboy 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/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都不会产生边距效果。**（水平方向有效，竖直方向无效）**