腾讯前端十日训练营day 4_思图十日训练-CSDN博客

本文链接：https://blog.csdn.net/samt327/article/details/70244939

这是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;
}

最终效果图如下