CSS基础学习

css

第三天css基础

css是什么?

• css的中文名称：层叠样式表
• css书写位置：一般情况下是在head标签中创建style标签，在style标签中书写样式
• css语法：选择器{样式属性：属性值；}

css引入方式

####1. 内嵌式

• 内嵌式

2. 外联式

• 外联式
  • stylesheet 样式表

3. 行内式

• 行内式
  • < p style=“font-size:small; color: red;”>撒地方技术的开发看< /p>

基础选择器

• 选择器的作用:
  • 选择页面中对应的标签,方便后续设置样式

1. 标签选择器

• 标签选择器:

  1. 结构：标签名 { css属性名：属性值； }

  2. 作用：通过标签名，找到页面中所有这类标签，设置样式

  3. 注意点：

     • 标签选择器选择的是一类标签，而不是单独某一个

     • 标签选择器无论嵌套关系有多深，都能找到对应的标签

2. 类选择器

• 类选择器：

  1. 结构：.类名 { css属性名：属性值； }

  2. 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

  3. 注意点：

     • 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

     • 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

     • 一个标签可以同时有多个类名，类名之间以空格隔开

     • 类名可以重复，一个类选择器可以同时选中多个标签

3. id选择器

• #id选择器

  1. 结构：#id属性值 { css属性名：属性值； }

  2. 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

  3. 注意点：

     • 所有标签上都有id属性

     • id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

     • 一个标签上只能有一个id属性值

     • 一个id选择器只能选中一个标签

4. 通配符选择器

• 通配符选择器:
  1. 结构：* { css属性名：属性值； }
  2. 作用：找到页面中所有的标签，设置样式
  3. 注意点：
     • 开发中使用极少，只会在极特殊情况下才会用到
     • 在小页面中可能会用于去除标签默认的margin和paddin

字体和文本样式

1. 字体样式

1. 字体大小:font-size

• 字体大小
  • 属性名：font-size: 100px;
  • 取值 数字 + px 正常是16px的字体大小

2. 字体粗细:font-weight

• 字体粗细
  • 属性名 ：font -weight: 700;
  • 取值 数字 + px 700px加粗400px变细
  • fw700实现快速代码 bold是加粗 normal是正常

3. 字体样式:font-style

• 字体样式
  • 属性名：font-style: italic;
  • 取值
    • 正常（默认值） normal
    • 倾斜 italic

4. 字体类型:font-family

• 字体系列 font-family

  • 属性名：font-family
  • 常见取值：具体字体1,具体字体2,具体字体3,具体字体4,… .,字体系列
    • 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
    • 字体系列：sans-serif、serif、monospace等……
  • 渲染规则：
    1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
    2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
    • 注意点：
      1. 如果字体名称中存在多个单词，推荐使用引号包裹
      2. 最后一项字体系列不需要引号包裹
      3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

• 无衬线字体（sans-serif） 常见该系列字体：黑体、Arial

• 衬线字体（serif） 常见该系列字体：宋体、Times New Roman

• 等宽字体（monospace） 常见该系列字体：Consolas、fira code

  CSS （Cascading style sheets） 层叠样式表
  • 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

5. 字体连写:font-属性连写

• font复合属性

  • 属性名：font (复合属性)

  • 取值：

    • font : style weight size family;

  • 省略要求：

    • 只能省略前两个，如果省略了相当于设置了默认值

  • 注意点：如果需要同时设置单独和连写形式

    1. 要么把单独的样式写在连写的下面

    2. 要么把单独的样式写在连写的里面

2. 文本样式

1. 文本缩进:text-indent

• text-indent
  • 属性名：text-indent
  • 取值：
    • 数字+px
    • 数字+响应式单位em（推荐：1em = 当前标签的font-size的大小）

2. 文本水平对齐方式:text-align

• text-align
  • 属性名：text-align
  • 取值：
    • text-align : center 能让哪些元素水平居中？
      1. 文本
      2. span标签、a标签
      3. input标签、img标签
    • 注意点：
      • 如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置

