余温博客ps:用电脑预览的效果会好一些
<html>
<head>
<meta charset="utf-8">
<title>余温博客</title>
<style type="text/css">
@charset "utf-8";
* {
margin: 0;
padding: 0;
outline: none;
}
#content {
width: 500px;
height: 300px;
position: relative;
border: 2px solid #333;
margin: 100px auto
}
h1 {
text-align: center;
position: relative;
top: 30px;
color: #333
}
input[type="button"] {
width: 120px;
height: 40px;
border: 2px solid #333;
background: #bb7450;
font-size: 14px;
color: #fff
}
#line {
border: 1px solid #000;
margin-top: 100px;
}
#By {
position: absolute;
top: 190px;
left: 100px;
}
#Bn{
position: absolute;
top: 190px;
left: 300px;
}
#text {
text-align: center;
position: relative;
top: 135px
}
</style>
</head>
<body>
<div id="content">
<h1>你是猪吗?</h1>
<div id="line"></div>
<div id="text"></div>
<div id="By">
<input type="button" value=" 是的 " onclick="f1()" />
</div>
<div id="Bn">
<input type="button" value=" 不是 " onmouseover="f()" />
</div>
</div>
<script type="text/javascript">
var flag=1;
function f1()
{
document.getElementById("text").innerHTML="哈哈,我知道了~";
}
function f()
{
if(flag==1)
{
Bn.style.top='90px';
flag=2;
}
else if(flag==2)
{
Bn.style.top='90px';
Bn.style.left='50px';
flag=3;
}
else if(flag==3)
{
Bn.style.top='190px';
Bn.style.left='300px';
flag=1;
}
}
</script>
</head>
</body>
</html>
执行代码结果图
发表评论