数据库实训Day3

最新推荐文章于 2024-07-10 22:41:59 发布

好喜欢吃红柚子

最新推荐文章于 2024-07-10 22:41:59 发布

阅读量525

点赞数

分类专栏： Java与数据库实训文章标签：数据库 html css

本文链接：https://blog.csdn.net/weixin_45662399/article/details/122209900

版权

Java与数据库实训专栏收录该内容

12 篇文章 2 订阅

订阅专栏

定位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>

好喜欢吃红柚子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据库实训Day3

定位position<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type> .box{ height: 100px; width: 100px; background-color: #FFC0CB; } .relative{ position: re
复制链接

扫一扫