asp.net BulletedList样式修改 css

　首先编写一段简单的css脚本

　

然后呢，在asp:BulletedList中通过 CssClass ="style1"将样式作用到控件上。看看运行效果

注意到上下边框的颜色分别是红色和橙色，右边框是绿色。在这里出现边框，并没有针对div来设置border，而是针对控件asp:BulletedList设置的。右边框的样式是针对li来设置的，网站文本的颜色以及下划线是针对a来设置的。那么问题就来了，在代码中并没有<li/> 和<a/>这样的标记，为什么样式表里面的.style1 li会起作用呢。这是因为asp.net将设计代码在运行的时候编译成html代码了，而样式文本也被植入了网页源代码中。现在看看网页的源代码：

在下面的源代码中可以看到，css脚本和项目中的代码完全一样，但是项目中的asp:BulletedList控件代码却没有出现在源代码中，取而代之的是ul。这就是sap.net通过编译后产生的。

在源代码中，css样式style1是作用在ul上的，而li和a都是包含在ul中的，因此样式.style1 li 和.style1 a就分别控制在ul中的li和a。.style1 a:hover是控制当鼠标移到网站链接上的时候，鼠标变为手型且文字颜色变为红色。a:hover是一个css伪元素，于向某些选择器设置特殊效果。伪元素还有很多，这里暂不说了。在.style1 li 中添加display :inline-block;，就可以使得链接横向排列了，但是display :inline-block;并不是针对所有浏览器都有效的，我使用的是360急速浏览器，这个可以有效，但其他哪些浏览器无效或有效暂时就不知道了。

在控件asp:BulletedList 的属性中似乎没有设置背景图片的属性，这可以通过css来设置，在 .style1 li中添加background-image:url(img/1.png);来设置背景图片。url中是图片的路径。

将css脚本移到外部样式表中，然后在通过引用外部样式表，但是在运行的时候发现背景图片没有显示，这时需要将background-image:url(img/1.png);改为background-image:url(/img/1.png);这样就可以了。