基础班day14笔记

发表于
字数统计: 2.9k | 阅读时长 ≈ 10

CSS3相关属性拓展（了解）

css这个语言是随着时间的推进，有不同的版本迭代更新的，而css3是对css2的一些效果的完善和拓充，新增了很多新功能。但是值得注意的是css3因为的新版本，一些老版本（低版本的浏览器是不支持的！！）这样就存在一些兼容性问题。

遇到问题可以查阅相关的CSS手册

结构伪类选择器

通过标签的结构关系找到对应的元素

如果现在想找到ul标签下面的第几个li标签的时候，除了使用class大法之外，还可以使用结构伪类选择器完成效果

如果要找第一个li标签呢？

  • E:first-child ：选择其父元素的第一个子元素

    还会判断是否是E元素，是才设置样式。（既是E标签，又是父元素的第一个子元素）

    1
    2
    3
    4
    5
    6
    7
    8
    比如：li：first-child {css样式}
    查找过程如下：
    1、首先找到li 
    2、找li标签的父元素
    3、找父元素第一个子元素
    4、看这个子元素是不是li
    	1、是-》加样式
    	2、不是-》不加样式

如果要找最后一个li标签呢？

  • E:last-child ：选择其父元素的最后一个子元素

    还会判断是否是E元素，是才设置样式。（既是E标签，又是父元素的最后一个子元素）

    1
    2
    3
    4
    5
    6
    7
    8
    比如：li：last-child {css样式}
    查找过程如下：
    1、首先找到li 
    2、找li标签的父元素
    3、找父元素最后一个子元素
    4、看这个子元素是不是li
    	1、是-》加样式
    	2、不是-》不加样式

如果要找第12个li标签呢？

  • E:nth-child(n) ： 选择其父元素的第n个子元素

    还会判断是否是E元素，是才设置样式（既是E元素，又是父元素的第n个子元素）

    1
    2
    3
    4
    5
    6
    7
    8
    比如：li：nth-child(n) {css样式}
    查找过程如下：
    1、首先找到li 
    2、找li标签的父元素
    3、找父元素第n个子元素
    4、看这个子元素是不是li
    	1、是-》加样式
    	2、不是-》不加样式

    注意：

    针对于nth-child括号中可以写一个带n的式子，n的取值范围是0~正无穷的整数

    • 找到所有的偶数：2n/even
    • 找到所有的奇数：2n-1 / 2n+1 /odd
    • 找到前12个：-n+12
    • ……(更多新奇的玩法等待你的发现)

如果要找倒数第12个li标签呢？

  • E:nth-last-child(n)：选择其父元素的倒数第n个子元素

    判断是否是E元素。（既是E元素，又是父元素的倒数第n个子元素）

    1
    2
    3
    4
    5
    6
    7
    8
    比如：li：nth-last-child(n) {css样式}
    查找过程如下：
    1、首先找到li 
    2、找li标签的父元素
    3、找父元素倒数第n个子元素
    4、看这个子元素是不是li
    	1、是-》加样式
    	2、不是-》不加样式

如果列表中混入了奸细，怎么才能找到第一个li标签呢？

  • E:nth-of-type(n)：选择其父元素的第n个E元素

    选择的是子元素中的第n个E元素

    1
    2
    3
    4
    5
    比如：li：nth-of-type(n) {css样式}
    查找过程如下：
    1、首先找到li 
    2、找li标签的父元素
    3、找父元素的第n个E元素

盒子阴影/边框阴影（box-shadow）

类似于京东网页上，有盒子阴影的效果，同样可以通过CSS3中的box-shadow完成

代码： box-shadow: 10px 10px 10px #aaa;

1
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；
值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。

注意点：

  • 前两个属性是必须写的。其余的可以省略。
  • 默认阴影是外部阴影，但是不能设置outset这个属性值。如果想要内部阴影，请设置inset

文字阴影（text-shadow）

在CSS3中除了可以给盒子设置阴影效果之外，还可以给文字设置阴影效果

代码： text-shadow: 5px 5px 10px #000;

1
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

取值：

值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

有趣的案例：

可以给一个文字设置多个阴影效果，中间使用逗号 “,” 进行连接。

aotu

1
2
3
4
5
/*凸出来文字*/
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
/*凹进去文字*/
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
/* 背景颜色和文字颜色为#666即可 */

背景图片大小（background-size）

有时候可以设置背景图片的大小

取值（分别设置的是宽度和高度）：

  • 数字+px

  • 百分比（相对于盒子的宽高百分比）

  • 关键字

    默认尺寸：

    1.1

      • contain：将背景图片等比例缩放，直到不会超出盒子的最大

        直到宽度或者高度中有一个和盒子相等，并且背景图片没有溢出部分即止。

        1.3

  • cover：将背景图片等比例缩放，直到填满整个盒子没有空白

    直到宽度或者高度中有一个和盒子相等，并且背景图片填充满盒子如果有溢出部分则被隐藏

    1.2

注意点：

  • 在设置background-size 和background连写的时候注意覆盖问题

    • 要么单独写的写在连写的下面

    • 要么单独写的写在连写的里面

      1
      2
      /* 连写完整版中，也有background-size属性，注意连写的覆盖问题 */
      background：color image repeat attachment position / size

背景渐变

给一个元素设置 background-image 属性时，不仅可以通过url指定一张图片，还可以通过线性渐变(linear-gradient)或者径向渐变(radial-gradient)设置一张颜色渐变的背景图。

线性渐变

沿着一个方向颜色进行线性渐变

代码：background-image: linear-gradient(green,yellow); （默认从上往下渐变）

