HTML基础知识总结二

海梦在飘扬

已于 2023-04-19 23:30:00 修改

阅读量927

点赞数

分类专栏： HTML\CSS 文章标签： html css 前端

于 2023-04-17 18:15:57 首次发布

本文链接：https://blog.csdn.net/N16696796429/article/details/130203304

版权

HTML\CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1、position定位
2、悬停效果和点击效果
- 1、鼠标悬停效果（hover）
- 2、鼠标点击效果（active）
3、页面内跳转效果（div的跳转和table表格的跳转）
4、基于target属性的图像切换效果
5、背景颜色和透明的
6、背景图片设置

1、position定位

相对定位（Relative Positioning）：使用 position:relative; 属性可以将元素相对于其原来的位置进行定位，通过 top、left、bottom 和 right 属性来调整元素的位置。
绝对定位（Absolute Positioning）：使用 position:absolute; 属性可以将元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的 body 元素进行定位。
固定定位（Fixed Positioning）：使用 position:fixed; 属性可以将元素固定在页面的一个位置，不随页面滚动而移动。

运用示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位测试</title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				background-color: burlywood;
				
				position: relative;
				left: 100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述
通过改变left和top的参数大小，来改变div的位置。其他定位一样，只需要改变position的属性即可。只是定位参照的不同，定位功能比较常用，可以自己尝试一下定位效果。

2、悬停效果和点击效果

鼠标悬停和点击效果可以分别通过hover和active来实现。

1、鼠标悬停效果（hover）

示例：
为标签a中的字体添加悬停效果

a:hover{
	color: red;
}

当鼠标悬停在a标签中的文字上面时，文字颜色将发生改变，变为红色。

2、鼠标点击效果（active）

active 用于设置当鼠标按下时的样式，可以使用它为元素添加点击效果，比如按钮的按下效果。

button:active {
  background-color: blue;
}

这个例子表示当按下按钮时，按钮的背景颜色将变为蓝色。

此外，我们还可以结合 :hover 和 :active 伪类选择器创建更复杂的效果。示例代码：

a:hover {
  color: red;
}

a:active {
  color: green;
}

这个例子表示当鼠标悬停在链接上时，字体颜色将变为红色；当链接被点击时，字体颜色将变为绿色。
总之，使用 :hover 和 :active 伪类选择器来为元素添加鼠标悬停和点击效果是很简单的，只需在 CSS 样式表中为需要添加效果的元素设置相应的样式即可。

3、页面内跳转效果（div的跳转和table表格的跳转）

1、div页内跳转

简单的说，就是为div设置id，超链接通过该id可以直接在页面内跳转到该id处。
简单示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>页内跳转示例</title>
	<style type="text/css">
		.container {
			height: 500px;
			overflow-y: scroll;
		}

		.section {
			height: 300px;
			margin: 20px;
			padding: 20px;
			background-color: #efefef;
		}
	</style>
</head>
<body>

<div class="container">

	<div class="section" id="section1">
		<h2>Section 1</h2>
		<p>海梦在飘扬1</p>
		<p><a href="#section2">Go to section 2</a></p>
	</div>

	<div class="section" id="section2">
		<h2>Section 2</h2>
		<p>海梦在飘扬2</p>
		<p><a href="#section3">Go to section 3</a></p>
	</div>

	<div class="section" id="section3">
		<h2>Section 3</h2>
		<p>海梦在飘扬3</p>
		<p><a href="#section4">Go to section 4</a></p>
	</div>

	<div class="section" id="section4">
		<h2>Section 4</h2>
		<p>海梦在飘扬4</p>
		<p><a href="#section1">Back to section 1</a></p>
	</div>

</div>

</body>
</html>

2、table表格的页面内跳转

与div类似，同样时通过id进行跳转。
语法格式：

<a href="#section1">
<table id="section1">

a标签为超链接，table为表格，点击超链接将会在页面内跳转到该表格处。

3、只通过a标签实现页面内的跳转

与id类似。这里时通过两个a标签进行页面内的跳转。第一个a标签为超链接，第二个a标签类似id。
示例：

<a href="#no1">
<a href="" name="no1">

第二个a标签的超链接为空，通过点击第一个超链接将跳转到第二个a标签的位置。第二个a标签放置在哪里，页面就会跳转到哪里。

4、基于target属性的图像切换效果

<!DOCTYPE html>
<html>
<head>
	<title>图像切换示例</title>
	<style type="text/css">
		.newimg{
			position: absolute;
			left: 0px;
			top: 0px;
			display: none;
			margin: auto;
		}
		
		.newimg:target{
			display: block;
		}
	</style>
</head>
<body>

<p><a href="#img1">显示图片 1</a> <a href="#img2">显示图片 2</a></p>

<img src="image1.jpg" class="newimg" id="img1" />
<img src="image2.jpg" class="newimg" id="img2" />

</body>
</html>

这段代码实现了一个基于target属性的图像切换效果。当用户点击具有 id 属性的链接时，页面会滚动到相应位置，并显示对应的图片。

首先，我们将 class 属性设置为 newimg 的元素的 position 属性设置为 absolute,即绝对定位，left 和 top 属性设置为 0px，使其固定在页面左上角。接着，我们将 display 属性设置为 none，使得图片在页面加载时不可见。最后，设置 margin 为 auto，使得图片水平居中。

然后，我们使用 CSS :target 伪类来监听具有 id 属性的链接是否被点击。当链接被点击时，该链接的对应元素（即包含在 href 属性中的 id 值所对应的元素）会成为当前文档片段标识符，此时该元素就会与 :target 选择器匹配并且display 属性被设置为 block，使得图片变为可见状态。

这样，我们就可以切换不同的图片。

5、背景颜色和透明的

这里以a标签为示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位测试</title>
		<style type="text/css">
			.show{
			display: block;
			width: 70px;
		 	background-color: rgb(0,0,0);
		 	opacity: 0.5;/*不透明度*/
		 	font-style: normal;
		 	font-size: 12px;
		 	padding: 0 3px;
		 	color: white;
		 	margin: auto;
		 	
			}
		</style>
	</head>
	<body>
		
		<a class="show">海梦在飘扬</a>
	</body>
</html>

这里为什么使用display: block;这是因为只有这样才能对a标签进行定位。
运行结果：
在这里插入图片描述

6、背景图片设置

为body设置背景图片，示例：

.body{
background-image: url(img/ibg.png);
background-repeat: no-repeat;
}

**为什么使用background-repeat **

当使用 background-image 属性为 body 元素设置背景图片时，如果图片大小小于网页窗口的大小，那么该背景图片会重复出现，以填满整个 body 元素的背景。

这是因为 background-repeat 属性默认值为 repeat，即将背景图片水平和垂直方向都重复平铺。如果想要避免背景图片重复出现，可以将该属性的值设置为 no-repeat。

除了将 background-repeat 属性的值设置为 no-repeat，还可以使用其他的可选值来控制背景图片的重复方式。常用的可选值包括：

repeat-x：只在水平方向上重复平铺背景图片。
repeat-y：只在垂直方向上重复平铺背景图片。
space：将背景图片平均分布在所有方向上，使得图片不能完全填充整个区域。
round：按比例放大或缩小图片，以填充整个区域。

有哪些写的不对的，大家可以评论，共同进步！！！

海梦在飘扬

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础知识总结二

相对定位（Relative Positioning）：使用 position:relative;属性可以将元素相对于其原来的位置进行定位，通过 top、left、bottom 和 right 属性来调整元素的位置。绝对定位（Absolute Positioning）：使用 position:absolute;属性可以将元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的 body 元素进行定位。
复制链接

扫一扫