颜色有关问题
日期：2014-05-17 浏览次数：20661 次
颜色问题
按理想li的底色应该是灰色的，为啥是白色的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<style>
#card{
width:300px;
height:200px;
}
#tit{
width:100%;
height:25px;
line-height:25px;
}
#tit h3{
margin:0px;
padding:0px;
width:80px;
background:#ccc;
float:left;
line-height:25px;
text-align:center;
border:2px solid white;
font-size:12px;
color:white;
}
#content{
width:100%;
height:175px;
background:#888；
}
#content div{
display:none;
}
#content .one{
display:block;
}
#tit .titin{
border:2px solid #888;
background:#888;
}
</style>
<body>
<div id="card">
<div id="tit">
<h3 onmouseover="show(0)" class="titin">第一项</h3>
<h3 onmouseover="show(1)">第二项</h3>
<h3 onmouseover="show(2)">第三项</h3>
</div>
<div id="content">
<div class="one">
<ul>
<li>aaas</li>
<li>aaag</li>
<li>aaasg</li>
<li>aaaaa</li>
<li>aaaaa</li>
</ul>
</div>
<div>
<ul>
<li>bbbbb</li>
<li>bbbbbbb</li>
</ul>
</div>
<div>
<ul>
<li>cccc</li>
</ul>
</div>
</div>
</div>
<script>
var h3os=document.getElementsByTagName("h3");
var cdivs=document.getElementById("content").getElementsByTagName("div");
function show(num){
for(var i=0; i<h3os.length; i++){
if(i==num){
h3os[num].className="titin";
cdivs[num].style.display="block"
}else{
h3os[i].className="";
cdivs[i].style.display="none";
}
}
}
</script>
</body>
</html>
------解决方案--------------------
请给分，你的这句分号写成全角了。下次仔细点，哈哈
#content{
width:100%;
height:175px;
background:#888；
}
background:#888；
修改为
background:#888;
按理想li的底色应该是灰色的，为啥是白色的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<style>
#card{
width:300px;
height:200px;
}
#tit{
width:100%;
height:25px;
line-height:25px;
}
#tit h3{
margin:0px;
padding:0px;
width:80px;
background:#ccc;
float:left;
line-height:25px;
text-align:center;
border:2px solid white;
font-size:12px;
color:white;
}
#content{
width:100%;
height:175px;
background:#888；
}
#content div{
display:none;
}
#content .one{
display:block;
}
#tit .titin{
border:2px solid #888;
background:#888;
}
</style>
<body>
<div id="card">
<div id="tit">
<h3 onmouseover="show(0)" class="titin">第一项</h3>
<h3 onmouseover="show(1)">第二项</h3>
<h3 onmouseover="show(2)">第三项</h3>
</div>
<div id="content">
<div class="one">
<ul>
<li>aaas</li>
<li>aaag</li>
<li>aaasg</li>
<li>aaaaa</li>
<li>aaaaa</li>
</ul>
</div>
<div>
<ul>
<li>bbbbb</li>
<li>bbbbbbb</li>
</ul>
</div>
<div>
<ul>
<li>cccc</li>
</ul>
</div>
</div>
</div>
<script>
var h3os=document.getElementsByTagName("h3");
var cdivs=document.getElementById("content").getElementsByTagName("div");
function show(num){
for(var i=0; i<h3os.length; i++){
if(i==num){
h3os[num].className="titin";
cdivs[num].style.display="block"
}else{
h3os[i].className="";
cdivs[i].style.display="none";
}
}
}
</script>
</body>
</html>
------解决方案--------------------
请给分，你的这句分号写成全角了。下次仔细点，哈哈
#content{
width:100%;
height:175px;
background:#888；
}
background:#888；
修改为
background:#888;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