3. 文本修饰:text-decoration

• text-decoration
  • 属性名：text-decoration
  • 取值：
    1. text-decoration: underline;
    2. text-decoration: line-through;
    3. text-decoration: overline;
    4. text-decoration: none;
  • 注意点：
    • 开发中会使用 text-decoration : none ; 清除a标签默认的下划线

3. lin-height行高

• line-height:行高

  • 作用：控制一行的上下行间距

  • 属性名：line-height

  • 取值：

    1. 数字+px 若为字体本身大小等价于行与行之间没有间隙

    2. 倍数（当前标签font-size的倍数） 一倍等价于没有间隙

  • 应用：

    1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度

    2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距

• 行高与font连写的注意点：

  • 如果同时设置了行高和font连写，注意覆盖问题
  • font : style weight size/line-height family ;

(拓展)颜色常见取值

• 颜色表示法
  1、预定英文单词
  2、rgb表示法 红绿蓝三原色，各自取值0-255 rgb(0,0,225)
  3、rgb表示法 同rgb表示法，第四个a取值0-1表示透明度 rgb(0,0,225,1)十六进制表示法 #开头 六位数分两个一组表示红绿蓝，十六进制取值 #0000ff

• 使用transform:(1.5)突破字体限制

第四天css基础

选择器进阶

1. 复合选择器

• 复合选择器
  1. 后代选择器:空格之间隔开 儿子 孙子 重孙子
  2. 子代选择器:>之间隔开 只能选择子代 就是儿子

2. 并集选择器

• 并集选择器
  p,
  div,
  span,
  h1 {
  color: red;
  }

3. 交集选择器

• 交集选择器
  紧凑 其中标签选择器要写在前面

  例如:p.box就是p标签而且添加了box类的

4. hover伪类选择器

