训练营第四天作业 - 用盒子模型制作卡片

最新推荐文章于 2024-10-11 18:15:59 发布

浅唱春天

最新推荐文章于 2024-10-11 18:15:59 发布

阅读量522

点赞数

分类专栏： 10天训练营作业文章标签： html css 布局源代码

本文链接：https://blog.csdn.net/qq_24280745/article/details/70231400

版权

10天训练营作业专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前几天学习了一些HTML标签,并能够熟练的运用,今天又学习了css的浮动和定位,看看今天的作业吧!.

浮动和定位是属于布局的,所以我用浮动把小狗的图片放在了右上角,而那个线则是用盒子模型去掉左右线然后用定位把它放在合适的位置.背景就用了一张漂亮的图片,就这样,我的明信片就做好了,还给我的小宝贝,送上了一句祝福语,希望她能喜欢.

好了,余话就说完了,先把效果图拿来看看

下面是代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#divshow{border:1px black solid;width: 550px;height: 300px;
					border-radius:6px;background:url(2.jpg);position:fixed;top:300px;left:700px}
			
			img{width:150px;height: 95px;
				padding: 8px;
				border: 1px gray solid;
				border-radius: 6px;
				background: ghostwhite;
				/*position: relative;left:0px;top:187px;*/
				float: right;
				}
			#hr{width: 290px;height: 25px;border: 1px black solid;margin:43px 5px;
				border-right:0;border-left:0;line-height: 25px;}
			.txt{width: 290px;height: 25px;border: 1px black solid;margin:25px 35px;
				border-right:0;border-left:0;line-height: 25px;}
			#bottom{width: 70px;border-bottom:1px black solid;position:absolute;top:250px;left:450px;}
		</style>
	</head>
	<body>
		<div id="divshow">
			
			<img id="dog" src="01.png"/>
			<div id="hr">
				致亲爱的小宝贝:
			</div>
			<br />
			<div class="txt">
				我爱你
			</div>
			<div class="txt">
				
			</div>
			<div id="bottom">
				大宝贝
			</div>
		</div>
		
			

	</body>
</html>