实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8">
<title>Hello world!</title>
<style type="text/css">
.d{
width:350px;height:250px;padding:15px;
background-image:url(images/3.jpg);background-repeat:norepeat;background-size:380px auto;
box-shadow:5px 5px 5px #888;border-radius:25px;
}
.title{
color:red;text-align:center;line-height:1.5em;
}
.a{
line-height:1.5em;color:brown;font-size:14px;
}
.e{
text-align:right;padding-right:15px;font-size:12px;
}
</style>
</head>
<body>
<div class="d">
<h3 class="title">这是我的第二个练习</h3>
<p class="a">中文网是个好网站，我爱上了学习，我希望在这里能学到知识，丰富自我，提升自我，争取能码的一手好BUG！哈哈哈</p>
<p onmouseover="before(this)" onmouseout="after(this)" class="e">By Song 2018.3.18</p>
</div>
</body>
<script type="text/javascript">
function before(element){
element.style.fontSize = '26px'
element.style.color = 'blue'
}
function after(element){
element.style.fontSize = '12px'
element.style.color = 'yellow'
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
