作业2：个人名片

最新推荐文章于 2024-03-25 17:59:45 发布

雨夜V星辰

最新推荐文章于 2024-03-25 17:59:45 发布

阅读量1.3k

点赞数 2

文章标签： html css 标签

本文链接：https://blog.csdn.net/yuye_v_xingchen/article/details/70579010

版权

HTML代码：

<html>
	<head>
		<link href="card.css" type="text/css" rel="stylesheet"/>
		<title>名片展示</title>
		
	</head>
	<body>
		<div id="d1">
			<p id="p1">独立音乐人</p>
			<div id="d3">齐一</div>
			<div id="d2"></div>
			<div>
				<span>----------------------------------</span>
				<p id="p2">代表作：</p>
				<div id="d4">
					《致自己》《温暖的人》《这个年纪》《非正常励志歌》
				</div>
			</div>
		</div>
	</body>
</html>

CSS代码：

#d1{
	height:260px;width:480px;
	border:solid 2px black;
	background-image:url("timg.jpg");
	background-repeat:no-repeat;
	background-position:0px 0px;
	position:fixed;
}
#d2{
	height:140px;width:110px;
	margin-top:-80px;margin-left:300px;
	padding-top:-50;padding-left:-30;
	border:solid 0.1px black;
	background-image:url("photo.jpg");
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
	clear:both;
}
#d3{
	margin-top:20px;margin-left:170px;
	font-size:40px;
	font-weight:900;
	font-family:"KaiTi";
}
#d4{
	margin-top:80px;margin-left:50px;
	position:absolute;
	font-size:15px;
	font-weight:300;
}
#p1{
	margin-top:50px;margin-left:120px;
	font-weight:700;
}
#p2{
	margin-top:60px;margin-left:20px;
	position:absolute;
	font-size:5px;
	font-weight:400;
}
span{
	margin-top:35px;
	position:absolute;
}