Web Day3

已于 2023-09-11 20:33:45 修改
阅读量47 收藏
点赞数
文章标签： 前端
于 2023-09-09 02:15:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51944132/article/details/132769961
版权

Web

day3_2023.9.8

CSS中隐藏元素属性

display 指定应如何显示元素。

none ： 隐藏

block ：显示

visibility 指定元素是否应该可见。

visible ： 显示

hidden ：隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				width: 100px;
				height: 100px;
				background: #b3dbff;
				/* display: none; */
				visibility: hidden;
			}
			#div2{
				width: 100px;
				height: 100px;
				background: #f185ff;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<div id="div2">
			
		</div>
	</body>
</html>

CSS盒子模型

CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色

常用的属性：

border 简写属性，在一条声明中设置所有边框属性。

border-color 简写属性，设置四条边框的颜色。

border-radius 简写属性，可设置圆角的所有四个 border-radius 属性。

border-style 简写属性，设置四条边框的样式。

border-width 简写属性，设置四条边框的宽度。

border-bottom 简写属性，在一条声明中设置所有下边框属性。

border-bottom-color 设置下边框的颜色。

border-bottom-style 设置下边框的样式。

border-bottom-width 设置下边框的宽度。

border-left 简写属性，在一条声明中设置所有左边框属性。

border-left-color 设置左边框的颜色。

border-left-style 设置左边框的样式。

border-left-width 设置左边框的宽度。

border-right 简写属性，在一条声明中设置所有右边框属性。

border-right-color 设置右边框的颜色。

border-right-style 设置右边框的样式。

border-right-width 设置右边框的宽度。

border-top 简写属性，在一条声明中设置所有上边框属性。

border-top-color 设置上边框的颜色。

border-top-style 设置上边框的样式。

border-top-width 设置上边框的宽度。

CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 100px;
				background-color: aquamarine;
				border: 1px solid red;
				/* border-top: 10px solid blue; */
				/* border-bottom: 10px solid orange; */
				/* border-radius: 100px; */
				/* border-top-left-radius: 200px; */
				/* border-top-right-radius: 200px; */
				border-radius: 20px  40px;
				border-radius: 20px  40px  60px;
				border-radius: 20px  40px  60px 80px;
				border-radius: 10px;
				
				/* 外边距 */
				/* margin: 30px; */
				/* margin: 30px 60px; */
				/* margin: 30px 60px 90px; */
				/* margin: 30px 60px 90px 120px; */
				/* margin-top: 50px;
				margin-left: 30px; */
				/* 通过margin让块居中 */
				margin: 20px auto;
				
				/* 内边距 */
				/* 默认是将内边距大小算入块的整个大小的 */
				padding: 50px;
				padding: 50px 80px;
			}
			p{
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div>
			文本
		</div>
		<div>
			文本内容
		</div>
		<p>文本内容</p>
	</body>
</html>

练习
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				list-style: none;
			}
			li{
				float: left;
				width: 100px;
				height: 50px;
				border-radius: 50px;
				margin-left: 10px;
				text-align: center;
				line-height: 50px;
			}
			li:first-child,li:nth-child(2){
				background-color: orangered;
				color: #fff;
				font-family: "宋体";
				font-size: 20px;
				font-weight: 800;
			}
			li:nth-child(2){
				background-color: orange;
			}
			li:last-child{
				border: 1px solid orange;
				color: orangered;
				font-family: "宋体";
				font-size: 20px;
				font-weight: 800;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>登录</li>
			<li>注册</li>
			<li>开店</li>
		</ul>
	</body>
</html>
CSS 尺寸属性

height 设置元素的高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				min-height: 200px;
				background-color: aquamarine;
			}
			p{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<div>
			<p></p>
		</div>
	</body>
</html>
CSS 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

outline 简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。

outline-color 设置轮廓的颜色。

outline-offset 指定轮廓与元素的边缘或边框之间的空间。

outline-style 设置轮廓的样式。

outline-width 设置轮廓的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 50px;
				background-color: skyblue;
				border: 2px solid red;
				outline: 5px solid blue;
				/* outline-offset: 10px; */
				margin-bottom: 20px;
			}
			input{
				outline: none;
				/* border: none; */
			}
		</style>
	</head>
	<body>
		<div></div>
		
		<input type="text">
		
	</body>
