<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
ul ul li{
border: 1px red solid;
border-bottom: 0;
border-left: 0 ;
border-right:0;
}
.blog{
border: 1px red solid;
}
.inner{
display: none;
}
</style>
</head>
<body>
<ul>
<li id="blog" class="blog">
<a id="text" href="javascript:;">博客</a>
<ul id="inner" class="inner">
<li><a href="">博客評論</a></li>
<li><a href="">未讀提醒</a></li>
</ul>
</li>
</ul>
<!-- js -->
<script type="text/javascript">
// 根據id獲取
var oLi=document.getElementById('blog');
var oUL=document.getElementById('inner');
// var oText=document.getElemntById('text');
//綁定事件 元素.事件
//鼠標左鍵單擊事件 onclick
// 鼠標移入事件 onmouseover
//鼠標移出事件 onmouseout
oLi.onmouseover=tab;
function tab(){
// alert(123);
oUL.style.display='block';
oLi.style.background = 'yellow';
oLi.style.width='200px';
// oText.style.fontStyle='25px';
}
oLi.onmouseout=function(){
oUL.style.display='none';
oLi.style.background='#FFFFFF'
oLi.style.width='100px';
}
</script>
</body>
</html>
練習--設置樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin: 0;}
#box{
width: 100px;
height: 100px;
border: 2px solid #000000;
}
#bg{
width: 100%;
height: 100%;
background: #000000;
opacity: 0.4;
position: absolute;
top: 0;
}
#zzc{
display: none;
}
.content{
width: 300px;
height: 300px;
position: absolute;
left: 40%;
top:30%;
border: 2px #000000 solid;
background: #FFFFFF;
}
.content p{
text-align: left;
line-height: 50px;
}
p span{
border: 1px #000000 solid;
cursor: pointer;
padding: 5px;
}
</style>
<script src="js/text.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>請為下面div設置樣式：<button id="btn" type="button">點擊設置</button></p>
<div id="box">
</div>
<div id="zzc">
<div id="bg"></div>
<div class="content" >
<p>請準備顏色
<span id="red" class="red">紅</span>
<span id="yellow" class="yellow">黃</span>
<span id="blue" class="blue">藍</span>
</p>
<p>請選擇div的寬
<span id="w1" class="w1">200px</span>
<span id="w2" class="w2">500px</span>
<span id="w3" class="w3">700px</span>
</p>
<p>請選擇div的高
<span id="h1" class="h1">200px</span>
<span id="h2" class="h2">500px</span>
<span id="h3" class="h3">700px</span>
</p>
<p style="text-align: center;">
<button id="bt" type="button">恢復</button>
<button id="bt1" type="button">確定</button>
</p>
</div>
</div>
</body>
</html>
text.js
window.onload=function(){
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
var oBg=document.getElementById('bg');
var oZzc=document.getElementById('zzc');
var oRed = document.getElementById('red');
var oYellow = document.getElementById('yellow');
var oBlue = document.getElementById('blue');
var oW1=document.getElementById('w1');
var oW2=document.getElementById('w2');
var oW3=document.getElementById('w3');
var oh1=document.getElementById('h1');
var oh2=document.getElementById('h2');
var oh3=document.getElementById('h3');
var oBt=document.getElementById('bt')
var oBt1=document.getElementById('bt1')
oBtn.onclick=function(){
oZzc.style.display='block';
}
oRed.onclick=function(){
oBox.style.background='red';
}
oYellow.onclick=function(){
oBox.style.background='yellow';
}
oBlue.onclick=function(){
oBox.style.background='blue';
}
oW1.onclick=function(){
oBox.style.width='200px';
}
oW2.onclick=function(){
oBox.style.width='500px';
}
oW3.onclick=function(){
oBox.style.width='700px';
}
oh1.onclick=function(){
oBox.style.height='200px';
}
oh2.onclick=function(){
oBox.style.height='500px';
}
oh3.onclick=function(){
oBox.style.height='800px';
}
oBt.onclick = function(){
oBox.style.width='100px';
oBox.style.height='100px';
oBox.style.background='#FFFFFF';
}
oBt1.onclick = function(){
oZzc.style.display= 'none';
}
}
