腾讯课堂——IMWeb训练营： Day4 作业

最新推荐文章于 2017-04-25 11:48:05 发布

原创最新推荐文章于 2017-04-25 11:48:05 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #垂直居中 #居中 #腾讯

前端学习专栏收录该内容

4 篇文章

订阅专栏

本文通过一个实战案例介绍了如何使用CSS中的绝对定位和相对定位来创建一张类似三国杀的卡片。作者在半天的时间里完成了从构思到实现的过程，并分享了在这个过程中对于CSS定位属性的理解。

腾讯课堂 —— IMWeb训练营：Day4 作业

要求：制作一张类似于三国杀的卡片，主要考察CSS中position、z-index等的理解和运用。

效果图：

代码：

<!DOCTYPE HTML>
<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技巧也不是很多。下次争取搞个复杂的。