课堂练习1

最新推荐文章于 2024-08-14 15:56:32 发布

Qxxs

最新推荐文章于 2024-08-14 15:56:32 发布

阅读量31

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/2301_78442423/article/details/131118955

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body>div:first-child {
				border: 1px solid red;
				width: 100px;
				height: 100px;
				border-top-left-radius: 20%;
				border-bottom-right-radius: 20%;
			}

			body>div:nth-child(3) {
				border: 1px solid white;
				width: 100px;
				height: 100px;
				border-top-color: green;
				border-left-color: green;
			}

			body>span {
				display: inline-block;
				border: 1px solid blue;
				width: 100px;
				height: 100px;
				font-weight: bold;
				text-align: center;
				text-decoration: underline;
				line-height: 100px;
				font-size: 20px;
			}

			.ol_first>li {
				list-style: none;
			}

			.ol_first>li::before {
				content: "";
				display: inline-block;
				width: 5px;
				height: 5px;
				border-radius: 50%;
				border: 1px solid red;
				margin-right: 10px;
				background-color: red;
			}

			.ul_first>li:nth-child(even) {
				border: 1px solid blue;
				padding: 10px;
				margin: 10px;
			}

			.ol_second>* {
				border: 1px solid blue;
				padding: 10px;
				margin: 10px;
			}

			a:link {
				color: green;
				text-decoration: none;
			}

			a:visited {
				color: black;
			}

			a:hover {
				color: red;
				text-decoration: underline;
			}

			a:active {
				color: yellow;
			}

			.ol_second>div {
				position: absolute;
				bottom: 0px;
			}

			body>div:nth-of-type(3) {
				width: 100px;
				height: 50px;
				border: 4px solid skyblue;
				line-height: 50px;
				text-align: center;
				text-shadow: 5px 5px 3px palevioletred;
				box-shadow: 5px 5px 3px palegreen;
			}
		</style>
	</head>
	<body>
		<div></div>
		<span>哈哈哈哈</span>
		<div></div>
		<span></span>
		<ol class="ol_first">
			<li id="item1">子项1</li>
			<li id="item2">子项2</li>
			<li id="item3">子项3
				<ul class="ul_first">
					<li id="item21">子项21</li>
					<li id="item22">子项22</li>
					<li id="item23">子项23</li>
				</ul>
			</li>
		</ol>
		<ol class="ol_second">
			<li>子项31</li>
			<li>子项32</li>
			<div>div33</div>
			<a href="#">这是一个a链接</a>
		</ol>
		<div>button</div>
	</body>
</html>