首页
学习
活动
专区
工具
TVP
发布

回炉重造十二

1.3D转换模块

1.什么是2d和什么是3d

2d就是一个平面,只有高度和宽度,没有厚度

3d就是一个立体,有高度和宽度,还有厚度

默认情况下所有的元素都是呈2d展示的

2.如何让某个元素呈3d展现

和透视一样,想看到某个元素的3d属性效果:只要给他的父元素添加一个transform-style属性

然后设置prescrve-3d即可

3.在企业开发中(正方体) 3D设置面的顺序是 上后下正左右

transfrom:rotateX(90deg/180deg/270deg/360deg) translateZ(一半的长度);

要做(长方体)的话可以 做好正方体然后属性后面设置scale(x倍数,y的倍数);

注意点:

只要父元素被拉伸了,子元素也会被拉伸

2. 3D播放器

填满整个网页

background-size:cover;

注意点:动画中如果有和默认样式同名的属性,会覆盖

默认样式中同名的属性

2.在编写动画的时候,固定不变的值写在前面,需要变化的值写在后面

3. background-size 背景尺寸

默认值

具体像素

第一个参数:宽度

第二个参数:高度

百分比

第一个参数:宽度

第二个参数:高度

宽度等比拉伸/高度等比拉伸

第一个参数:宽度

第二个参数:高度

哪个属性要等比拉伸就设置为auto就ok了

cover

cover含义:

1.告诉系统图片需要等比拉伸

2.告诉系统图片需要拉伸到宽度和高度都填满元素

contain

contain含义:

1.告诉系统图片需要等比拉伸

2.告诉系统图片需要拉伸到宽度或高度都填满元素

4.背景图片定位区域属性 background-origin

background-origin作用:

告诉系统背景图片从什么区域开始显示,

默认情况下就是从padding区域开始显示

padding-box

border-box

content-box

5.背景绘制区域属性 background-clip

背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景

padding-box

border-box

content-box

6.多重背景图片

多张背景图片之间用逗号隔开即可

注意点:

先添加的背景图片会盖住后添加的背景图片

建议在编写多重背景时拆开编写

如:

background-image:(方便告诉别人这里放置了多少张图片),(图片)....;

background-repeat:no-repeat, no-repeat(有多少张写多少次)....;

background-position:(图片有多少张写多少次),...;

7.css书写格式

1.行内样式

第一个位置,可以直接将css代码写在开始标签中

2.内嵌样式

可以在一对head标签当中写上一对style标签,然后再style标签总编写css代码

3.外链样式--企业开发中一般都用外链样式

可以单独新建一个.css的文件,把CSS代码写到这个文件中,然后通过link标签把.html文件关联起来

4.导入样式

可以单独新建一个.css的文件,把CSS代码写到这个文件中,然后通过

@import把.html文件关联起来

外链样式和导入样式区别:

1.外链样式是通过link标签关联而导入样式是通过@import关联

而@import是css2.1推出的,所以有兼容问题

2.外链样式在显示界面的时候,会先加载css样式,再加载结构,所以用户看到界面时

一定已经设置了样式

导入样式在显示界面的时候,会先加载结构,再加载样式,所以用户看到界面的时不一定

已经设置了样式。

8.开发一个静态页面要做的事情

1.编写网站要做的第一件事情

创建站点文件夹,并且创建一些子文件夹和子文件

注意点:

创建站点文件夹可以是中文

但是站点文件夹下面的子文件夹和子文件不能出现中文

2.重置所有默认的样式和设置一些全局样式,并且将伸直样式的css文件

和对应的界面关联起来。

清空默认的样式

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

设置全局属性

9.边框圆角的作用:

将原始的直角变为圆角

格式:

border-radius: 100px 0px 0px 0px;

第一个参数: 指定左上角的半径

按照左上/右上/右下/左下的顺序

border-radius: 0px 0px 0px 100px;

如果省略一个参数, 会变成对角的值

border-radius: 100px 80px 40px;

如果省略两个参数, 会变成对角的值

border-radius: 100px 80px;

如果省略三个参数, 其它角会和它一样

border-radius: 100px;

如果指定的半径是当前元素宽高的一半, 那么就是一个圆形

border-radius: 100px;

border-radius: 50%;

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180724G20H4K00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券