执子手，到永恒

最新推荐文章于 2024-11-01 12:26:05 发布

Qinꦿ.๓

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量145

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_47541976/article/details/126127681

版权

我喜欢在背包装上风

带你一起看梦中草原的雾

每株草都有自己的名字

路过时高岗的树梢

燃烧山巅黄昏的温柔

我喜欢看有树的天空

树里装着刻满年轮的信

每种花都凋谢在彼岸

路过时星辰苍穹

缀满月色苍白的朦胧

我喜欢人间山河草木

给你捎去一小片春天的光

每只猫都躲在时光里

路过时蝴蝶昆虫

栖息森林茂盛的孤独

这就是我的时间

我喜欢这个时间上的一切

雾风、天空和山河草木

但你一定不知道

我只喜欢时间有你

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		img{
		border: 1px solid aqua;
			width: 200px;
			height: 200px;
		transform:translate(100%,20%);
    	transform: skew(10deg,20deg);
	
	transition: all 0.3s linear 0.5s;
		}
		img:hover{
			transform: scale(1.1);
			transform: scale(-10deg,-20deg);
			
		}
		
		body{
			font-family:宋体;
			background-color: #cccccc;
			margin: 0px auto;
			max-width: 900px;
			/*margin-left:80px ;*/
		 border: solid;
		 border-color: #FFFFFF;
		 }
	header{
		background-color: F47D31;
		display: block;
		color: #FFFFFF;
		text-align: center;
	}
	header h2{
		margin: 0px;
	}
	h1{
		font-size: 72px;
		margin: 0px;
	}
	h2{
		font-size: 24px;
		margin: 0px;
		text-align: center;
		color: #F47D31;
	}
	h4{
		color: #F47D31;
	background-color: #FFFFFF;
	-webkit-box-shadow: 2px 2px 20px #888;
	-webkit-transform: rotate(-45deg) ;
	-moz-box-shadow: 2px 2px 20px #888;
	-moz-transform:rotate(-45deg)  ;
	position: absolute;
	/*transform: translate(4px,8px);*/
	padding: 0px 150px;
	top: 50px;
	left: -120px;
	text-align: center;
	}
	nav{
		display: block;
		width: 25%;
		float: left;
	}
	nav a:link,nav a:visited{
		display: block;
		border-bottom: 3px solid #fff;
	padding: 10px;
	text-decoration: none;
	font-weight: bold;
	margin: 5px;
	}
	nav h3{
		margin: 15px;
		color: white;
	}
	#af{
		background-color: #888;
	}
	section{
		display: block;
		width: 50%;
		float: left;
	}
	article{
		background-color: #eee;
		display: block;
		margin: 10px;
		padding: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		-webkit-transform: rotate(-10px);
		-webkit-box-shadow:2px 2px 20px #888 ;
	-moz-box-shadow:2px 2px 20px #888;
	-moz-transform: rotate(-10deg);
	}
	article header{
		-webkit-border-radius:10px ;
		-moz-border-radius: 10px;
		border-radius: 10px;
		padding: 5px;
	}
	article footer{
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius:10px;
		padding: 5px;
	}
	article h1{
		font-size:18px;
	}
aside{
	display: block;
	width: 25%;
	float: left;
}
	aside h3{
		margin: 15px;
		color: white;
	}
	aside p{
		margin: 15px;
		color: white;
		font-weight: bold;
		font-style: italic;
	}
	footer{
		clear: both;
		display: block;
		background-color: #F47D31;
		color: #FFFFFF;
		text-align: center;
		padding: 15px;
	}
	footer h2{
		font-size: 14px;
		color: white;
	}
	a{
		color: #F47D31;
	}
	a:hover{
		text-decoration: underline;
	}
	#ad{
		color:#00FFFF ;
	padding-left: 20px;
	}
	</style>
	</head>
	<header>
		<h1>长相思.鸿雁无情</h1>
	    <h2>遇见</h2>
	    <h4>枫晴</h4>
	</header>
	<div id="af">
		<nav>
		<h3>导航</h3>	
		    <p id="ad">成功进入异地相逢</p>
		    <a href="http://music.163.com/mv/?id=10925701&userid=1495815024"target="qf_2_self">全时间最好的你</a>
			<a href="http://music.163.com/song?id=1449794966&userid=1495815024"target="_self">遇见</a>
			<a href="http://music.163.com/song?id=1449375131&userid=1495815024"target="_self">喜欢你</a>
			<a href="http://music.163.com/song?id=547812462&userid=1495815024"target="_self">情书</a>
			<a href="http://music.163.com/song?id=1452439191&userid=1495815024"target="_self">在一起嘛好不好</a>
		    <a href="http://music.163.com/song?id=1446568698&userid=1495815024"target="_self">我的女孩</a>
		    <a href=" http://music.163.com/song?id=175956&userid=1495815024"target="_self">想念</a>
		    <a href="http://music.163.com/song?id=1417136806&userid=1495815024"target="_self">慢慢等</a>
		    <img src="/tupian/QQ图片20200618122414.jpg" />
		    <img src="/tupian/QQ图片20200618122419.jpg" />
		</nav>
	<section>
		<article>
			<header>
				<h1>风之森</h1>
		        <h3>吴歌</h3>
			</header>
		<p>我喜欢在背包装上风</p>
		<p>带你一起看梦中草原的雾</p>
		<p>每株草都有自己的名字</p>
		<p>路过时高岗的树梢</p>
		<p>燃烧山巅黄昏的温柔</p>
		<p>我喜欢看有树的天空</p>
		<p>树里装着刻满年轮的信</p>
		<p>每种花都凋谢在彼岸</p>
		<p>路过时星辰苍穹</p>
		<p>缀满月色苍白的朦胧</p>
		<p>我喜欢人间山河草木</p>
		<p>给你捎去一小片春天的光</p>
		<p>每只猫都躲在时光里</p>
		<p>路过时蝴蝶昆虫</p>
		<p>栖息森林茂盛的孤独</p>
		<p>这就是我的时间</p>
		<p>我喜欢这个时间上的一切</p>
		<p>雾风、天空和山河草木</p>
		<p>但你一定不知道</p>
		<p>我只喜欢时间有你</p>
		<footer>
			<h2>像Doraeman一样，欢笑每一天</h2>
		</footer>
		</article>
	</section>
	<aside>
		<h3>触碰着遥远</h3>
		<p>思念</p>
	    <p>也许未曾相见</p>
	    <p>热恋</p>
	    <p>也许没有永远</p>
	    <p>心声把我们相连</p>
	    <p>衷肠互诉同病相怜</p>
	    <p>有缘</p>
	    <p>我们才能相见</p>
	    <p>心牵</p>
	    <p>才会互相想念</p>
	    <p>你的爱滋润心田</p>
	    <p>真情胜过蜜语甜言</p>
	    <p>从未触及你的笑脸</p>
	    <p>不曾亲吻你的眼帘</p>
	    <p>但你的影子却在心间</p>
	    <p>拨乱我的心弦</p>
	    <p>你不能走到我的身边</p>
	    <p>我亦无法把握明天</p>
	    <p>唯有遵从命运差遣</p>
	    <p>彼此想通心的源泉</p>
	    <p>芳草依依望明月</p>
	    <p>明月痴痴映芳园</p>
	    <p>你用甜甜的笑脸</p>
	    <p>我用瘦瘦的指尖</p>
	    <p>一起感受</p>
	    <p>触碰的遥远</p>
	</aside>
	<footer>
		<h2>喜你为疾，不介路远</h2>
	</footer>
	</div>
</html>