前端小白训练营DAY5
增强html+css运用,还附带了简单的JS点击事件在里面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
margin-top:2rem;
}
#kd{
width: 24rem;
height: 34rem;
margin: auto;
background-color: #E1E2DA;
border-left:3rem solid #272727;
border-right: 3rem solid #272727;
border-top:3rem solid #272727;
border-bottom: 7rem solid #272727;
border-radius: 1rem;
box-shadow: 1rem 1rem 0.5rem #888888
}
.kindle{
position: absolute;
top: 41.7rem;
margin-left: 10.1rem;
color: #6A6E71;
font-size: 1.3rem;
}
img{
width: 24rem;
height: 34rem;
}
</style>
<script>
window.onload=function(){
var img = document.getElementById("pic");//获取img的ID标签
var s=1;//判断当前图片是第几张
img.onclick=function(){//添加img点击事件
if(s=='1'){//判断:如果这是第一张图片
this.src='2.png';//就让当前图片的路径改为另一张图片
s=2;//表示现在是另一张图片
}else{//判断:如果不是第一张图片
this.src='1.png';//就让当前图片的路径改为第一张图片
s=1;//表示现在是第一张图片
}
}
}
</script>
</head>
<body>
<div id="kd">
<img src="1.png" alt="李健" id="pic">
<p class="kindle">Kindle</p>
</div>
</body>
</html>
效果图