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);这样就可以了。

时间: 2024-11-10 13:18:34

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

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

由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方法:$("#idName").css("backgroundColor","red");但是这个方法无法改变padding-left:12px;这一块的背景色,因为定位不到它的id. 后来在请教了公司的搞html的同事(民庆)后,他说要在样式后面加个

关于修改css样式的几种js用法

看了js也有一段时间了,对于修改css样式有很多种方式可以实现,今天做一个小小的总结吧. 首先写个例子 body部分 <div class="box"></div><inpiut id-"btn" type="button" value="按钮"> style部分 .box{ width: 100px; height: 100px; background: red; border: 1px

JavaScript修改CSS伪元素:after和:before的样式

CSS伪元素:before和:after可以实现很多有趣的功能,我们项目中使用的ionicframework框架的ionic.css文件中大量使用到了这2个伪元素.伪元素可以用来定义样式,但是和正常的dom元素不同,我们没有办法选中这些伪元素,也就不能像普通元素那样来修改它. <head> <style> .content{ margin-top:100px; } .content:before{ content:'target-before'; color:#33B5E5; po

javascript 修改css样式

abc.css CSS code .class1     {    width:10px;    background-color: red;    } HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><link rel="stylesheet" type="text/css" href

用JS查看修改CSS样式(cssText,attribute(&#39;style&#39;),currentStyle,getComputedStyle)

CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 <div id="div1" style="width: 100px; height: 100px; background: black"> 2 </div> 2.内部.外部样式表: 内部样式表就是在<head>头部里有<style&

JavaScript访问修改css样式表

1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" style="backgroundColor:blue;"></div> <script type="text/javascript"> var mydiv1=document.getElementById("myid"

廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树: // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置文本为abc: p.innerHTML = 'ABC'; // <p id="

chorme和IE下的滚动条样式修改

火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css&q

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

(21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): request.get(URL).then(成功回调函数,失败回调函数); 第一个回调函数是成功的,参数用response:(也可以用其他的) 第二个回调函数是失败的,参数用error:(也可以用其他的) 注: ①读取本地比较简单,直接填写本地的url即可: ②如果读取服务器端(比如数据库),那么需要相应的支持,例如python脚本等(我自己目前对python.和