今日千锋练习
!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>