HTML5+CSS练习题-3

廖王八

于 2022-08-20 11:37:52 发布

阅读量344

点赞数 3

分类专栏： HTML 文章标签： html html5 css

本文链接：https://blog.csdn.net/ljl17880248619/article/details/126398931

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			a {text-decoration: none;}
			body {
				background:url(b-ssl.duitang-2.jpeg);
				background-size: cover;
				background-repeat:no-repeat ;
				background-attachment: fixed;
			}
			.content {
				width: 900px;
				height: 500px;
				margin: 200px auto 0 auto;
				border-radius: 10px;
				background-color: whitesmoke;
				transition: all 1.0s;
				opacity: 0.7;
			}
			.content img {
				float: left;
				width: 200px;
				height: 200px;
				margin: 150px 0 0 80px;
				border-radius: 100px;
			}
			.content:hover {
				box-shadow: 0px 0px 20px orange;
			}
			.content_r {
				float: right;
				width: 500px;
				margin: 80px 60px 0 0;
				/*background-color: pink;*/
			}
			.content_l {
				float: left;
				width: 100%;
				text-align: center;
			}
			.content_l h5 {font-size: 17px;}
			.c {
				margin-top: 10px;
				color: #1F2023;
				font-size: 18px;
			}
			.zff_1 {
				color: #4855EC;
				font-size: 18px;
			}
			.ljl {
				color: deeppink;
			}
			.yyy {
				margin-top: 30px;
			}
			.yyy a {
				display: block;
				float: left;
				width: 120px;
				height: 45px;
				margin: 5px 5px 0 0;
				/*	padding: 0 15px;*/
				color: #fff;
				line-height: 45px;
				transition: all 0.8s;
				/*	background-color: deeppink;*/
			}
			.yyy a:hover {background-color:palevioletred;}
			.ljl_1 {background-color: deeppink;}
			.h {background-color: dodgerblue;}
			.m {background-color: magenta;}
			.o {background-color: orange;}
			.b{background-color: darkgreen;}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="mmexport1641303021273.jpg" alt="">
			<div class="content_r wy">
				<div class="content_l wy">
					<h2>Hi~ 我是小汤圆， Welcome here ！</h2>
					<p class="c">欢迎来到我的主页，一位热爱编程的小渣渣~</p>
					<p class="c">爱好计算机，会去自学一些感兴趣的东西 !</p>
					<br>
					<p class="zff_1">All things come to those who wait.</p>
					<p class="zff_1">　　苍天不负有心人</p>
					<br>
					<p class="ljl">永远不要低估你改变自我的能力！</p>
					<p class="ljl">Never underestimate your power to change yourself!</p>
					<div class="yyy">
						<a href="#" class="h">官网</a>
						<a href="https://baike.baidu.com/item/%E7%8E%8B%E6%BA%90/5475062?fr=aladdin" class="b">QQ群</a>
						<a href="https://baike.baidu.com/item/%E7%8E%8B%E6%BA%90/5475062?fr=aladdin" class="m">个人博客</a>
						<a href="https://baike.baidu.com/item/%E7%8E%8B%E6%BA%90/5475062?fr=aladdin" class="o">网易云音乐</a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>