</html>

练习搜索框
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				width:600px;
				height: 40px;
				border: 2px solid orangered;
				padding: 2px;
				border-radius: 40px;
			}
			p{
				float: left;
				height: 40px;
				margin-left: 20px;
				line-height: 40px;
				margin-top: 0;
				margin-bottom: 0;
			}
			
			.div2{
				float: left;
				margin: 20px 3px 0;
				width: 0;
				height: 0;
				border-width: 5px;
				border-style: solid;
				border-color:#bababa transparent transparent transparent;
			}
			input{
				border: none;
				outline: none;
				height: 35px;
				width: 400px;
				border-left:1px solid #dfdfdf ;
				padding-left: 10px;
			}
			button{
				float: right;
				height: 40px;
				width: 80px;
				border-radius: 40px;
				border: none;
				background-color: orange;
				color: #fff;
				font-size: 20px;
				font-weight: 800;
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		
		<div class="div1">
			<p>宝贝</p>
			<div class="div2"></div>
			<input type="text" placeholder="行李箱">
			<button>搜索</button>
		</div>
		
	</body>
</html>

CSS Box Sizing 标准盒子模型

box-sizing属性，用来设置盒子模型计算宽高的实际方式

值：

content-box 根据设置宽高值 + 内边距 + 边框 ，完成最终的宽高的显示

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box 根据实际设置的宽高，显示宽高

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。

CSS 布局2 - position 属性

css中的布局方式 ：

1，文档流 ： 默认情况，从上到下依次布局，块级元素独占一行，行内并排显示，直到遇到边界自动换行，如果有浮动，满足浮动后，其他的代码仍然见缝插针

2，定位 ：按照用户自己的需要，给元素定位到指定位置

position 属性常用的值

static

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

relative

元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。

fixed

元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

absolute

元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动

sticky

元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 2000px;
				padding-top: 100px;
				background-color: aquamarine;
				/* position: relative; */
				/* top: 50px; */
				/* left: 50px; */
			}
			p{
				width: 100px;
				height: 100px;
				background-color: red;
				/* position: relative; */
				/* position: fixed; */
				/* position: absolute; */
				/* top: 50px; */
				/* left: 50px; */
				position: sticky;
				top: 20px;
				
			}
			h1{
				width: 100px;
				height: 100px;
				background-color: blue;
				/* position: relative; */
				/* position: absolute; */
				top: 50px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
			<h1></h1>
		</div>
	</body>
</html>

z-index 属性指定定位元素的显示顺序
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				overflow: auto;   
				/* overflow: hidden; */
				/* overflow: scroll; */
				/* overflow: visible; */
			}
		</style>
	</head>
	<body>
		<div>
			文本内容
			文本内容
			文本内容
			文本内容
			文本内容
			文本内容
			文本内容
			文本内容
		</div>
	</body>
</html>

Flex布局

参考网址

容器和项目的概念

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。

容器常用的属性

flex-direction 属性决定主轴的方向（即项目的排列方向）

取值：flex-direction:row | row-reverse | column | column-reverse;

它可能有四个值

row（默认值）：主轴为水平方向，起点在左端

row-reverse:主轴为水平方向，起点在右端

column:主轴为垂直方向，起点在上沿

column-reverse:主轴为垂直方向，起点在下沿

flex-wrap 属性定义，如果一条轴线 排不下，如何换行

它可能去三个值。

（1）nowrap（默认）：不换行

（2）wrap:换行，第一行在上方

（3）wrap-reverse:换行，在第一行的下方

flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap

justify-content 属性定义了项目在主轴上的对齐方式

它可能取5个值，具体对齐方式与轴的方向有关。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between:两端对齐，项目之间的间隔都相等

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 属性定义项目在交叉轴上如何对齐

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上之下。

flex-start：交叉轴的起点对齐

flex-end:交叉轴的终点对齐

center：交叉轴的中点对齐

baseline：项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

项目的属性

6个属性设置在项目上。

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow 属性定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，改项目将缩小。

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间

flex 属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#mydiv{
				width: 800px;
				height: 500px;
				background-color: #befaff;
				border: 1px solid red;
				display: flex;
				/* flex-direction: row; */
				/* flex-direction: row-reverse; */
				/* flex-direction: column; */
				/* flex-direction: column-reverse; */
				
				/* flex-wrap: nowrap; */
				/* flex-wrap: wrap; */
				/* flex-wrap: wrap-reverse; */
				
				/* flex-flow: row-reverse wrap; */
				
				/*justify-content: flex-start;  /*默认值*/
				/* justify-content: flex-end; */
				/* justify-content: center; */
				/* justify-content: space-around; */
				/* justify-content: space-between; */
				
				/* align-items: flex-start; */
				/* align-items: flex-end; */
				align-items: center;
				/* align-items: baseline; */
				/* align-items: stretch; */
				
				/* align-content: flex-start; */
				/* align-content: flex-end; */
				/* align-content: center; */
				/* align-content: space-around; */
				/* align-content: space-between; */
				/* align-content: stretch; */
			}
			div{
				width: 100px;
				height: 100px;
			}
			.div1{
				/* order: 1; */
				/* flex-grow: 1; */
				/* flex-shrink: 2; */
			}
			.div2{
				/* order: 3; */
				/* flex-grow: 2; */
				/* flex-shrink: 5; */
			}
			.div3{
				/* order: 5; */
				/* flex-grow: 3; */
				flex-basis: 300px;
				/* align-self: flex-start; */
			}
			.div4{
				/* order: 4; */
			}
			.div5{
				/* order: 2; */
			}
		</style>
	</head>
	<body>
		<div id="mydiv">
			<div style="background:red;" class="div1 test">1</div>
			<div style="background:blue;" class="div2 test">2</div>
			<div style="background:green;" class="div3 test">3</div>
			<div style="background:orange;" class="div4 test">4</div>
			<div style="background:yellow;" class="div5 test">5</div>
		</div>
	</body>
</html>

CSS box-shadow 属性

box-shadow: h-shadow v-shadow blur spread color inset;
在这里插入图片描述

CSS渐变

CSS 定义了两种渐变类型：

线性渐变（向下/向上/向左/向右/对角线）

径向渐变（由其中心定义）

线性渐变

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

线性渐变 - 从上到下（默认）background-image: linear-gradient(red, yellow);

线性渐变 - 从左到右 background-image: linear-gradient(to right, red , yellow);

线性渐变 - 对角线 background-image: linear-gradient(to bottom right, red, yellow);

使用角度 background-image: linear-gradient(angle, color-stop1, color-stop2);

background-image: linear-gradient(-90deg, red, yellow);

使用多个色标 background-image: linear-gradient(red, yellow, green);

使用透明度 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复线性渐变 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

CSS 径向渐变

径向渐变由其中心定义。

语法

