腾讯前端十日训练营day 4
来源:互联网 发布:rndis驱动 windows 10 编辑:程序博客网 时间:2024/06/14 05:46
这是day 4的任务,然而因为昨晚挺晚才完成任务,所以文章推迟到了现在写。
废话少说,以下是文章。
任务描述: 结合盒子模型,发布一张你的卡片(可选择三国杀,动物卡或其他类型卡片,也可制作个人名片。
卡片需要包含边框,内部图片和一部分文字介绍,制作三国杀卡片可以简化其原本构造。
建议小白选择个人名片或动物卡,有基础的同学可以挑战三国杀卡片)。
动物卡是什么鬼,所以我选择了三国杀作为模仿的对象。然而后边搜图发现三国杀的略复杂那么一点并且同时瞥到了下图所以就模仿了下图的样式。
首先分析都由哪些部分构成,分析得最外层灰黑背景为一div。里层褐色为一div,姑且称其为div2,。div2里有三个部分head(人物名字栏)、中间图片块(上面的八个星星忽略)、下面的任务介绍部分。
分析完了就可以开始写HTML代码,也即整个整个项目的框架。
以下是HTML代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>卡牌</title><link rel="stylesheet" href="css/1.css" type="text/css" /></head><body><div id="div1"><div id="div2"><br /><div id="head">厄运小姐</div><div id="img"><img src="img/女枪.jpeg" /></div><div id="p"><p>厄运小姐,跑得快、追的快,大招范围广伤害高,好补刀、好收兵,前期易形成装备压制。</p></div><br /></div></div></body></html>
接下来就是css代码,主要涉及到的样式有
background-color
margin、
padding、
border、border-radius、
box-shadow
css代码如下
*{margin:0;padding: 0;}body{background-color: cornsilk;}#div1{background-color:lightslategray;width: 300px;padding: 15px;margin: 1cm auto;border-radius: 4px;}#div2{background-color:chocolate;width: 100%;margin: 0 auto;box-shadow: 0 0 3px 3px chocolate;}#head{width: 80%;border:2px outset red;border-radius: 2px;margin: 0 auto;text-align: center;}#img{margin:0 auto;padding: 10px;text-align: center;}p{width: 80%;margin:0 auto ;background-color: bisque;border:3px groove red;font-size: small;}img{width: 65%; height: 65%;border:5px outset lightslategray;}
最终效果图如下
自我评价:审美很重要!大体实现目标效果,细节有待提高。
0 0
- 腾讯前端十日训练营day 4
- 腾讯前端十日训练营day2
- 腾讯前端十日训练营day2
- 腾讯前端十日训练营结业项目
- 腾讯十天前端小白训练营 <DAY 2>作业
- 前端训练营DAY 1
- 腾讯前端十天小白训练营<DAY 3>---css引入方式、选择器&权重
- 腾讯前端十天小白训练营<DAY 3>---css常用属性及行内&块级元素
- 腾讯课堂新手前端训练营day1
- 腾讯前端求职训练营第一天
- 腾讯前端求职训练营第二天
- 腾讯前端求职训练营第三天
- 腾讯前端求职训练营第四天
- 腾讯前端求职训练营第五天
- 腾讯前端训练营第六天
- 腾讯课堂新手前端训练营day2-盒子模型训练
- 腾讯课堂前端训练营已发车,快上车,带你十天拿下秋招offer
- 2017---IMWeb前端10天求职训练营 Day 1 面试题+思考题
- 【cc2541开发环境】BLE-CC254x-1.4.0协议栈的安装
- 172. Factorial Trailing Zeroes
- CentOS 7 rpm安装gcc 详解
- myeclipse2016 stable1.0 破解
- Leetcode刷题(20)
- 腾讯前端十日训练营day 4
- codeblocks下wxWidgets编译与配置
- pycharm编写一个python helloworld
- linux .o,.a,.so的关系
- STL初始化、读数据、写数据
- Yii2数据库开启表结构缓存以及清除缓存
- 树的分治-点分治
- Java生成图片验证码
- Java NIO 系列教程