如何控制html代码中DL标签的颜色？

本文转载自 ilovenili 查看原文 2008-07-08 10 控制/ 代码/ 颜色/ 如何/ html/ 标签

html中有这样一行代码：

<DL>
... //标签行
</DL>

如何控制上述标签行的背景颜色(注：是整行的背景色，不是字体的颜色)？

12 个解决方案

#1

<DL id="a">
... //标签行
</DL>

然后就可以用javascript控制a
的样式了

#2

<style>

dl{background-color:#fff;margin:0px;padding:0px}

</style>

dl既然是html标签，就可以直接写样式拉

#3

楼上用#fff...白色底色？？
<style>
dl{background-color:red;}
</style>
<DL>
... //标签行
</DL>

#4

引用 3 楼 neo_yoho 的回复:

楼上用#fff...白色底色？？
<style>
dl{background-color:red;}
</style>
<DL>
... //标签行
</DL>

白不白色都不是重要的
重要的是知道怎么用了

#5

引用 3 楼 neo_yoho 的回复:

楼上用#fff...白色底色？？
<style>
dl{background-color:red;}
</style>
<DL>
... //标签行
</DL>

这种方法不错，调试通过，上面的几位大哥说的也对，只是我不用JAVA罢了，只能给
neo_yoho大侠加分了:)

#6

#7

//test.html
<div class="product_intro">
  <div class="t"><img src="images/product_intro.jpg" border="0" alt="" /></div>
  <div class="c">
<ul>
  <li><img src="uploadfile/product/06.jpg" border="0" alt=""  /><div>asfdsadfa</div></li>
  <li><img src="uploadfile/product/06.jpg" border="0" alt=""  /><div>asfdsadfa</div></li>
  <li><img src="uploadfile/product/06.jpg" border="0" alt=""  /><div>asfdsadfa</div></li>
  <li><img src="uploadfile/product/06.jpg" border="0" alt=""  /><div>asfdsadfa</div></li>
  <li><img src="uploadfile/product/06.jpg" border="0" alt=""  /><div>asfdsadfa</div></li>
  <li><img src="uploadfile/product/06.jpg" border="0" alt=""  /><div>asfdsadfasfdsadfaasfdsadfaasfdsadfaasfdsadfaa</div></li>
</ul>
  </div>
</div>
<div id="lefter">
<div class="business_intro">
  <div class="t"><img src="images/business_intro.jpg" border="0" alt="" /></div>
  <div class="c">asfdsa</div>
</div>
<div class="branch_intro">
  <div class="t"><img src="images/branch_intro.jpg" border="0" alt="" /></div>
  <div class="c">34</div>
</div>
<div class="news_products">
  <div class="t"><img src="images/news_products.jpg" border="0" alt="" /></div>
  <div class="c">d</div>
</div><div class="clear"></div>
</div>
<div id="righter">
<div class="same_fur_t">
  <div class="t">不用JAVA罢了</div>
  <div class="c_1"></div>
</div>
<div class="advance"><img src="uploadfile/banner/05.jpg" border="0" alt="" /></div>
<div class="same_fur_t">
  <div class="t">不用JAVA罢了</div>
  <div class="c_3"></div>
</div>
<div class="same_fur_t">
  <div class="t">不用JAVA罢了</div>
  <div class="c_4"></div>
</div>
<div class="advance"><img src="uploadfile/banner/05.jpg" border="0" alt="" /></div>
<div class="same_fur_t">
  <div class="t">不用JAVA罢了</div>
  <div class="c_2"></div>
</div>
</div>

这么一段代码样式如下
//main.css
#lefter{float:left;width:595px;}
#righter{float:left;width:325px!important;width:320px;}
/*Product List Style*/
.product_intro{float:left;width:100%;margin:5px 0 0 0;}
.product_intro .c{padding:10px;border:1px solid #9BBDD3;height:134px;}
.product_intro ul{}
.product_intro li{float:left;width:13%;height:127px;padding:0px 16px;text-align:center;line-height:20px;overflow:hidden;}
/**/
.branch_news,.business_intro,.branch_intro,.news_products{float:left;width:590px;margin:5px 5px 0 0;}
.branch_news .t{padding:0px;height:26px;}
.branch_news .c{clear:both;height:253px;padding:10px;border:1px solid #9BBDD3;}
.branch_news .pic{width:232px;line-height:17px;text-align:center;float:left;}
.branch_news .b_n_list{width:310px;float:left;padding:0 0 0 17px;}
.branch_news .b_n_list ul{}
.branch_news .b_n_list li{clear:both;height:25px;line-height:25px;font-size:14px;overflow:hidden}
/*Public mode Style*/
.same_fur_t{float:left;width:325px!important;width:320px;margin:5px 0 0 0;}
.same_fur_t .t{clear:both;background:url(../images/same_fur_t.jpg) no-repeat;height:24px;line-height:24px;}
.same_fur_t .c{clear:both;padding:10px;border:1px solid #9BBDD3;height:255px;}
.same_fur_t .c_1{clear:both;padding:10px;border:1px solid #9BBDD3;height:298px;}
.same_fur_t .c_2{clear:both;padding:10px;border:1px solid #9BBDD3;height:150px;}
.same_fur_t .c_3{clear:both;padding:10px;border:1px solid #9BBDD3;height:238px;}
.same_fur_t .c_4{clear:both;padding:10px;border:1px solid #9BBDD3;height:305px;}
.same_fur_t .pic{}
/**/
.business_intro .c{clear:both;height:145px;padding:10px;border:1px solid #9BBDD3;}
/**/
.branch_intro .c,.news_products .c{clear:both;height:370px;padding:10px;border:1px solid #9BBDD3;}

郁闷的事,firefox里完整,在maxthon里,及ie7.0,ie6.0变态的要死,宽度,都定死的,居然会中间空隙很大,朋友,你拷一下代码试试看看

#8

exit;

#9



<style type="css/text">

[code=CSS]

dl{background-color:#336699!important}

</stype>
[/code]

#10

最好用个id 不然所有的dl都会是这个颜色

<style>
#dl{background-color:red;}
</style>
<DL id="dl"> xcz</DL>

#11

很好，学习了

#12

学
习

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。

HTML中ul,ol,li,dl,dt,dd标签用法 HTML中列表标签dl dt dd语法结构与使用(类似 ul,ol标签) html5-8 如何控制html5中的视频标签和音频标签 html dl dt dd 标签语法与使用 html中dl dt dd 标签用法与图片列表自动换行 HTML中 dt dl dd ul li 等标签英语单词 HTML a标签文字颜色 html中的颜色代码详解及图示 Android和Html中的颜色代码如何给html文档中的iframe标签添加背景颜色