2021-08-16

最新推荐文章于 2021-11-10 17:26:45 发布

Nil_cxc

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量67

点赞数 1

本文链接：https://blog.csdn.net/weixin_51923997/article/details/119742834

版权

定位

固定定位小技巧：固定在版心右侧位置

绝对定位的盒子居中

案例：定位的示例练习--淘宝轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			.tb-promo {
				position: relative;
				width: 520px;
				height: 280px;
				background-color: pink;
				margin: 100px auto;
			}
			.tb-promo img {
				width: 520px;
				height: 280px;
			}
			/* 并集选择器可以集体声明相同的样式 */
			.prev,
			.next {
				position: absolute;
				top: 50%;
				margin-top: -15px;
				width: 20px;
				height: 30px;
				background: rgba(0,0,0,.3);
				text-align: center;
				line-height: 30px;
				color: #fff;
				text-decoration: none;
			}
			.prev {
				/* position: absolute;
				top: 50%;
				margin-top: -15px; */
				left: 0;
				/* 加了绝对定位的盒子可以直接设置高度和宽度 */
				/* width: 20px;
				height: 30px;
				background: rgba(0,0,0,.3);
				text-align: center;
				line-height: 30px;
				color: #fff;
				text-decoration: none; */
				border-top-right-radius: 15px;
				border-bottom-right-radius: 15px; 
			}
			.next {
				/* position: absolute;
				top: 50%;
				margin-top: -15px; */
				right: 0;
				/* width: 20px;
				height: 30px;
				background: rgba(0,0,0,.3);
				color: #fff;
				text-align: center;
				line-height: 30px;
				text-decoration: none; */
				border-top-left-radius: 15px;
				border-bottom-left-radius: 15px;
			}
			.promo-nav {
				position: absolute;
				bottom: 15px;
				left: 50%;
				margin-left: -35px;
				width: 70px;
				height: 13px;
				background: rgba(255,255,255,.3);
				border-radius: 7px;
			}
			.promo-nav li {
				float: left;
				width: 8px;
				height: 8px;
				background-color: #fff;
				border-radius: 50%;
				margin: 3px;
			}
			.promo-nav .selected {
				background-color: #ff5000;
			}
		</style>
	</head>
	<body>
		<div class="tb-promo">
			<img src="images/tb.jpg" alt="">
			<!-- 左侧按钮箭头-->
			<a href="#" class="prev">&lt;</a>
			<a href="#" class="next">&gt;</a>
			<!-- 小圆点-->
			<ul class="promo-nav">
				<li class="selected"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>

元素的显示和隐藏

1.display显示隐藏元素，但是不保留位置

2.visibility显示隐藏元素，但是保留原来的位置

3.overflow溢出显示隐藏，但是只是对于溢出部分的部分处理

display属性

visibility属性

overflow属性

案例：土豆网鼠标经过显示遮罩

核心原理：（原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。）

遮罩的盒子不占有位置，就需要用绝对定位和display配合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.tudou {
				position: relative;
				width: 444px;
				height: 320px;
				background-color: pink;
				margin: 30px auto;
			}
			.tudou img {
				width: 100%;
				height: 100%;
			}
			.mask {
				/* 隐藏遮罩层 */
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.4) url(images/播放.png) no-repeat center;
			}
			/* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
			.tudou:hover .mask {
				/* 不是转化成块级元素的意思，而是显示元素 */
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tudou">
			<div class="mask"></div>
			<img src="images/td.jpg" alt="">
		</div>
		<div class="tudou">
			<div class="mask"></div>
			<img src="images/td.jpg" alt="">
		</div><div class="tudou">
			<div class="mask"></div>
			<img src="images/td.jpg" alt="">
		</div>
	</body>
</html>

字体图标

CSS三角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box-1 {
				width: 0;
				height: 0;
				border: 10px solid pink;
				margin: 100px auto;
			}
			.box-2 {
				width: 0;
				height: 0;
				margin: 150px auto;
				border: 10px solid transparent;
				border-top-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="box-1"></div>
		<div class="box-2"></div>
	</body>
</html>

Nil_cxc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-16

定位固定定位小技巧：固定在版心右侧位置绝对定位的盒子居中案例：定位的示例练习--淘宝轮播图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } li { list-style: none;
复制链接

扫一扫