HTML下（css选择器与左线练习处理）

最新推荐文章于 2023-12-11 21:32:42 发布

韶光不负

最新推荐文章于 2023-12-11 21:32:42 发布

阅读量231

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_47514459/article/details/117093909

版权

HTML 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

练习处理，对HTML下css选择器的练习进行整理

任务：
一，发光按键设置
二，艺术字
三，设置一个属性标签

写出相对应的css样式，写在css的文件夹中


*{
	margin: 0;
	padding: 0;
	
}
body {
	/* background-image:url(../img/李白.jpg); */
	
}
/* 发光按键 */
div.box{
		align :center;
		width: 150px;
		height: 20px;
		border-radius: 6px;
		/* 设置边脚60的弧度 */
		background-color: azure;
}		
		
div.box:hover{
	box-shadow: 3px 3px 3px red,
						3px -3px 3px red,
						-3px -3px 3px red,
						-3px 3px 3px red;		
}
dev.box:hover{
	color: aqua;
}
/*艺术字  */
.size{
	font-size: 35px;
	font-weight: bold;
	text-shadow: 2px 2px 1px red;
}
/* 首页标题 */
ol,ul{
	list-style: none;
}
ul.box1{
	width: 1300px;
	height: 40px;
	border: 1px solid red;
	text-align: center;
	line-height: 40px;
	
}
ul.box1>li{
	width: 120px;
	height: 45px;
	border: 1px solid red;
	background-color: #00FFFF;
	/* 设置背景颜色 */
	float: left;
	
}
ul.box1>li:hover{
	cursor: pointer;
	background-color: #F0FFFF;
}

html网页部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页</title>
		
		<link href="css/text.css" type="text/css" rel="stylesheet" />
		<!-- 将css中的样式导入html中 -->
					
	</head>
	<body>
		<div class="box" value="这是个发光按键">

		</div>
		<div>
			<p class="size"> 艺术字</p>
		</div>
		<div>
			<ul class="box1">
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>			
			</ul>
		</div>
	</body>
</html>

现象展示：
在这里插入图片描述

韶光不负

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
HTML下（css选择器与左线练习处理）

练习处理，对HTML下css选择器的练习进行整理任务：一，发光按键设置二，艺术字三，设置一个属性标签写出相对应的css样式，写在css的文件夹中*{ margin: 0; padding: 0; }body { /* background-image:url(../img/李白.jpg); */ }/* 发光按键 */div.box{ align :center; width: 150px; height: 20px; border-radius: 6p.
复制链接

扫一扫