这个练习是看网上的视频自己又写了一遍,对一些知识点进行的总结,从基础到高级都有讲解,有需要的可以看一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>心愿墙</title>
<style>
body{
margin: 0px auto;
padding: 0px;
font-size: 12px;
background: url("images/bg.gif") repeat center 36px;
text-align: center;
background-color: #c30230;
}
#content{
margin: 0px auto;
width: 960px;
background: url("images/content_bg.jpg") no-repeat left top;
height: 627px;
position: relative;
}
#content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8{
position: absolute;
width: 227px;
left: 200px;
top: 100px;
}
#content .tip1 .tip_h{
background: url("images/tip1_h.gif") no-repeat left top;
}
#content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h{
width: 227px;
height: 23px;
padding-top: 45px;
text-align: center;
cursor: pointer;
}
#content .tip1 .tip_c{
background: url(images/tip1_c.gif) repeat-y;
}
#content .tip1 .tip_c, #content .tip2 .tip_c,