腾讯课堂 —— IMWeb训练营:Day4 作业
要求:制作一张类似于三国杀的卡片,主要考察CSS中position、z-index等的理解和运用。
效果图:
代码:
<html>
<head>
<mate charset="utf-8" />
<title>魔法卡牌</title>
<style type="text/css">
#character {
width: 75px;
height: 106px;
position: absolute;
top: 0px; right: 0px; bottom: 0px; left: 0px;
margin: auto;
}
#lace1 {
width: 260px;
height: 268px;
position: absolute;
top: 0px; right: 0px; bottom: 0px; left: 0px;
margin: auto;
z-index: -1;
}
#main_container {
position : absolute;
top: 0px; right: 0px; bottom: 0px; left: 0px;
margin: auto;
width: 300px;
height: 280px;
z-index: -2;
}
#word_container {
width: 110px;
height: 160px;
position: absolute;
top: 0px;
left: 0px;
}
#word1 {
position: absolute;
top: 53%;
left: 95%;
width: 20px;
height: 21px;
z-index: 1;
}
#word2 {
position: absolute;
top: 116%;
left: 105%;
width: 60px;
height: 20px;
z-index: 1;
}
</style>
</head>
<body>
<div id="main_container"> <!-- 主容器,由于定位 -->
<div id="word_container"> <!-- 作为字的父块 -->
<img id="word1" src="http://i1.piimg.com/591548/045f4416fce6b6af.png">
<img id="word2" src="http://i1.piimg.com/591548/c6dc3178f9122f7e.png">
</div>
<img id="character" src="http://i1.piimg.com/591548/385cc8c42fedf0b1.jpg" /> <!-- 最里面的人物 -->
<img id="lace1" src="http://i1.piimg.com/591548/94a0a2efe07221b2.jpg" /> <!-- 最外侧花一样的框 -->
</div> <!-- 主容器结束 -->
</body>
</html>
总结:
完成这个练习用了一个上午的时间,通过练习基本掌握了绝对定位、相对定位的区别和使用方法。由于素材难找,考虑到作品的美观,中间删去了一些颜色不搭的元素,如左下角和右上角的勾玉等等。
最终的成品有些简陋,使用的CSS技巧也不是很多。下次争取搞个复杂的。