背景色:一个无序列表UL 鼠标激活显示背景色的实例

来源: 发布时间:星期五, 2008年9月26日浏览:41次评论:0

　　鼠标激活显示背景色，我们该如何编写这样的代码呢？我们来整理一下思路：把a里的部分设置成一个块元素，然后定义鼠标放上后的样式。CSS1中:hover只对a元素起作用，CSS2中:hover应用于所有元素．而IE7也没同样没有支持CSS2中的这个标准。所以为了适应所有浏览器还是要定义在a中。

我们看最终的效果：

$\"\"/$

我们看下面的xhtml代码：

$\"div$ Example Source Code [www.52css.com]

<divid=\"links\">
<ul>
<li><ahref=\"#\"title=\"CSSWebDesign\">CSSWebDesign<em>xhtml+cssdiv+css-52css.com</em><span>www.52css.com</span></a></li>
<li><ahref=\"#\"title=\"CSSWebDesign\">CSSWebDesign<em>xhtml+cssdiv+css-52css.com</em><span>www.52css.com</span></a></li>
</ul>
</div>

我们对上面的xhtml编写css代码：

$\"div$ Example Source Code [www.52css.com]

#linksul{
list-style-type:none;
width:280px;
}
#linksli{
border:1pxdotted#06f;
border-width:1px0;
margin-bottom:16px;
}

#linkslia{
color:#00f;
display:block;
font:bold120%Arial,Helvetica,sans-serif;
padding:8px;
text-decoration:none;
}
*html#linkslia{/*makehovereffectworkinIE*/
width:280px;
}
#linkslia:hover{
background:#f0f0f0;color:#036;
}

#linksaem{
color:#666;
display:block;
font:normal85%Verdana,Helvetica,sans-serif;
line-height:125%;
}

#linksaspan{
color:#999;
font:normal70%Verdana,Helvetica,sans-serif;
line-height:150%;
}

我们看最终的运行效果：

$\"div$ Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /><title>www.52css.com</title><style type=\"text/css\">#links ul {        list-style-type: none;        width: 280px;} #links li {        border: 1px dotted #06f;        border-width: 1px 0;        margin-bottom: 16px;}#links li a {         color: #00f;        display: block;        font: bold 120% Arial, Helvetica, sans-serif;        padding: 8px;        text-decoration: none;} * html #links li a {  /* make hover effect work in IE */	width: 280px;}#links li a:hover {        background: #f0f0f0; color:#036;}#links a em {         color: #666;        display: block;        font: normal 85% Verdana, Helvetica, sans-serif;        line-height: 125%; }#links a span {        color: #999;        font: normal 70% Verdana, Helvetica, sans-serif;        line-height: 150%;}                                
                    <script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                </div>
                <div class="tags">
                        标签：<a href="/Tag/5500/Index.html">word背景色</a> <a href="/Tag/5501/Index.html">qq空间背景色</a> <a href="/Tag/5499/Index.html">桌面图标背景色</a> <a href="/Tag/5498/Index.html">背景色</a> 
                      
                 </div>
                 <div id="plPdf">
	
                 <div> <a href="/mypdf/19438.pdf" title="下载 '背景色:一个无序列表UL 鼠标激活显示背景色的实例' 的PDF电子版" style="color: #ff6600;
                     font-size: 14px; font-weight: bold;">下载文章的 PDF文档电子版 离线看</a></div>
                 
</div>
                <div class="diggdiv">
                    <div id="digg19438" class="diggbox">
                        <div class="diggnum">0</div>
                        <div class="digglink">
                            <a href="javascript:dig(19438);">顶一下</a>
                        </div>
                    </div>
                    <div class="prevnext">
                 
                        <div>
                        <input type="hidden" id="txtArtTitle" value="背景色:一个无序列表UL 鼠标激活显示背景色的实例" />
                        <input type="text" id="txtArtUrl" onclick="copy(this)" style="width:300px" value="http:/www.CrazyCoder.cn/HtmlJiaoCheng/Article19438.html" /><input type="button" onclick="copy()" value="复制网址" /></div>
                    </div>
                </div>
                <div class="clear"></div>
               
            </div>
          
            <div class="title-y">               
                <h3>相关文章</h3>
            </div>
            <div class="list-y">
                <ul class="list">
                    
                            <li><span>2008-9-10 15:04:30</span> <a href="/19/Article5786.html">表格背景色:用for循环语句来实现表格背景色的转变</a>
                            </li>
                        
                            <li><span>2008-9-25 0:43:19</span> <a href="/29/Article13166.html">对话框背景色:对话框背景色以及控件颜色设置方法代码</a>
                            </li>
                        
                            <li><span>2008-9-25 2:13:15</span> <a href="/33/Article17046.html">按钮背景色:背景色能用按钮进行手动调节</a>
                            </li>
                        
                            <li><span>2008-9-25 1:51:53</span> <a href="/32/Article16097.html">背景色:分页显示的例子（显示记录背景色替换变化）</a>
                            </li>
                        
                            <li><span>2008-9-25 2:13:35</span> <a href="/33/Article17094.html">js控制背景色:用户自己控制背景色的实现</a>
                            </li>
                        
                            <li><span>2008-9-10 16:39:39</span> <a href="/8/Article8423.html">背景色:用expression来区分只读文本框和普通文本框的背景色 </a>
                            </li>
                        
                            <li><span>2008-9-10 16:37:50</span> <a href="/8/Article8285.html">背景色:javascript/css实现GridView行背景色交替、点击行变色 </a>
                            </li>
                        
                            <li><span>2008-9-10 17:51:58</span> <a href="/2/Article10261.html">背景色:GridView中的行的背景色根据条件来显示不同的颜色</a>
                            </li>
                        
                            <li><span>2008-9-2 12:02:45</span> <a href="/8/Article3883.html">背景色:用javascript/css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中</a>
                            </li>
                        
                </ul>
            </div>
            <div class="title-y">               
                <h3>读者评论</h3>
            </div>
            <div class="list-y">
                <ul class="listcmt">
                          
                <li>
                    <div class='pager'> <span class='pagerinfo'>共0条 分0页</span></div>
                </li>      
                </ul>
            </div>
            <div class="title-y">               
                <h3>发表评论</h3>
            </div>
            <form id="formCmt"  method="post" onsubmit="return saveComment();">
            <div class="list-y">                
                <ul class="list">
                    <li>昵称：<input type="text" id="txtUserName" name="txtUserName" /><input type="hidden" id="txtArticleID" value="19438" /></li>                    
                    <li>内容：<textarea id="txtContent" name="txtContent">

专注于互联网--专注于架构

首页 »Html教程 » 背景色:一个无序列表UL 鼠标激活显示背景色的实例 »正文

背景色:一个无序列表UL 鼠标激活显示背景色的实例

热门标签

精华推荐

Dig排行

阅读排行

评论排行