• hover伪类选择器
  当鼠标悬停在上面的时候
  div:hover {
  color: green;

Emmet语法

1. 快速生成网页结构

1. 快速创建标签： 标签名+tab/回车键
   必须是在英文输入状态下
2. 快速创建带类的div标签： .类名+tab/回车键
3. 快速创建带类名的指定标签： 标签名+.类名+tab/回车键
4. 快速创建带id名称的div标签： #id名+tab/回车键
5. 快速创建带id名的指定标签： 标签名+#id名+tab/回车键
6. 快速创建标签并且包含标签属性
7. 快速创建带id和class名的指定标签： 标签名+.类名+#id名+tab/回车键
8. 通过标签结构，快速创建同一级兄弟标签：标签名1+加号+标签名2
9. 通过标签结构，快速创建标签： 标签1+>+标签2+tab/回车键
10. 通过标签结构，快速创建多个标签： 标签1+>+标签2*数字+tab/回车键
11. 通过标签结构，快速创建多个标签并添加内容： 标签1>标签2*数字{填充的内容}+tab/回车键
12. 通过标签结构，快速创建多个标签并添加序号内容： 标签1>标签2*数字{填充的内容 $ }+tab/回车键

2. 快速生成样式代码

在选择器的样式内容中，可以通过样式属性名单词的开头字母加上属性值的开头字母或属性的值，再按下tab键即可快速生成

背景相关属性

1. 背景颜色

background-color(bgc)

• 背景颜色

  • 属性名:background-color

  • 属性值：

    1. 关键字
    2. rgba(0,0,0,.8)

2. 背景图片

background-image(bgi)

• 背景图
  • 属性名:background-image: url(路径);

3.背景平铺

background-repeat(bgr)

• 背景平铺

  • 属性名:background-repeat: repeat;默认值

• 背景不平铺: 图片只显示一个

  • background-repeat: no-repeat;不平铺
  • background-repeat: repeat-x;横向平铺
  • background-repeat: repeat-y;纵向平铺

4. 背景位置

background-position(bgp)

• 背景位置

  • background-position: 0 0;

    • 第一个值表示横向X移动的距离

    • 第二个值表示纵向Y移动的距离

    1. 横向：left左、center居中、right右

    2. 竖向：top上、center居中、bottom下

5. 背景是否固定

background-attachmen(bga)

• 背景图片是否固定
  • background-attachment: fixed;固定 不随之滚动
  • background-attachment: scroll;默认值会随滚动

6. 背景尺寸

background-size(bgc)

• 背景尺寸的两种单位
  1. background-size:20px 50px;第一个值表示宽 第二个值表示高
  2. background-size:20% 20%;相对于标签的大小
• 背景的两种格式
  • contain：包含，在标签背景范围内尽可能等比例放大，可能会造成标签背景留白
  • cover：覆盖，将标签背景完全覆盖，背景图片等比例放大，可能造成图片显示不全
• 注意点
  • 一般情况下，背景图片只设置一条边，另一条边自动等比例缩放

技巧： 背景相关属性连写

• background的完整写法是color url() no-repeat attachment position/size;
  不分先后顺序 背景色 背景图 背景图平铺 背景图位置

元素显示模式

1. 块级元素

div 、p、 h

• 块级元素的特点:

  1. 独占一行
  2. 默认宽度是父容器的宽度,高度由内容撑开
  3. 可以设置宽高

• (当father里有个son son不设置高 则显示father的div)
  -div、p、h系列

2. 行内元素

a、span 、b

• 行内元素的特点:

  1. 一行可以显示多个

  2. 宽度和高度默认由内容撑开

  3. 不可以设置宽高

     • a、span 、b、u、i、s、strong、ins、em、del……

3. 行内块元素

input、textsarea、button、select

• 行内块元素的特点：
  1. 一行可以显示多个
  2. 可以设置宽高
• 就是表单等元素
  • input、textsarea、button、select……
  • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4. 元素显示模式转换

• 元素显示模式转换
  在style中的选择器里写display
  1. 转换成块级元素的属性是什么？
     • display：block
  2. 转换成行内块元素的属性是什么？
     • display：inline-block
  3. 转换成行内元素的属性是什么？
     • dis play：inline
  4. 转换成啥也不是元的属性是什么?
     • display:none

####注意点
-p 和 h标题不能相互嵌套,p里面不能包含div

• `
  >浏览器会默认没看见 直接加上

• -a里面只能是a

css三大特性

1. 继承性

• 继承性
  • 控制字的都能继承
  • inherited继承
• 继承性的判断
  • 往下面找能否找到那一个

2. 层叠性

• 层叠性的默认样式
  如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

  1. a标签的color会继承失效
  • 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉
  2. h系列标签的font-size会继承失效
  • 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
    可以单独设置就可以取消层叠

• 层叠性的问题

  • 对同一个标签添加了相同的样式，
    • 就会产生冲突问题，那么以后面的为准
  • 对同一个标签添加了不同的样式，
    • 那么则不会产生冲突，样式会叠加显示
  • 注意点:
    • 只有当选择器相同时，产生冲突才会使用层叠性判断

3. 优先级

• 优先级的等级

  • 选中范围越广 优先级越低
  • !important最重要的东西 写在属性值后面 分号前面
  • 只要是继承的就是最低的

• 优先级的叠加计算

  • 权重:(行内,id,类,标签)
  • 比较的出最高优先级

第五天css基础

盒子模型

1. 盒子模型的介绍

①.盒子模型是什么?

1. 每一个标签就是盒子
2. 浏览器渲染显示网页时 会将网页中的元素看作一个个矩形区域

②.盒子模型的组成

• 盒子模型 css中规定
  • content内容区域
  • border边框区域
  • padding内边距区域
  • Margin外边距区域

2. 内容区域的宽度和高度

• comtent
  • 设置宽高就是设置内容的height和width

3. 边框

①. 边框是什么?

• border

  • 会把盒子撑大
  • 线条的种类
    • dashed:虚线
    • solid:实线
    • dotted:点线

• 快捷键:bd+table

• 单方向设置
  - border-方向left right top bottom
  - 快捷键：bdl bdr bdt bdb

②. 盒子模型的尺寸

• 尺寸
  • 盒子模型的尺寸:内容大小+边框大小+内边距大小

4. 内边距

• padding
  • 会把盒子撑大
  • 可以当作复合属性:单独设置某个方向的值 顺时针转的方向
    • 四个值 顺时针方向
    • 三个值 上 左右 下
    • 俩值 上下 左右
  • padding-方向left right top bottom
  • 优化 把宽去掉 只留下padding:0 10px;这样好看

5. 外边距

• margin
  • 复合属性类
  • 不影响盒子的大小

(拓展)css3盒模型(自动内减)

• css3盒模型(自动内减)
  • css3切换盒子模型样式(可以在通配符中使用):box-sizing
  • 属性值:
    - content-box: 标准盒模型(默认值)
    - border-box: IE盒模型(“怪异盒子”)

(拓展)清除默认内外边距

• 消除标签(body P h ul li )默认的格式
  • *{
    marding:0;
    padding:0;
    }

(拓展)外边距折叠现象

1. 合并现象

• 外边距合并(垂直布局的块级元素margin会为其中一个最大外边距):给其中一个设置就可以

2. 坍塌现象

• 外边距坍塌(互相嵌套的块级元素 子元素的margin-top会作用在父元素上):
  • 给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
  • 给父元素设置overflow:hidden
  • 转换为行内块元素
  • 设置浮动

技巧与体会

• 技巧

  • 行高一倍就是字号的大小
  • 去掉列表的符号:list-style:none;

• 体会:

  • 可以通过设置高 左右边距 上边距来组成一个 块 一个卡片里一行文字下面由留白这样子好看 每一个都是由一个个块组成
  • a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整
  • 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大

版心居中

• 网页有效内容
• 版心需要设置一个固定的宽度才行
• margin:0 auto;
• 用版心居中样式 用类名class=“w”:.w{
  margin:0 auto;注意设置类的名字
  }

行内元素的垂直内外边距

• 如果想要通过margin或padding改变行内标签的位置,垂直位置无法生效
• 加行高就可以解决

第六天css基础

1. 结构伪类选择器

• 结构伪类选择器(注意是它一个选择器)
  • 第一个 E:first-child{} ul li:first-of-type {}
  • 最后一个 E:last-child{} ul li:last-of-type {}
  • 第n个元素 E:nth-child(){} ul li:nth-of-type(n) {}
  • 倒着数第n个元素 E:nth-child(){} ul li:nth-last-of-type(n){}
  • 括号里可以添加公式:
    • 偶数:2n even 5n (像-0正好是5N)是一个倍数
    • 奇数:2n+1 2n-1 odd
    • 选中前五个:-n+5
    • 找到从第五个往后的:n+5
  • 拓展:of-type 更加智能

2. 伪元素

• 伪元素
  • ::before 在父元素内容的最前面添加一个伪元素选择器::before{
    content:’’;
    }
  • ::after 在父元素内容的最后面添加一个伪元素
  • 相当于一个标签 行内标签
  • 表单标签不具有伪元素

3. 标准流

###　4. 浮动

• 浮动flot
  • 给盒子设置浮动可以使得盒子放到想要放的地方 使得行内块元素不再通过删除行之间的回车来使得它们紧贴在一起
  • (会飞)不占标准流的位置
  • (我比标准流)比标准流高半个级别可以覆盖标准流中的元素
  • (一家人就要在一起)浮动找浮动
  • (行内块)浮动后的标签具备行内块的特点 但比行内块厉害
  • 浮动比水平居中和margin auto 高级

css书写顺序

• 浏览器执行效率更高
  1. 盒子的显示方式:float display
  2. 盒子模型:margin border padding
  3. 文字内容样式:color

5. 清除浮动

• 受浮动影响的情况
  • 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置
• 清除受到浮动的影响：
  1. 直接设置父元素高度
  2. 额外标签法（隔墙法）
     • 在父元素内容的最后添加一个块级元素
     • 给添加的块级元素设置 clear:both
• 单伪元素清除浮动
  • 可以直接在容器上加并集类class=“top clearfix”

.clearfix::after {
        content: '';

        /* 伪元素添加的标签是行内, 要求块 */
        display: block;
        clear: both;

        /* 为了兼容性 */
        height: 0;
        visibility: hidden;
        }
    - .clearfix{
    *zoom:1;
    }

• 双伪元素清除法

.clearfix::after,
.clearfix::before{
        content: "";
        display: table;
      }
      .clearfix::after{
        clear: both;}

• overflow:hidden(超出的部分隐藏)

第七天css基础

网页组成结构

通栏的运用

• 通栏的运用
  • 先设置一个wrapper 居中 带通用的宽度 没有高度 (其高度由每一个板块灵活变换设置)
  • 适用场景有:
    1. 开头的并集选择器中
    2. 一个子元素 然后对其height设置为100%
  • 大部分通栏也利用自身的内边距使得内容具有了四条边的空白
  • .wrapper{
    width: 进行测量网页的通栏的宽度px;
    margin: 0 auto;
    ####　logo
• logo
  • 构成:一般都是一个盒子的背景图 通过设置背景的大小来控制

导航nav

• 导航nav
  • 构成:大部分导航都使用？链接 所以使用a链接 但由于a是行内标签 所以得通过对a链接display:block
  • 通过对里面a的内外边距来实现导航栏的效果

搜索框架

• 搜索框架
  • 构成:通过一个大盒子里面包装一个input和一个button
  • 注意:
    1. 里面的文字修饰需要使用::伪元素
    2. 图片的垂直居中:vertical-align: middle;

商品

• 商品
  • 注意商品中可能会有多个a于是可以利用后代选择器等一系列的选择选择器的方法避开重复的去选择进而导致错误

主要内容

• 主要内容(整个商品需要一个大盒子一般的a链接才行)
  • 主要内容可以再分离出一层 head 和body用作结构的分离
    • 之后在每一个结构中不外乎两种大结构:1.一个.left .right 2.全都是ul嵌套小li
  • 要把a链接占满盒子就可以通过设置以下代码来实现
    • .main .body li a{
      display: block;
      width: 100%;
      height: 100%;}
    • 里面的图片可以通过设置百分之百来构成完美贴合
    • 像一个结构里有很多内容的一般都是通过基础HTML标签实现

footer

• footer
  • 自定义栏靠右再靠左

第八天CSS基础

定位

定位的作用

• 作用:
  1. 可以解决盒子与盒子之间的层叠问题
     • 定位之后的元素层级最高，可以层叠在其他盒子上面
  2. 可以让盒子始终固定在屏幕中的某个位置

定位的分类

• 分类

  • 设置定位方式

    1. 静态定位:static

    2. 相对定位:relative

       • 占原来的位置
       • 自恋(上下左右移动都根据原来的位置为相对距离)
       • 没有脱标
       • 应用场景:1.配合绝对定位CP(子绝父相对) 2.用于小范围移动
       • 空间设置四个值只有左边和上边的距离有效

    3. 绝对定位:absolute(使得元素具有行内块的特性)

       • 特点

         1. 不占原来的位子

         2. 默认相对于浏览器可视区域进行移动

         3. 脱离标准流

            它找爸爸的定位方式是通过逐级往上面的父亲定位

         • 应用场景:1.子绝父相(目的就是不让父元素脱离标准流)

    4. 固定定位:fixed

       • 特点
         1. 死心眼定位
         2. 粘在浏览器上面
         3. 脱离标准流
         • 设置偏移值

• 利用定位居中

  • 绝对定位的盒子不能使用左右margin auto 因为绝对定位已经脱离标准流
  • 先让子盒子往左移动自己的一半:left:50%
    1. 普通做法:margin-left:负的子盒子宽度的一半(实际上就是增加左边距然后把左边距离增加盒子自身的一半距离:就很差)
    2. 优化做法:transform:translateX(-50%)在x方向移动自身的一半距离

• 伪类选择器:hover的使用

  • 是针对于需要把鼠标悬停上面然后显示的选择器 可以在此选择器后面继续添加选择器
  • 可以通过设置display:none; 然后display:block 使得原本得内容重新进行显示

• 遮罩

  • 绝对定位的盒子显示模式具备行内块特点: 加宽度高度生效, 如果没有宽度也没有内容, 盒子的宽度尺寸就是0 需要设置width: 1226px;如果子级和父级的宽度相同: width: 100%;
  • border :2px solid transparent;

• 元素的层级问题

  • 标注流<浮动<定位
  • 默认情况下 后来者居上
  • z-index:整数;
    • 取值越大 显示位置越靠上
    • z-index的默认值是零
    • 得配合定位才能生效

装饰

1. 垂直对齐方式

• 垂直对齐方式
  • 属性名vertical-align:;
  • 属性值:
    • top 顶部对齐
    • middle 中部对齐
    • bottom 底部对齐
    • baseline 默认基线对齐
    • display:block;消除行内 行内块元素默认的基线对齐方式
• 浏览器会认识图片为行内块标签 所以会默认渲染一个基线对齐 此时转化为块元素就可以

2. 光标类型

• 光标
  • 属性名:cursor
  • 属性值:
    • default默认值 通常是箭头
    • pointer 小手效果 提示用户可以点击
    • text:工字型 提示用户可以选择文字
    • move:十字光标 提示用户可以移动
    • not-allowed:不允许标志

3. 边框圆角

• 边框圆角
  • 属性名:border-radius
  • 属性值:数字+px 百分比
    • 四个值得的话是从 左上顺时针方向 遇到没数字就看对角的数字

4. overflow溢出部分显示效果

• 溢出部分显示效果
  • 属性名:overflow
  • 属性值:
    • visible 默认值 溢出部分 可见
    • hidden 溢出隐藏部分
    • scroll 无论是否溢出 都会显示有滚动条
    • auto 根据是否溢出 自动显示或隐藏滚动条

5. 元素本身隐藏

• 元素本身的隐藏
  • 让某元素本身在屏幕中不可见:常见属性
    1. visibility(占位) : 虽然看不见但依旧占位置
       • 默认值是visible
    2. display:none(不占位置) :

(拓展)元素整体透明度

• 元素整体透明度
  • 应用:让整个盒子连内容变得透明
  • 属性值:opacity

(拓展)边框合并

• 表格边框合并(把中间的缝隙去掉)
  • 属性名:border-collapse:collapse;
  • 不常用的:在table 里加cellspacing=“0”

(拓展)用css画三角形技巧—面试题

• 画三角形
  • 步骤
    1. 画一个盒子
    2. 画四个方向的边
    3. 把盒子的宽高去掉

选择器拓展

1. 链式伪类选择器

• 链式伪类选择器
  • 应用:超链接的不同种状态
  • 选择器语法:
    1. a:link {} 选中a链接未访问过的状态
    2. a:visited {} 选中a链接访问之后的状态
    3. a:hover {} 选中鼠标悬停的状态
    4. a:active {} 选中鼠标按住的状态
  • 注意:要遵循lvha的顺序

2. 焦点伪类选择器

• 焦点伪类选择器{只在表单里才有}

  • input:focus {
    background-color:pink;

    outline:none;(清除点击后的边框)
    }

  • textarea:focus {
    清除textarea可拖拽区域
    resize:none;
    }

3. 属性选择器

• 属性选择器
  • 应用:通过元素上的HTML属性来选择元素,常用于input标签
  • 属性名:E[attr]
    • 选择具有attr属性的E元素
  • 属性名:E[attr=“val”]
    • 选中具有attr且名字等于val的E元素
  • 属性名:E[attr^=“val”]
    • 选中开头为val的标签
  • 属性名:E[attr$=“val”]
    • 选中结束为val的标签

第九天css基础

css样式补充

1. 精灵图

• css精灵图
  • 步骤
    1. 创建一个盒子
    2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
    3. 将精灵图设置为盒子的背景图片
    4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
  • 通常使用span b i这样的行内标签
• 注意:图片格式为png

2. 盒子与文本阴影

• 盒子阴影
  • 属性名:box-shadow
  • 属性值(单位px):
    1. h-shadow 水平偏移量
    2. v-shadow 垂直偏移量
    3. blur 模糊度
    4. spread 阴影扩大
    5. color 阴影颜色
    6. inset 内部阴影
  • 加, 有多个阴影
  • text-shadow是文本阴影

3. 过渡

• 过渡样式
  • 属性名:transition
  • 属性值:
    • 需要过度的属性:属性名或all表示全部
    • 过度时长:数字+s
    • 线性函数:例如ease ease-in ease-in-out
    • 延迟时间
  • 过渡配合hover使用, 谁变化谁加过渡属性 需要给默认状态太降价

4. 有语义的布局标签

• 有语义的布局标签
  • 网页头部
    
    
    网页导航
    
    
    网页底部
    
    
    侧边栏
    
    
    网页区块
    
    
    文章

项目前置认识

1. SEO三大标签

• SEO（Search Engine Optimization）：搜索引擎优化
  • 三大标签：（用meta提示）
    1. title：网页标题标签
    2. description：网页描述标签
    3. keywords：网页关键词标签

2. ico图片设置

• ico图标设计
  • 在head标签上面link：根目录里得图片

第十天css基础

小兔鲜网站心得

1. header区域设计

• header导航头部
  • header里面的高度为没有 超过它的 设置高度再设置外边距就可以
    • 给里面得版心设置上下外边距 然后不需要给通栏设置内边距
  • logo优化：
    • 结构：Logo盒子里有一个h1标签里有一个a标签
    1. logo盒子里放一个H1标签 然后添加一个宽高和logo一样 背景图尺寸俩维度100%的a 然后文字给零隐藏掉
    2. 依旧要注意a是一个行内元素 需要转化为行内块或者块
  • 搜索框优化：
    1. 把里面的input撑大 占据整个搜索盒子 然后添加左内边距
    2. 利用伪类选择器把按钮里面文字的颜色大小进行调整
    3. 再利用伪元素与 精灵图 定位把搜索图标放在应有得位置出来
       • 注意：必须得有content：’’:
  • 购物车优化
    • 结构：购物车盒子里有个span
    1. 在购物车得盒子里放一个span标签 使得以后学习Js时可以方便更好的更改
    2. 熟练的利用俩定位来设置

2. 轮播图区域设计

• bannner轮播图区域
  • 利用精灵图生成的大于号
    • 结构：在a后面添加一个伪元素::after
    1. 使用精灵图加定位实现
  • 左右按钮实现方式
    1. 相同的样式写在一切 不相同的样式再单写
  • 轮播小圆点按钮
    • 结构：利用无序列表实现

3. 底部区域设计

• footer底部区域
  • top部分
    1. 利用内边距和伪元素进行图片的定位
    2. 通过把相同格式的css样式利用并集选择器进行简化代码
  • bottom部分
    • 由于ul没有添加浮动 而里面的小li添加了浮动 p标签仍在一行显示 此时是因为浮动脱离标准流 利用clearfix 使得ul li 去除 脱离标准流格式 但仍具有浮动效果 使得P标签能够换行