寒假第三周学习小结

最新推荐文章于 2024-02-04 20:19:06 发布

轨迹oc

最新推荐文章于 2024-02-04 20:19:06 发布

阅读量122

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_52417433/article/details/113717333

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css3及链表学习

css3选择器

属性选择器：

M[attr] {}

	*[title]{}
	a[href][title]{}

= : 完全匹配，属性与属性值完全匹配

    a[href="#"]{}
	a[href="#"][title="具体值"]{}

~= : 部分属性选择器

	<p class="book important"></p>
	p[class~="important"]{}  //即可选class属性中有important的
	p[class~="impor"]{}  //不能选中
	img[title~="Figure"]{}

字串匹配属性选择器

^= : 起始匹配
*=：包含即可
$= : 结束匹配

	<p class="book important"></p>
	p[class^="bo"]{}  //可选class属性中起始是bo的
	p[class$="tant"]{}  //可选class属性中结束是tant的
	p[class~="important"]{}  //可选class属性中有important的
	p[class~="impor"]{}  // 可选中

[][][] : 组合匹配，都可以组合起来匹配

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且值以val开头的E元素
E[att^="“val”]	匹配具有att属性且值以val开头的E元素
E[att$=“val”	匹配由att属性且值以val结尾的E元素
E[att*=“val”	匹配具有att属性值中含有val的E元素

结构伪类选择器
结构伪类选择器
nth-of-type(n)：
nth-child(n)：
角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大

E:nth-of-type(n)和E:nth-child(n)之间的区别

nth-of-type(n)指定类型E的第n个，nth-child(n)匹配父元素的第n个E元素。

   <ul>
        <li></li>         
        <div>aaaaa</div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    // 数数时都不包括div
    li:nth-of-type(2n+1/2n)  // 除去div，在li中第奇/偶数个
    li:nth-of-type(2) 
    li:first-of-type  //第一个li
    li:last-of-type	  //最后一个li
    div:only-of-type  //可以选中div
    li:only-of-type    //当 ul中只有一个li时，才能被选中
	//数数时都包括div
	li:nth-child(2n+1/2n)  //div参与数数，第奇偶数个li 
    li:nth-child(3)
    div:only-child  //不能选中div
	p>a:fist-child{}
	p:first-child a{}

引入字体
@font-face 规则中
必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件.

style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

过渡

<transition-property>:定义用于过渡的属性；
其取值的说明如下：

width/height/background-color/margin/padding
如果所有属性都改变则写一个all即可

<transition-duration>:定义过渡过程需要的时间（必选，否则不会产生过渡效果）

<transition-timing-function>:于定义过渡的速度曲线，即是过渡方式；
其取值的说明如下：

linear: 表示匀速过渡；

ease: 默认值，表示过渡的速度先慢，再快，最后非常慢；

ease-in: 表示过渡的速度先慢，后越来越快，直至结束；

ease-out: 表示过渡的速度先快，后越来越慢，直至结束；

ease-in-out: 表示过渡的速度在开始和结束时都很慢；

cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。

<transition-delay>:定义开始过渡的延迟时间；


使用transition属性定义一组过渡效果，需要以上四个参数。transition属性可以同时定义

两组或两组以上的过渡效果，组与组之间用逗号分隔。

transition-delay：用于定义过渡的延迟时间；

简写方式：

transition的语法：transition： transition-property transition-duration transition-timing-funciton transition-delay ；（那个盒子需要过渡就给谁加）

2D转换
1.平移translate(x,y)
transform: translate(50px,100px);

可设置两个值，x为水平方向向右移动距离，y为垂直方向向下移动距离。
translateX() translateY()，可单独设置一个方向上的位移`

2.rotate(number deg(度数))—旋转

正值顺时针旋转，负值逆时针旋转
transform: rotate(30deg);

3.scale（宽为原来的X倍，高为原来的X倍）—缩放
transform: scale(2,4);

x表示水平方向的缩放，y表示垂直方向的缩放。
如果只有一个值，则表示，x、y都为这个值
0-1缩小，1保持不变，大于1放大，-1轴对称

4.改变变换基点
transform-origin: 25px 25px;
设置变换基点，单位也可以是 %

以变换基点为坐标原点，横向为x轴，向右为正，纵轴为y轴，向下为正。当设置基点后，以基点为圆心进行缩放。

5：skew(X轴倾斜的度数，Y轴倾斜的度数 )—倾斜
也可拆分为skewX（），skewY（）

x,y为两个值，分别表示垂直边和水平边旋转的角度。
如果只设置某一个边的角度可以直接设置skewX或者skewY。

3D转换

3D 移动 translate3d
translate3d(x, y, z)

transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
（z 轴越大(正值)，我们看到的物体就越大）
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

** 三维坐标系**

x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值

y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值

z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值
在这里插入图片描述
透视 perspective

如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)，透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

透视需要写在被视察元素的父盒子上面

body {
  perspective: 1000px;
}

d：就是视距，视距就是指人的眼睛到屏幕的距离

z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

在这里插入图片描述
左手准则

   左手的手拇指指向 x/y/z 轴的正方向

   其余手指的弯曲方向就是该元素沿着 x/y/z轴旋转的方向

perspective-origin：规定3D元素的底部位置

backface-visibility：定义元素在不面对屏幕时是否可见

3D 呈现 transform-style

transform-style
控制子元素是否开启三维立体环境

transform-style: flat 代表子元素不开启 3D 立体空间，默认的

transform-style: preserve-3d 子元素开启立体空间

代码写给父级，但是影响的是子盒子

动画
@keyframes

此为动画样式中的关键帧，用关键帧来控制css动画中的关键样式。
如果关键帧重复定义，则根据最后一次定义为准
关键帧中的important会被略过
必须规定动画时常，动画名称。

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
    
  }
  50% {
    background-color: green;
    top: 50px;
    
  }
  100% {
    background-color: yellow;
    top: 0px;
    
  }

animation

1.animation-name（必须有）

和关键帧进行绑定,必须和关键帧的名字相同。

2.animation-duration（必须有）

指定一个动画的周期，单位s或者ms。

3.animation-timing-function

定义一个动画的过程，类似于过渡的函数
默认为running，
paused表示已暂停

4.animation-delay

定义动画的延迟，何时开始。

5.animation-iteration-count

定义动画的迭代次数infinite 为永远重复
数值为number，默认为1.

6.animation-direction

定义是否向前，向后，是否交替来回。默认为normal，反方向alternate。

7.animation-fill-mode：

forwards
将会保留最后一个关键帧，让其停留。
backwards
将会应用第一个动画值
both
将会遵守倒序还是正序的停留

单链表

1.单向链表的创建
首先创建头结点
代码如下：
Node *head=(Node *)malloc(sizeof(Node ));
head->next=NULL;

2.malloc()函数解释：
函数原型：void malloc(size_t size);
参数：需要创建的空间的大小，即sizeof返回的值
返回值：void 无类型的指针，可以被强制转换成任意类型的指针。

3.创建结点
开辟结点：
使用malloc()函数动态创建结点
Node *pNew=(Node *)malloc(sizeof(Node));
给结点的成员赋值：
pNew->data=xxx;

4.将结点连接成链表
在这里插入图片描述

头插法

//创建链表头插法
Node* createLink()
{
Node*head=(Node *)malloc(sizeof(Node));
head->next=NULL;
intx;
读取输入，创建节点，并链接链表
while(scanf("%d,&x")&&x!=-1)
{
Node *pNew=(Node *)malloc(sizeof(Node));
     PNew->=data;
     pNew->next=head->next;
     head->next=pNew;
 }
 return head;
}

尾插法
在这里插入图片描述

Node* createLinkTail()
{
//创建头节点
Node*head=(Node *)malloc(sizeof(Node));
head->next=NULL;
//创建尾结点
Node *tail=(Node *)malloc(sizeof(Node));
tail=head;
intx;
读取输入，创建节点，并链接链表
while(scanf("%d,&x")&&x!=-1)
{
Node *pNew=(Node *)malloc(sizeof(Node));
     PNew->data=x;
     pNew->next=NULL;
     tail->next=pNew;
     tail=pNew;
 }
 return head;
}

插入
在这里插入图片描述

void insert Node（Node *head，int target，int tarValue）
{
  if（head->next==NULL||target<=0）
  return;
Node *p=head;
for(int i=0;i<target-1&&p!=NULL;i++,p=p->next);

if(p==NULL)
{
printf("插入失败！")；
  return；
  }
Node *s=(Node *)malloc(sizeof(Node));
s->data=tarValue;
s->next=p->next;
p->next=s;
}

查找
在这里插入图片描述

Node *searchNode（Node*head，int key ）
{
if（head->next==NULL）
return NULL;
Node *p=head->next;
for(;p!=NULL;p=p->next);
if(p==NULL)
{
printf("没有找到结点！")；
return NULL；
}
return p；
}

修改

void updateNode（Node *head，int resource，int target）
{
  	if（head->next==NULL）
 		 return;
	Node *p=searchNode(head,resource);

	if(p==NULL)
	{
	printf("未找到需要修改的结点！")
	}
	else{
	    p->data=target;
	    }
}

删除
在这里插入图片描述

void deletNode（Node *head，int key）
{
    if（head->next==NULL）
   	 	return;
   	 Node *p=head->next;
  		 Node *q=head;
    while(p)
    {
    if(p->data==key)
    beak;
    p=p->next;
    q=q->next;
    }
    if(p!=NULL){
    	q->next=p->next;
   	 free(p);
    	p=NULL;
    }
    	else
	    {
   	 printf("没有找到要删除的结点！")；
    	}
   }

轨迹oc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
寒假第三周学习小结

css3及链表学习css3选择器属性选择器：M[attr] {} *[title]{} a[href][title]{}= : 完全匹配，属性与属性值完全匹配 a[href="#"]{} a[href="#"][title="具体值"]{}~= : 部分属性选择器 <p class="book important"></p> p[class~="important"]{} //即可选class属性中有important的 p[class
复制链接

扫一扫