定位锚点

最新推荐文章于 2023-10-02 20:28:26 发布

风华正茂呀

最新推荐文章于 2023-10-02 20:28:26 发布

阅读量372

点赞数

分类专栏： html+CSS学习日记文章标签： css html

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104346062

版权

html+CSS学习日记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.元素的定位设置

position属性：定义建立元素布局所用的定位机制
【语法】：position:static/absolute/relative/fixed
说明：
static:默认值。没有定位
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left",“top”,“right”,“bottom"属性进行规定
relative：生成相对定位的元素，相对于其正常位置进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left”,“top”,“right”,"bottom"属性进行规定
z-index属性：检索或设置对象的层叠顺序
【语法】：z-index:auto/number
说明：
auto：默认值。遵从其父对象
number：无单位的整数值。可为负数，较大的number值会覆盖在较小的number值之上，仅作用于为relative或absolute时

2.锚点链接

锚点链接：是网页制作中超级链接的一种，又叫命名锚记，命名锚记及像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍
　　设置锚点链接的方法：

给元素定义命名锚记名
语法：<标记 id=“命名锚记名”></标记>
命名锚记链接
语法：<a href=“#命名锚记名称”></a>

这给个例子：纯用css做的一个轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				display: block;
				width: 600px;
				height: 400px;
			}
			.box{
				width: 600px;
				height: 400px;
				border: 1px solid red;
				margin: 200px ;
				position: relative
				
			}
			.btn a{
				
				width: 20px;
				height: 20px;
				background-color: aquamarine;
			
				float: left;
				margin: 5px;
				text-align: center;
				line-height: 20px;
				text-decoration: none;
			}
			.btn{
				position: absolute;
				left: 450px;
				top: 350px;
			}
			.list{
				width: 600px;
				height: 400px;
				overflow: hidden;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="btn">
				
			<a href="#1">1</a>
			<a href="#2">2</a>
			<a href="#3">3</a>
			<a href="#4">4</a>
			</div>
			<div class="list">
				<img src="img/img%20(1).jpg" id="1">
				<img src="img/img%20(2).jpg" id="2">
				<img src="img/img%20(4).jpg" id="3">
				<img src="img/img%20(3).jpg" id="4">
			</div>
			
		</div>
	</body>
</html>

风华正茂呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位锚点

1.元素的定位设置position属性：定义建立元素布局所用的定位机制【语法】：position:static/absolute/relative/fixed说明：static:默认值。没有定位absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left",“top”,“right”,“bottom"属性进行规定relative：生...
复制链接

扫一扫

专栏目录