2.9

取值：

  • 第一个值：可以是方向或者角度（可以省略）

    • 方向

      • to top： 渐变从下到上。相当于: 0deg

        background-image: linear-gradient(to top,green,yellow);

        2.1

      • to right： 渐变从左到右。相当于: 90deg

        background-image: linear-gradient(to right,green,yellow);

        2.2

      • to bottom： 渐变从上到下。相当于: 180deg（默认值）

        background-image: linear-gradient(to bottom,green,yellow);

        2.3

      • to left： 渐变为从右到左。相当于: 270deg

        background-image: linear-gradient(to left,green,yellow);

        2.4

    • 角度（效果对比上图）

      • 0deg：渐变从下往上
      • 90deg：渐变从左往右
      • 180deg：渐变从上往下（默认值）
      • 270deg：渐变从右往左

  • 第二个值：渐变的起止颜色（可以写两个或者多个）

    background-image: linear-gradient(to right,red,green,blue);

    第一个是开始颜色，在最左端是纯红色

    中间是绿色，所以最中间是纯绿色

    最后一个是结束颜色，在最右端是纯蓝色

    （之后每对颜色之间就是渐变）

    2.5

纯颜色的点默认是等分线段的。

线性渐变

如果不想默认等分线段，想手动设置纯颜色的位置怎么做呢？

可以在颜色的后面加上对应的长度（类似于线段的坐标）

  • 可以在颜色的后面写上对应的长度

    • 具体的数值

      开始是第一个颜色，结束时最后一个颜色

      然后把纯色放到对应的坐标上，再渐变即可

      background-image: linear-gradient(to right,red 100px,green 200px,blue 300px);

      2.6

      线性渐变2

    • 百分比（原理同上）

拓展（了解）：

如果要求是几个纯色块呢？

2.8

其实，可以分析：

  • 开始是红色
  • 结束时蓝色
  • 中间一半的地方红色和蓝色（50%，先红色，在蓝色）

background-image: linear-gradient(to right,red 50%,blue 50%);

那如果是多个色块会不会呢？

2.7

background-image: linear-gradient(to right,red 25%,blue 25%,blue 50%,red 50%,red 75%,blue 75%);

径向渐变

由中心向四周渐变（圆或者椭圆的效果）

代码： background-image: radial-gradient(green,yellow); （默认从中点向四周渐变）

3.1

取值：

  • 第一个值：可以是形状或者半径（可以省略）

    • 形状：

      • circle：圆形

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

        3.2

      • ellipse：椭圆（默认值，要求盒子是一个矩形才会有效果，正方形时是圆形的效果）

        background-image: radial-gradient(ellipse,yellow,blue);

        3.3

    • 半径

      指的是渐变范围的半径

      • 设置两个相同的半径是一个正圆

        background-image: radial-gradient(100px 100px,yellow,blue);

        3.4

      • 设置两个不同半径是一个椭圆

        background-image: radial-gradient(300px 100px,yellow,blue);

        3.5

    • 圆形的位置

      默认渐变的圆心在盒子的中点上，如果想改变圆心的位置怎么做呢？

      代码： background-image: radial-gradient(100px 100px at 100px 100px,yellow,blue);

      设置圆心的位置：at 100px 100px 指的是盒子的坐标点

      3.6

  • 第二个值：渐变的起止颜色（可以写两个或者多个）

    线性渐变一样的套路。

  • 拓展（了解）：

    可以完成一个立体小球的效果

    3.7

    1
    2
    3
    4
    5
    6
    7
    /* 立体球的效果 */
    /*先变成一个圆*/
    border-radius: 50%;
    /*给球设置一个背景颜色*/
    background-color: pink;
    /*设置渐变的圆心，然后使用半透明的渐变效果*/
    background-image: radial-gradient(at 100px 100px,rgba(0,0,0,0),rgba(0,0,0,.8));

多背景写法

在CSS3中，可以做到给一个盒子设置多个背景图片

使用背景的连写形式，通过逗号分隔不同的背景图片即可。

注意点：

  • 一个元素可以设置多个背景图片
  • 每组背景属性之间需要通过逗号隔开
  • 如果多组背景图片之间存在层叠关系，则前面的会覆盖在后面的背景图上
  • 如果需要设置背景颜色，则背景颜色需要设置到最后一组中。
1
2
3
background:  url(1.jpg) no-repeat left top,
			url(2.jpg)  no-repeat right bottom,
			url(3.gif) no-repeat center center/100px 100px;

元素本身透明（opacity）

除了可以让背景颜色透明之外，还可以让元素整体（包括里面的内容）一起透明

代码： opacity:0

取值： 0~1之间的一位小数

注意点：

  • opacity会让元素整体透明，包括里面的内容（文字或者子元素）
  • 背景透明仅仅只是让背景颜色变得透明，要根据需求选取方法。

通过phpstudy把静态页面部署到web服务器

  1. 安装phpstudy，注意不能有中文路径

    • 双击软件

    • 选择安装目录（注意，要求路径中不能有中文！！！默认的路径即可）

      php1

    • 点击ok之后，会默认跳转到phpstudy官网上，然后提示为了防止重复初始化，选择是 点击是即可！

      php2

    • 然后可以访问自己本地的服务器，在地址栏中输入127.0.0.1 访问

  2. 把自己的网页放到www文件夹中，找到安装目录下面的www文件夹，把自己写好的页面放到这个文件夹中去

  3. 通过查看自己的ip，通过浏览器输入ip地址访问自己写的网页

    win+r 输入cmd，往黑窗口中输入ipconfig，回车，以太网适配器查看192.168开头