【Web】鼠标焦点效果

园霸

已于 2022-03-10 09:11:49 修改

阅读量536

点赞数

分类专栏： Web 文章标签：前端 css css3

于 2022-03-03 15:36:51 首次发布

本文链接：https://blog.csdn.net/m0_46399726/article/details/123254916

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、基础知识

CSS的层叠性、继承性、重要性

层叠性：多个样式的情况下，最后面的样式被应用。

继承性：子标签继承父标签的属性

重要性：！important拥有最高权值

CSS的优先级

内联样式（权值为1000）> id选择器（权值100）（表示为#）> class选择器（权值10）（表示为.） > html标签选择器（权值1）> *权值0

块级元素和行内元素

块级元素

<!-- 块级元素 -->
		<h3>3级标题</h3>
		<p>段落</p>
		<div id="id">
			div
		</div>
		<div id="id">
			div
		</div>
		<ul>
			<li>li</li>
		</ul>

行内元素

<!-- 行内元素 -->
		<a href="">百度</a>
		<a href="">百度</a>
		<a href="">百度</a>
		<span>span</span>

行内元素设置宽高不起作用，需要变块级元素

a{
	/* 行内元素变块级元素,行内元素设置宽高不起作用 */
	display: block;
}

行内块，既能在一行，又能设置宽高

div{
		/* 行内块，既能在一行，又能设置宽高 */
		display: inline-block;
		background-color: #0000FF;
		width: 200px;
		height: 50px;
		/* 在中间 */
		text-align: center;
}

盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			*{
				/* 外边距 */
				margin: 0px;
				/* 内边距 */
				padding: 0;
			}
			div{
				background-color: #ccc;
				width: 300px;
				height: 100px;
				/* 上右下左 */
				margin: 50px 30px 20px 10px;
				/* 上下50，左右30 */
				margin: 50px 30px;
				/* 1像素实线红色边框，没有顺序 */
				border: 1px solid red;
				margin: auto;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<div id="id">
			div
		</div>
	</body>
</html>

盒子居中：
margin：上下 auto
上下按需设置，左右auto

左右居中

text-align: center;

上下居中

/* 上下居中 把height和line-height相同*/
				line-height: 50px;

去掉li前面会显示的点

li{
    /* 去掉list的点 */
	list-style: none;
}

去掉链接a的下划线

a{
	/* 去掉a的下划线 */
	text-decoration:none;
	/* 链接显示的字是黑色 */
	color: black;
}

二、作业：鼠标焦点效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

			li:nth-child(2n+1){
				background-color: #CCCCCC;
			}
			li:nth-child(2n){
				background-color: #F0F8FF;
			}
			li:hover{
				background-color: #7FFFD4;
				color: aliceblue;
			}
			li{
				/* display: block; */
				width: 200px;
				height: 50px;
				text-align: center;
				margin-top: 25px;
				/* 上下居中 把height和line-height相同*/
				line-height: 50px;
				/* 去掉list的点 */
				list-style: none;
			}
			a{
				/* 去掉a的下划线 */
				text-decoration:none;
				/* 链接显示的字是黑色 */
				color: black;
			} 
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">6</a></li>
			</ul>
		</div>
		
	</body>
</html>

园霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web】鼠标焦点效果

一、基础知识CSS的层叠性、继承性、重要性层叠性：多个样式的情况下，最后面的样式被应用。继承性：子标签继承父标签的属性重要性：！important拥有最高权值CSS的优先级内联样式（权值为1000）> id选择器（权值100）（表示为#）> class选择器（权值10）（表示为.） > html标签选择器（权值1）> *权值0块级元素和行内元素块级元素 <h3>3级标题</h.
复制链接

扫一扫

专栏目录