腾讯课堂——IMWeb训练营: Day4 作业
来源:互联网 发布:知美术馆(图 编辑:程序博客网 时间:2024/06/06 04:06
腾讯课堂 —— 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技巧也不是很多。下次争取搞个复杂的。
0 0
- 腾讯课堂——IMWeb训练营: Day4 作业
- 腾讯课堂——IMWeb训练营: Day2 作业
- 腾讯课堂——IMWeb训练营: Day5 作业
- 腾讯课堂Day4作业
- DAY4——腾讯训练营
- IMWeb提升营 —Day4
- IMWeb训练营作业——todolist
- IMWeb训练营作业——select
- 【IMWeb训练营作业】——Select
- 腾讯课堂IMWeb小白群 DAY2 作业
- 腾讯课堂IMWeb小白学习作业
- IMWeb训练营作业
- IMweb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- 那些不能遗忘的知识点回顾——C/C++系列(笔试面试高频题)
- c#关于数组和多态的简单使用
- myeclipse中部署项目到tomcat失败解决办法(错误:If a file is locked ...)
- JS的转换HTML转义符
- hdu 2546 01背包(从一堆物品中尽可能组成接近给定重量的方案)
- 腾讯课堂——IMWeb训练营: Day4 作业
- Android--推送机制实现原理(二)-自己实现推送功能
- XTU 1243 2016 (大数取模+快速幂)
- Win7 64为Sublime Text3 配置python3的开发环境的方法
- C#注册表操作学习
- 京东面试题
- absolute与relative怎么区分
- 5-31 字符串循环左移 (20分)
- Java里面int范围对应的二进制举例分析