background-image: radial-gradient(shape size at position, start-color, …, last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心。

径向渐变-均匀间隔的色标（默认）

background-image: radial-gradient(red, yellow, green);

径向渐变-不同间距的色标

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

设置形状

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）

background-image: radial-gradient(circle, red, yellow, green);

Css变形动画

CSS 2D、3D 转换

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。
常见的值
none 定义不进行转换。 测试
translate(x,y) 定义 2D 转换。 测试
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。 测试
translateY(y) 定义转换，只是用 Y 轴的值。 测试
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: skyblue;
				/* transform: translate(10px,20px); */
				/* transform: translateX(20px); */
				/* transform: translateY(30px); */
				/* transform: translate3d(20px,30px,40px); */
				/* transform: scale(0.5); */
				/* transform: scale(1.5,0.5); */
				/* transform: scaleX(0.5) ; */
				/* transform: scaleY(0.5) ; */
				/* transform: rotate(45deg); */
				transform: rotateX(45deg);
				transform: rotateY(45deg);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
CSS 过渡

CSS 过渡允许您在给定的时间内平滑地改变属性值。
transition 简写属性，用于将四个过渡属性设置为单一属性。
transition-delay 规定过渡效果的延迟（以秒计）。
transition-delay: time;
transition-duration 规定过渡效果要持续多少秒或毫秒。
transition-duration: time;
transition-property 规定过渡效果所针对的 CSS 属性的名称。
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-timing-function 规定过渡效果的速度曲线。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: skyblue;
				/* transform: translate(10px,20px); */
				/* transform: translateX(20px); */
				/* transform: translateY(30px); */
				/* transform: translate3d(20px,30px,40px); */
				/* transform: scale(0.5); */
				/* transform: scale(1.5,0.5); */
				/* transform: scaleX(0.5) ; */
				/* transform: scaleY(0.5) ; */
				/* transform: rotate(45deg); */
				/* transform: rotateX(45deg);
				transform: rotateY(45deg);
				transform: rotateZ(45deg); */
			}
			div:hover{
				transition-property: all;
				transform:translate(150px,50px) scale(1.5);
				background: orangered;
				transition-delay: 1s;
				transition-duration: 3s;
				transition-timing-function: ease;
				transition-timing-function: linear;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
CSS 动画

CSS 可实现 HTML 元素的动画效果
如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
关键帧：
@keyframes 规则
如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。
语法1：
@keyframes 动画名称 {
from {background-color: red;}
to {background-color: yellow;}
}
语法2：
/* 动画代码 */
@keyframes 动画名 {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
动画属性：
animation 设置所有动画属性的简写属性。
animation-delay 规定动画开始的延迟。
animation-direction 定动画是向前播放、向后播放还是交替播放。
在这里插入图片描述
animation-duration 规定动画完成一个周期应花费的时间。
animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count 规定动画应播放的次数。
在这里插入图片描述
animation-name 规定 @keyframes 动画的名称。
animation-play-state 规定动画是运行还是暂停。
animation-timing-function 规定动画的速度曲线。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 先定义关键帧 */
			@keyframes animatetest{
				0%{background: #93daff; transform:translate(0px,0px) rotateZ(0deg);}
				/*25%{background: #ee8eff; transform: rotateZ(360deg); left: 200px;top: 0;}
				50%{background: #a4ff79; transform: rotateZ(720deg); top: 200px;left: 200px;}
				75%{background: #ffd1aa; transform:  rotateZ(360deg);left: 0;top: 200px;}
				100%{background: #93daff; transform: rotateZ(0deg); top: 0;left: 0;}*/
				25%{background: #ee8eff; transform:translate(200px,0px) rotateZ(360deg);}
				50%{background: #a4ff79; transform:translate(200px,200px) rotateZ(720deg);}
				75%{background: #ffd1aa; transform:translate(0px,200px)  rotateZ(360deg);}
				100%{background: #93daff; transform:translate(0px,0px) rotateZ(0deg);}
			}
			div{
				width: 100px;
				height: 100px;
				background: #93daff;
				animation-name: animatetest;
				animation-delay:1s;
				animation-duration:5s;
				animation-iteration-count:infinite;
				animation-timing-function: ease;
				animation-direction:alternate;
			}	
			
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 先定义关键帧 */
			@keyframes animatetest{
				0%{background: #93daff; transform:translate(0px,0px) rotateZ(0deg);}
			
				25%{background: #ee8eff; transform:translate(0px,0px) rotateZ(30deg);}
				50%{background: #a4ff79; transform:translate(400px,0px) rotateZ(0deg);}

				100%{background: #93daff; transform:translate(0px,0px) rotateZ(-360deg);}
			}
			div{
				width: 80px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				color:#fff;
				font-size: 25px;
				font-weight: 900;
				background: #93daff;
				border-radius: 5px;
				animation-name: animatetest;
				animation-delay:1s;
				animation-duration:5s;
				animation-iteration-count:infinite;
				animation-timing-function: ease;
				/* animation-direction:alternate; */
			}	
			
		</style>
	</head>
	<body>
		<div>
			CSS
		</div>
	</body>
</html>
丨陈墨瞳丨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
香港Web3媒体：Techub News
TechubNews的博客
05-29 1300
同时，大会还得到了Solana Foundation、Chainlink Labs、数码港、0G、Manta Network、MANTLE、HUAWEI、Vertex、Google Cloud、AUROS、J17、SNZ、JDI、Blockchain、ScalingX、BeL2、Chakra Chain、Web3MQ、dappOS、Axiomesh、Jasper Vault、CUSTONOMY、zk.Link、PublicAI 等众多行业领军企业的宝贵合作支持。Big Demo Day每月举办一次。
XCTF-WEB题day3
总有妖怪想害朕
11-29 3236
5、disabled_button 难度系数：1 题目描述：X老师今天上课讲了前端知识，然后给了大家一个不能按的按钮，小宁惊奇地发现这个按钮按不下去，到底怎么才能按下去呢？ 解题工具：火狐浏览器 解题思路：1、打开场景，按F12键，在查看器中删除disabled=“”再按按钮得到flag 2、在Hackbar里用post方式传递auth=flag，同样可以获得flag 6、weak_auth 难度系数：1 题目描述：小宁写了一个登陆验证页面，随手就设了一个密码。 解题工具：burpsuite、火狐浏览.
[CTFTraining] CISCN 2019 华北赛区 Day1 Web1
ZXW_NUDT的博客
06-05 1830
[CTFTraining] CISCN 2019 华北赛区 Day1 Web1
[CISCN2019 华北赛区 Day1 Web1]Dropbox详解
SHININGENDING的博客
04-23 1953
[CISCN2019 华北赛区 Day1 Web1]Dropbox 一、知识点：信息搜集，Phar反序列化 phar知识点分析 phar文件的结构主要分为四个部分： stub phar文件的表示，类似于gif文件的GIF89a，以 xxx<?php xxx;__HALT__COMPILER();?>为固定形式，前面内容可以变，点必须以__HALT__COMPILER();?>结尾。 2. a mainfest describing the contents 该部分是phar...
web渗透测试----30、0day漏洞
七天
07-28 3976
什么是0day 0day又称“零日漏洞”(zero-day)。0day的含义为破解，最早的破解是专门针对软件的，叫做WAREZ。 0表示zero，早期的0day表示软件在发行的24小时之内就出现破解版本。现在一般指的是没有公开，没有补丁的漏洞。 零日攻击或零时差攻击则是指利用这种0day漏洞进行的攻击。0day漏洞的利用程序对网络安全具有巨大威胁，从特征角度看，0day攻击与传统的黑客攻击有极大的相似特征，其区别仅仅在于0day攻击的对象以及渠道，是潜在的未知的，或者是虽然已经公布但尚未来得及修复的系统漏洞
[CISCN2019 华北赛区 Day2 Web1]Hack World题解
qq_52843575的博客
04-07 3258
[CISCN2019 华北赛区 Day2 Web1]Hack World题解 判断类型 进入页面很明显就是考sql注入，与此同时页面直接告诉你表面和列名均是flag，直接开始注入，常用的注入函数均被过滤，直接fuzz爆破，查看被过滤的具体情况 结果确定此题为sql中的布尔盲注(post传参)，也同时发现一个问题，请求过快时，会被过滤掉请求 确认绕过方法 因为or被过滤，百度一波后，发现可以使用^异或来绕过 异或：相同为假，相异为真，简单来说就是 1^1=0 0^0=0 1^0=1 空格也被过滤，因此
【BUUCTF】[CISCN2019 华北赛区 Day2 Web1]Hack World
aoao331198的博客
04-11 746
明确告诉了flag的位置 输入1 输入其他的基本上都没有错误回显或者信息，采用bool盲注 fuzz一波发现select没有过滤，空格过滤了 1^(ascii(substr((select(flag)from(flag)),1,1))>127) 正常回显，说明方法可行 脚本跑出每一个字符即可 import requests import time url='http://10cb7823-c884-4555-80b8-f586b15e6057.node4.buuoj.cn:81/index..
Day28 Java Web
weixin_51289292的博客
10-24 1540
Dat28 Java Web 表格标签 跨行跨列表格 iframe框架标签 表单标签 表单格式化 放入表格中 表单提交的细节 其他标签 CSS技术 语法规则 css与html结合使用 方式一 方二 方三 标签名选择器 id选择器 class类型选择器 组...
Web安全学习day01
weixin_52445990的博客
01-17 2764
xss跨站脚本攻击学习
[CISCN2019 华北赛区 Day2 Web1]Hack World
qq_46266956的博客
04-24 604
[CISCN2019 华北赛区 Day2 Web1]Hack World 注入题： 直接抓包burpsuite fuzz测试 过滤了一些关键字，但能够看出来存在bool漏洞 发现当true时，Hello，glzjin wants a girlfriend. fslse时，Error Occured When Fetch Result. 据此，写脚本 import requests import string import time timeout=None def bool_blind(url):
Day3WebAPI
02-08
标题 "Day3WebAPI" 暗示我们将深入探讨如何使用C#语言构建Web API。在Web开发领域，Web API是构建服务端应用程序的重要部分，它允许客户端（如浏览器、移动应用或桌面应用）通过HTTP协议与服务器进行交互。本教程...
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"这个压缩包中，我们很显然关注的是JavaScript技术，特别是与“futdraft”程序相关的应用。"futdraft"可能是一个足球模拟选秀或者阵容构建的应用，这需要对JavaScript有深入的理解以及对...
day13资料web
10-18
本资料包"day13资料web"聚焦于Web开发中的数据库管理和SQL语言学习，对于初学者或进阶者来说都是一份宝贵的资源。 首先，我们来看"MySQL安装图解.doc"，这是一个关于MySQL数据库系统的安装教程。MySQL是一种广泛...
WebAPI-day-01.md
10-23
自给学习整理的笔记，即可以为自给提供复习，也可以为大家提供帮助。喜欢请关注
Web_Dev_Day_3
05-06
在"Web_Dev_Day_3"的学习中，开发者可能还会接触到实际项目练习，通过创建复杂的网页布局、交互式表单以及多媒体集成来巩固这些概念。此外，了解HTML与其他Web技术（如CSS、JavaScript、SVG等）的协同工作也非常重要...
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 453
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
小程序支付（前端）
weixin_43993121的博客
08-05 675
【代码】小程序支付（前端）
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 281
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
vue中怎么自定义组件
最新发布
qinshi501的博客
08-09 694
在开发过程中我们经常需要自定义组件完成特定的功能，比如用户详情页，我增加一个调整余额的按钮，点击以后需要打开一个调整余额对话框，输入调整的金额大小，完成以后关闭弹框同时刷新页面，要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件，包含一个调整按钮，点击按钮就打开这个对话框，里面利用watch监听用户的余额和用户id等信息，同时使用watch回调实时更新余额信息等。这里的refresh后的方法组件刷新的方法，可以在调整完余额后刷新用户最新余额信息。: number // 变动类型：1-用户金额。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值