<!-- 腾讯课堂 IMWeb训练营 Day2 作业-->
<!DOCTYPE HTML>
<html><head>
<title>Day2-雷神短歌</title>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<style type="text/css">
#poetry {
position:absolute; left: 0; right: 0; top: 0; bottom: 0;
margin: auto; /* 上一行代码和这一行代码,组合起来实现了div的居中对齐*/
width: 550px;
height: 300px;
}
img {
position: relative;
left: 0px;
top: 0px;
width: 550px;
height: 300px;
border-radius: 20px; /* 图片圆角效果 */
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 2px 2px 3px #aaa; /* 边框阴影效果 */
-moz-box-shadow: 2px 2px 3px #aaa;
-webkit-border-radius: 2px 2px 3px #aaa;
z-index: -1; /* 使图片展现次序小于文字,实现文字浮于图片的效果 */
}
p {
font-family: LiSu;
}
#p1 {
position: relative;
left: 500px;
top: -300px;
width: 20px; /* 通过将宽度设小,实现文字竖直排列 */
line-height: 24px;
}
#p2 {
position: relative;
left: 470px;
top: -390px;
width: 20px;
line-height: 24px;
}
#p3 {
position: relative;
left: 440px;
top: -480px;
width: 20px;
line-height: 24px;
}
#p4 {
position: relative;
left: 410px;
top: -585px;
width: 20px;
line-height: 24px;
}
</style>
</head>
<body>
<div id="poetry">
<img src="http://i2.muimg.com/591548/e531ed630569b027.jpg" />
<p id="p1">隐约雷鸣</p>
<p id="p2">阴霾天空</p>
<p id="p3">但盼风雨来</p>
<p id="p4">能留你在此</p>
</div>
</body>
</html>
效果如下图: