首先编写一段简单的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);这样就可以了。

asp.net BulletedList样式修改 css的更多相关文章

  1. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  2. jquery修改css样式,样式带!important

    由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...

  3. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  4. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  5. javascript 修改css样式

    abc.css CSS code .class1     {    width:10px;    background-color: red;    } HTML code <!DOCTYPE ...

  6. JS笔记一:动态修改css样式

    ---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...

  7. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  8. 如何利用 jQuery 修改 css 中带有 !important 的样式属性?

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  9. asp.net --- Menu控件\CSS 和样式

    几乎 Menu 控件外观的各个方面都可以使用 Menu 控件的属性或级联样式表 (CSS) 来管理.通过了解哪些属性控制呈现的哪些方面,可以定制菜单的外观.本主题介绍由 Menu 控件公开的样式类型, ...

随机推荐

  1. poj1163 dp入门

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 36811   Accepted: 22048 De ...

  2. C编译器、链接器、加载器详解

    摘自http://blog.csdn.net/zzxian/article/details/16820035 C编译器.链接器.加载器详解 一.概述 C语言的编译链接过程要把我们编写的一个c程序(源代 ...

  3. gcc选项-g与-rdynamic的异同

    摘自http://www.tuicool.com/articles/EvIzUn gcc选项-g与-rdynamic的异同 gcc 的 -g ,应该没有人不知道它是一个调试选项,因此在一般需要进行程序 ...

  4. EK中fromCharCode和parseInt的配合使用

    基于web的漏洞攻击的第一步一般是:在landing page中通过<script>标签下的JavaScript脚本引入一些恶意链接.这些脚本往往会採用各种各样的混淆.加密手法来躲避AV和 ...

  5. jqery ajax读取json文件

    json文件数据 [ {"name":"哈哈··","email":"邮箱01","gender": ...

  6. checklistbox的使用

    public class CheckListboxHelper { #region 为checklistbox绑定数据源 /// <summary> /// 为checklistbox绑定 ...

  7. random background

    function roll(){ var bg = document.getElementById("loginbg"); var rnd = Math.floor(Math.ra ...

  8. JQuery获取Checkbox组的值

    前台: <div id="addtrtr" style="padding:20px; background-color:#F8F8F8;"> < ...

  9. java集合类遍历删除方法测试以及使用场景记录

    package test0; import java.util.List; import java.util.Map; import java.util.Map.Entry; import java. ...

  10. juce中的Singleton

    说明上其实很明白,支持多线程,防止重复创建,同时支持如果删除以后就不在创建,利用局部静态变量进行标记.挺通用,看来下次写个c11版本的 //============================== ...