效果图：
其中用到了
Css中的（background-img:url()背景图；background-repeat:no-repeat禁止平铺；border-radius:15px；15的圆角 box-shadow:6px 6px 6px #888;阴影 text-align:center;居中 font-size 文字大小 text-indent：2em 首行缩进 ）
Js实现鼠标的植入移出效果{onmouseover="change(this)" onmouseout="old(this)" / <script type="text/javascript"> function change(element) {element.style.fontsize="22px";element.style.color="blue";} }
收藏
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>我的第一节课作业</title>
<style>
div{
width:500px;
height:250px;
/*border:1px solid red;*/
padding:15px;
background-image:url(images/father2.jpg);
background-size:530px 280px;
background-repeat:no-repeat;
border-radius:15px;
box-shadow:6px 6px 6px #888;
}
h3{
text-align:center;
color:brown;
font-size:20px;
}
.text1{
text-align:center;
}
.text2{
text-indent:2em;
line-height:1.5em;
}
</style>
</head>
<body>
<div>
<h3 onmouseover="change(this)"
onmouseout="old(this)">背影</h3>
<p class='text1'>作者: 朱自清</p>
<p class='text2'> 我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p>
</div>
<script tyoe="text/javascript">
function change(element){
element.style.fontSize ='22px';
element.style.color ='blue';
}
function old(element){
element.style.fontSize ='20px';
element.style.color ='brown';
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!--手抄本-->
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
