千锋学习48天：css_千锋blod-CSDN博客

本文链接：https://blog.csdn.net/m557886/article/details/105399424

今日千锋练习

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0px;
			}
			#a{
				display: flex;
				flex-direction: column;
				height: 100%;
			}
			#left{
				background-color: red;
				width: 100%;
				height: 40%;
			}
			#right{
				background-color: blue;
				width: 100%;
				height: 60%;
			}
			
		</style>
	</head>
	<body>
		<div id="a">
			<div id="left">
				left
			</div>
			<div id="right">
				right
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
			font{
				display:inline-block;
				min-width: 100px;
				max-width: 200px;
				min-height: 100px;
				max-height: 200px;		
			}
			ul{
				text-align: center;
				list-style-image: url(img/a.gif);
				list-style-position: inside;
				
			}
			img{
				width: 30%;
				height: 30%;
				border:dotted goldenrod 10px;
				border-bottom-style: dashed;
				border-radius: 20%;
				padding: 100px;
				margin: 0px;
				
			}
			
			#pic{
				position: fixed;
				width: 50px;
				height: 50px;
				right: 0px;
				bottom: 0px;
							
			}
			#one{
				background-color: red;
				position: relative;
				top: 50px;
				left: 20px;
			}
			#two{
				background-color: saddlebrown;
				position:absolute;
				top: 100px;
				left: 100px;
			}
			#three{
				display: inline;
			}
		</style>
		
	</head>
	<body>
		<span id="one">
			addddd
		</span>
		<span id="two">
			addd2
		</span>
		<span id="three">
			asss3
		</span>
	<img id="pic" src="img/a.gif" /><br />
		<font>111222333444555</font>
		<ul>
			<li>aaaaaaaaa</li>
		</ul>
		<img src="img/girl04.jpg"/>
		<img src="img/girl03.jpg"/><br />		
		<font>aasaasdfddffff</font>
		<br />

	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
			background-color: grey;
			color: aqua;
			text-align: center;
			background-image: url(img/girl02.jpg);
			background-size: cover;
			font-size: 200px;
			font-weight: bold;
		}
		
		</style>
	</head>
	<body>
		青青草原
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body{
				background-image:url(img/girl01.jpg);
				background-size: cover;
			}
			#title{
				font-size: 3em;
				color: red;
				text-align: center;
				font-family:"楷体";
			}
			.content{
				font-family:"楷体";
				color: black;
				font-size: 2em;
				text-indent: 2em;
				line-height: 2em;
				letter-spacing: 0.1;
				font-weight: bolder;
			}
			
		</style>
	</head>
	<body>
		<p id="title">
			再见青春再见我的爱
		</p>

		<p class="content">
			想在毕业和你深深的道别，告诉你我爱你。
		</p>

		<p class="content">
			你爱网游，常常我到过的网站，你早就体会过了，我不知道，你是否也在这，不过这又有什么关系呢？
		</p>
		
		<p class="content">
			很久很久，不知道什么时候了，喜欢你似乎是一种习惯。
		</p>
	
		<p class="content">
			七年，有七年了。
		</p>
	
		<p class="content">
			七年之痒，我等不下去了，我知道，我输了。
		</p>
	
		<p class="content">
			你的签名最近有更新了，我都不知道你有多久，没有去空间了？看你的日志，现在的你正在为一个女孩感到犹豫不决？
		</p>
	
		<p class="content">
			谁呢？不敢说是我，即使偶尔你会在不经意中对我的态度，说的话，做的事让我瞎想，但那只是偶尔，你爱玩。
		</p>
	
		<p class="content">
			不敢在去受一次伤，我不敢。
		</p>
	
		<p class="content">
			把你拉黑了，不再去关注你，再见我的青春！
		</p>
	</body>
</html>