HTML 通配符选择器 CSS进阶

最新推荐文章于 2022-06-26 20:59:56 发布

玖夜Kty

最新推荐文章于 2022-06-26 20:59:56 发布

阅读量846

点赞数

CC 4.0 BY-SA版权

分类专栏： web html 前端文章标签： css html html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_44587107/article/details/120592857

web 同时被 3 个专栏收录

47 篇文章

订阅专栏

html

44 篇文章

订阅专栏

前端

41 篇文章

订阅专栏

本文探讨了HTML练习中的重点，特别是CSS3的通配符选择器的运用，详细介绍了如何有效地使用该选择器来提升样式应用的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML练习

主要收获：css3通配符选择器的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			a {
				text-decoration: none;
			}

			a:hover {
				text-decoration: underline;
			}

			#hr {
				background-color: red;
				width: 300px;
				height: 7px;
				position: relative;
				bottom: 10px;
				left: 10px;
			}
			h2{
				position: relative;
				right: 120px;
				-moz-box-pack: start;
				-webkit-box-pack: start;
			}
			.diver3 {
				position: relative;
			}

			.diver1 {
				width: 320px;
				border: #d0d0d0 1px solid;
				padding-bottom: 20px;
				padding-right: 20px;
				position: fixed;
				left: 50%;
				top: 30%;
				transform: translateX(-50%);
			}

			.diver1 .div4 {
				display: none;
			}

			.diver1:hover .div4 {
				display: block;
			}

			input[type*="sub"] {
				border: #9f9f9f solid 1px;
				display: block;
				margin-top: 15px;
				width: 60px;
				height: 30px;
				background-color: #D0D0D0;
			}
			input[type*="sub"]:hover{
				background-color: #dedede;
				color: #FF0000;
			}
			.div_main{
				width: 100%;
				height: 100%;
				align-content: center;
			}
		</style>
		<div class="div_main" align="center">
			<div id="" class="diver1">
				<h2>&nbsp;搜索</h2>
				<div id="hr" class="diver2">

				</div>
				<div id="" class="diver3" align="center">


					<form action="#" method="post">
						<input type="text" name="text" id="" value="" placeholder="请输入关键字" /><label for=""></label>
						<input type="submit" value="搜索" />
					</form>

					<div class="div4" id="div4"><br>
						<a href="">娱乐</a>
						<a href="">综艺</a>
						<a href="">新闻</a>
						<a href="">购物</a><br>
						<a href="">理财</a>
						<a href="">电影</a>
						<a href="">游戏</a>
						<a href="">彩票</a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>