定位position

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type>
			.box{
				height: 100px;
				width: 100px;
				background-color: #FFC0CB;
			}
			.relative{
				position: relative;
				left: 100px;
				top: 50px;
				
			}
			.absolute{
				position: absolute;
				/* 实体度 */
				/* opacity: 0.2; */
				left: 0px;
				top: 0px;
			}
			.parent{
				height: 200px;
				width: 200px;
				background-color: gold;
				position: relative;
			}	
		</style>
	</head>
	<body>
		<!-- 定位
		 position的属性值：
		 1. static   非定位
		 
		 2. relative 相对定位
		 参照物：参照物为自身原来的位置
		 空间：占据原来所在的空间
		 
		 3. absolute 绝对定位
		 参照物：第一个非static定位的父组件，若找不到，参照物为HTML
		 空间：不占空间
		 
		 4. fixed    窗口定位
		 参照物：窗口
		 空间：不占空间
		 
		 定位需要：
		 1. 坐标 top left right 
		 2. 参照物
		 3. 是否占据空间
		 -->
		 
		 <div class="box relative">相对定位</div>
		
		 <div class="box absolute">绝对定位</div>
		  <div class="box">静态参照</div>
		  <div class="parent">
		  	<div class="box absolute">绝对定位</div>
		  </div>
	</body>
</html>

遮罩

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.coverbox{
				background-color: #FFFF00;
				line-height: 0px;
				position: relative;
				width: 200px;
				
			}
			.coverbox>img{
				width: 100%;
				border-radius: 10px;
			}
			.cover{
				background-color: black;
				position: absolute;
				top:100%;
				left:0px;
				height: 0%;
				width: 0%;
				opacity: 0.3;
				/* 添加动画，时间为0.5ms */
				transition: all 0.5s;
				border-radius: 10px;
			}
			/* 用父级组件的伪类控制子组件 */
			/* hover:鼠标悬浮组件,鼠标放上去就会改变 */
			/* hover后面要有空格 */
			
			.coverbox:hover .cover{
				height: 100%;
				top: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="coverbox">
			<img src='img/image/婚纱.jpg'>
			<div class="cover"></div>
		</div>
	</body>
</html>

jQuery练习

点击按钮颜色发生变化

点击按钮图片发生变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				height: 100px;
				width: 100px;
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn">按钮</button>
		<div class="box"></div>
		
		<fieldset>
			<legend>更换图片</legend>
			<button type="button" id="img_btn">更换图片</button>
			<img src="img/image/树.jpg" id="img1">
		</fieldset>
		
		<!-- 引入jQuery文件 -->
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			// 自定义代码
			// 点击按钮让div背景颜色发生变化
			
			// 选中ID为btn的组件，给他赋予一个点击事件
			$("#btn").click(function(){
				// 点击按钮后要做的事情
				$(".box").css({
					"background-color":"red",
					// 数字要加引号
					width:"100px",
					height:"150px",
					});
			});
			
			// 编辑代码实现，点击按钮更换图片
			$("#img_btn").click(function(){
				$("img").attr("src","img/image/婚纱.jpg");
			});
			
		</script>
	</body>
</html>

# 数据库 # html # css
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

avatar 腾讯云开发者社区
cover

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

avatar 腾讯云开发者社区

数据库 实验二 数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s

avatar 腾讯云开发者社区