css简介

最新推荐文章于 2024-09-25 12:05:42 发布

老罗专注摸鱼

最新推荐文章于 2024-09-25 12:05:42 发布

阅读量411

点赞数

文章标签： html java

本文链接：https://blog.youkuaiyun.com/weixin_71677887/article/details/126214298

版权

本文详细介绍了CSS的基础知识，包括引入方式、基础选择器、文字属性、盒子模型、定位和浮动等。通过实例展示了如何进行页面布局，如小米卡片居中、京东页面案例等，强调了CSS的三大特性——继承性、层叠性和优先级。最后，还涉及了定位的静态、相对、绝对和固定方式，以及浮动、清除浮动的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一天

css引入方式

嵌入式 
<style>
    /* 选择器 {
      属性名: 属性值;
      属性名: 属性值;
      属性名: 属性值;
    } */
    p {

        color: pink;
      font-size: 30px;
    }
  </style>

外链式

 <!-- 外链式 使用 link 标签 来引入 css 文件 -->
  <!-- 一个 html 文件 可以引入 N 个 css 文件 -->
  <!-- 一个 css文件 可以被 多个 html 文件引入 -->
  <!-- <link rel="stylesheet" href="css文件的路径"> -->
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/index1.css">

行内式

<!-- 在 html 标签里面 有一个属性 是 style -->
  <!-- <标签名 属性名="属性值"> -->
  <h1 style="color: red ; font-size: 100px;">一级标题</h1>

基础选择器

标签选择器

 p {
      color: red;
    }

类选择器

 /* 类选择器 */
    /* .类名 {
      属性名: 属性值;
      属性名: 属性值;
      属性名: 属性值;
    } */
    .box {
      color: red;
    }


结构：
<!-- 类名：html 标签里面 的 class 属性值 称之为类名 -->
  <div class="box">hello</div>
  <div>hello</div>
  <p class="box">111</p>
  <h1 class="box">我是大标题</h1>

样式点定义，结构类调用

多类名使用

 <!-- 多类名：一个标签 可以有 多个class 属性值 类名与类名之间使用空格分割 -->
  <!-- 多个类名身上的样式可以 同时作用与 一个标签 -->
  <div class="box box1">hello</div>

id选择器

/*  .找 class  # 找 id  */
    /* #id属性的值 {
      css属性名: 属性值;
      css属性名: 属性值;
      css属性名: 属性值;
      css属性名: 属性值;
    } */
    #box {
      color: red;
    }

结构：
 <!-- #box  -->
  <div id="box">hello</div>

通配符选择器

可选择所有标签 

* {
      color: aqua;
    }

结构：
 <div>我是一个大盒子</div>
  <h1>一级标题</h1>
  <p>段落</p>
  <span>小盒子</span>

应用: 清除内外边距

* {
    margin:0;
    padding:0;
}

文字属性

font属性

 /* 需求：想要 让 hello 变成 20px */
    .box {
      /* 简写 fz数字 */
      font-size: 20px;
    }

加粗
 h1 {
      /* 让 加粗的文字 变成不加粗 */
      font-weight: normal;
    }
    .box {
      font-weight: bold;
    }
    h2 {
      font-weight: 400;
    }
    p {
      font-weight: 700;
    }

倾斜
 i {
      /* 将 i 标签 和 em 标签 原本 倾斜的文字 变成 正常的文字 */
      font-style: normal;
    }
    .box {
      font-style: italic;
    }


 body {
      font-family: 微软雅黑, 苹方, sans-serif;
    }

font属性连写

 .box {
      /* font属性可以 一次设置 针对于字体样式 */
      /* font属性 前两个属性值 可以省略不写 后两个不能省略 */
      /* font属性 前两个属性值 可以交换位置 后面两个不能交换位置 */
      /* font-size: 20px;
      font-weight: bold;
      font-style: italic;
      font-family: 楷体; */
      /* font: font-style font-weight font-size font-family */
      /* font: italic bold 30px 黑体; */
      /* font: 30px 楷体; */
      /* font: italic bold; */
      /* font: bold italic 黑体 30px; */

      font-size: 30px;
      font: italic bold 20px 宋体;
    }

一般来说分开写

text属性

 .box {
      /* font-size: 19px;
      text-indent: 32px; */
      /* px 绝对单位 */
      /* em 相对单位  1em = 当前文字的 font-size */
      font-size: 30px;
      text-indent: 2em;
    }


文字水平居中
  .box {
      color: pink;
      /* 边框 bd */
      border: 1px solid #000;
      /* 水平居中：text-align:center tac */
      /* text-align: center; */
      /* text-align: right; */
      text-align: center;
    }

 /* 大盒子 里面的文字 可以通过 text-align:center 直接水平居中 */
    /* 小盒子 需要将其包裹在 大盒子里面 再给大盒子 设置  text-align: center; */


    div {
      text-align: center;
    }
    span {
      border: 1px solid #000;
      /* text-align: center; */
    }

    p {
      text-align: center;
    }
   
结构：
 <div>
    <span>hello</span>
  </div>

  <p>
    <img src="./images/1.jpg" alt="">
  </p>


去掉下划线

 a {
      color: pink;
      /* 去掉下划线 */
      text-decoration: none;
    }
    .box {
      /* text-decoration: line-through; */
      /* text-decoration: overline; */
      /* text-decoration: underline; */
      /* 添加下划线 */
      text-decoration: underline;
    }

行高

作用1：
调整行间距
作用2：
让文本垂直居中
.box {
      /* 宽 */
      width: 300px;
      /* 高 */
      height: 50px;
      /* 边框 */
      border: 1px solid #000;
      text-align: center;
      /* 想要让 一行文字在一个盒子内垂直居中  将  line-height的属性值与 height属性值 设置一样即可 */
      line-height: 50px;
    }

作用3：line-height:1;   去除行高

盒子水平居中方法

 /* margin: 0 auto 是让 大盒子在浏览器上面水平居中 */
    /* 小盒子想要在 浏览器上也要水平居中
    1. 将 小盒子放在大盒子里面 
    2. 给 大盒子  text-align:center
    */

    .box {
      width: 300px;
      height: 300px;
      border: 1px solid #000; 
      /* marign: 0 auto 可以让 大盒子水平居中 */
       前提：该盒子必须有宽度
      margin: 0 auto;
      text-align: center;
    }

    /* span {
      border: 1px solid #000;
      margin: 0 auto;
    } */
    p {
      /* margin: 0 auto; */
      text-align: center;
    }


结构：
 <div class="box">hello</div>

  <p>
    <span>1111</span>
  </p>

栗子

综合案例-排版

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
    }
    .title {
      text-align: center;
    }
    p {
      text-indent: 2em;
      /* 设置行与行之间的距离 */
      line-height: 30px;
    }
    .time {
      color: #808080;
    }
    .sina {
      color: #87ceeb;
    }

    a {
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="box">
    <h1>《自然》评选改变科学的10个计算机代码项目</h1>
    <div class="title">
      <span class="time">2077年01月28日14:58</span>
      <span class="sina">新浪科技</span>
      <a href="#">收藏本文</a>
    </div>
    <hr>
    <p>
      2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。

    </p>
    <p>
      这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”

    </p>
    <p>
      如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。

    </p>
    <p>
      最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x
      = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
  </div>
</body>

</html>

小米卡片居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 1. 需要给 body 标签设置 背景颜色 */
    body {
      background-color: #f5f5f5;
    }
    /* 2. 给 box 盒子 设置 宽高 背景颜色 水平居中*/
    .box {
      /* w234+h300 */
      width: 234px;
      height: 300px;
      background-color: #fff;
      margin: 0 auto;
      text-align: center;
    }
    /* 3. 给 img 设置 宽度 */
    img {
      width: 160px;
    }
    .title {
      height: 25px;
      font-size: 14px;
    }
    .info {
      height: 30px;
      font-size: 12px;
      color: #ccc;
    }
    .price {
      font-size: 14px;
      color: #ffa500;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/car.jpg" alt="">
    <div class="title">九号平衡车</div>
    <div class="info">成年人的玩具</div>
    <div class="price">1999元</div>
  </div>
</body>
</html>

第二天

笔记整理

选择器进阶

后代选择器

空格 
.box h2 {
      color: #f00;
    }

子代选择器

/*
    选择器1 > 选择器2 {
      属性: 值;
      属性: 值;
      属性: 值;
    }
    */
    .box > h2 {
      color: #f00;
    }

并集选择器

逗号 
/* h2 {
      color: #f00;
    }
    p {
      color: #f00;
    }
    a {
      color: #f00;
    } */
    h2, p , a {
      color: #00f;
    }

  .box h2, .news p {
      color: #f00;
    }

交集选择器

  /* p {
      color: #f00;
    } */
    /* .red {
      color: #f00;
    } */
    /* 先找到 p 标签 同时 匹配 p标签身上 有 类名 将 red 的 才会被选择到 */
    p.red {
      color: #00f;
    }

 <!-- 需求：只让小可爱变红（不能改变html结构） -->
  <!-- 解决：找到页面中，既是p标签，又有red这个类名的标签，设置样式 -->
  <div class="red">小姐姐</div>
  <p class="blue">小帅哥</p>
  <p class="red">小可爱</p>

hover伪类选择器

.box {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .box:hover {
      background-color: #f00;
    }

<!-- 需求：鼠标悬停 box 盒子身上时 让 这个.box 盒子的背景颜色 变成红色 -->
  <div class="box"></div>

emmet语法

快速输入语法

ul>li*8 等等

背景样式

  .box {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      /* background-color: pink;
      background-image: url(./images/1.jpg);
      background-repeat: no-repeat;
      background-position: center center; */
      连写：
      /* background:url(./images/1.jpg) no-repeat center center pink ; */
      background: url(./images/1.jpg) no-repeat ;
      /* background-color: pink; */
    }

插入图img和背景图区别

小图片 logo等用背景图，其他大部分用插入图背景图不可撑大盒子

元素显示模式

块级元素

显示特点：
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高

代表标签：
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

行内元素

显示特点：
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高

代表标签：
• a、span 、b、u、i、s、strong、ins、em、del……

行内块元素

显示特点：
1. 一行可以显示多个
2. 可以设置宽高

代表标签：
• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

栗子

综合基础练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 从上往下 从外往里 */
    /* 1. 让 news 盒子 在 浏览器上面 水平居中 */
    .news {
      width: 500px;
      margin: 0 auto;
    }

    /* 2. 找到 li 标签 将 li 前面的 小黑点去掉 */
    .news li {
      list-style: none;
      line-height: 28px;
      background-image: url(./images/icon.gif);
      background-repeat: no-repeat;
      background-position: left center;
      text-indent: 1.5em;
    }

    /* 3. 对 a 标签进行美化 */
    /* 3.1 将 a 标签默认的颜色 设置为 #333 同时将 下划线去掉 */
    a {
      color: #333;
      text-decoration: none;
    }
    /* 3.2 当鼠标悬停在 a 身上时 更换另外一种颜色 */
    a:hover {
      color: #ff9300;
    }
  </style>
</head>
<body>
  <div class="news">
    <ul>
      <li><a href="#">重磅！我国首个抗新冠口服药来了</a></li>
      <li><a href="#">广西北海海城区新增80个高风险区、64个中风险区</a></li>
      <li><a href="#">广西7月14日新增本土无症状感染者165例</a></li>
      <li><a href="#">河南7月14日新增本土感染者“1+51”</a></li>
      <li><a href="#">上海新增1个疫情高风险区，29个疫情中风险区</a></li>
      <li><a href="#">甘肃省临夏回族自治州临夏市新增高、中风险区</a></li>
      <li><a href="#">甘肃兰州新增12个高风险区、31个中风险区</a></li>
      <li><a href="#">甘肃兰州新增12个高风险区 31个中风险区</a></li>
    </ul>
  </div>
</body>
</html>

案例普通导航

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      /* 转换为 行内块 */
      display: inline-block;
      width: 80px;
      height: 50px;
      background-color: #f00;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
      color: #fff;
    }
    a:hover {
      background-color: #ffa500;
    }
  </style>
</head>
<body>
  <a href="#">导航</a>
  <a href="#">导航</a>
  <a href="#">导航</a>
  <a href="#">导航</a>
  <a href="#">导航</a>
</body>
</html>

案例五彩导航

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      display: inline-block;
      width: 120px;
      height: 58px;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
      color: #fff;
      /* background-color: pink; */
    }
    .a1 {
      background-image: url(./images/bg1.png);
    }
    .a2 {
      background-image: url(./images/bg2.png);
    }
    .a3 {
      background-image: url(./images/bg3.png);
    }
    .a4 {
      background-image: url(./images/bg4.png);
    }

    .a1:hover {
      background-image: url(./images/bg5.png);
    }
    .a2:hover {
      background-image: url(./images/bg6.png);
    }
    .a3:hover {
      background-image: url(./images/bg7.png);
    }
    .a4:hover {
      background-image: url(./images/bg8.png);
    }
  </style>
</head>
<body>
  <a href="#" class="a1">五彩导航</a>
  <a href="#" class="a2">五彩导航</a>
  <a href="#" class="a3">五彩导航</a>
  <a href="#" class="a4">五彩导航</a>
</body>
</html>

CSS 三大特性

继承性:子元素有默认继承父元素样式的特点

继承的权重最低

可以继承的常见属性(文字控制属性都可以继承)
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……

应用：
1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

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

可通过调试工具判断样式是否可以继承

层叠性

特性：
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

样式上下冲突时，下方的覆盖掉上方的； 因为浏览器解析是从上到下  
.box {
      font-size: 20px;
      color: #00f;
    }
    .box {
      color: #f00;
    }

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

优先级

基本选择器优先级

/* 通配符选择器 < 标签选择器 < 类选择器 < id选择器  < 行内样式 */

    * {
      color: #0f0;
    }

    #hh {
      color: #ff0;
    }
    .h {
      color: #00f;
    }

    h2 {
      color: #f00;
    }

!important

  /* 通过标签选择器 找到 h2 标签 给其设置样式 文字的颜色 和文字的大小 */

    /* important 重要 */
    /* 语法： */
    /* 选择器 {
      属性: 属性值;
      属性: 属性值 !important;
      属性: 属性值;
    } 
    作用：加了 !important 的属性 会变成最厉害  跟选择器没有关系
    
    */

    h2 {
      color: #f00 !important;
      font-size: 50px ;
    }

    .hh {
      color: #00f;
      font-size: 100px;
    }

继承的优先级

 /* 1. 凡是说道 选择器 的优先级 指 所有的选择器 选择的是 同一个标签 */

    /* 继承过来的 选择器的优先级 最低
      如果 自己身上没有设置样式 优先使用继承过来的样式 
      如果 自己身上 有了对应的选择器 设置样式 就 优先使用自己身上样式
    */

    .box {
      color: #f00;
    }
    h2 {
      color: #00f;
    }

复合选择器的优先级

/* div #hhh {
      color: pink;
    } */

    div h2 {
      color: #f00;
    }

    .box h2 {
      color: #00f;
    }

    .box .hh {
      color: #000;
    }
    #box {
      color: skyblue;
    }

权重计算

权重计算题解题步骤：

先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
通过权重计算公式，判断谁权重最高

选择器优先级不存在进位的问题

盒子模型

宽度与高度

.box {
      /* 盒子里面 内容 宽度 */
      width: 200px; 
      /* 盒子里面 内容 高度 */
      height: 200px;
      /* 边框 */
      border: 1px solid #000;
    
      /* 块级元素 如果没有设置宽度 宽度默认就是 父盒子的宽度 ；  没有设置高度的话，高度默认被内容撑开*/
    }

边框

.box {
      width: 100px;
      height: 100px;
      /* 边框 */
      border: 1px solid #000;
    }
    .box1 {
      width: 100px;
      height: 100px;
      border-left: 1px solid #000;
      border-top: 1px solid #000;
      border-bottom: 1px solid #f00;
      border-right: 1px solid #00f;
    }

 .box {
      /* 给盒子设置了边框 会让盒子变大
      
      盒子的初级计算公式：

      盒子的宽度 = 盒子内容的宽度 + 左右 边框的宽度
      盒子的高度 = 盒子内容的高度 + 上下 边框的宽度
      
      */
      width: 380px;
      height: 380px;
      background-color: #0f0;
      border: 10px solid #000;
    }

内边距

 <!-- padding： 内边距 盒子 里面的内容 到边框的 距离 -->
.box {
      width: 200px;
      height: 200px;
      background-color: pink;
      border: 10px solid #000;
      /* padding: 10px;全部 */
      /* padding: 10px 20px;  上下10  左右20 */
      /* padding: 10px 20px 30px; 上10  左右20  下40*/
      padding: 10px 20px 30px 40px;
    }

.box {
      width: 200px;
      height: 200px;
      border: 10px solid #000;
      background-color: pink;
      padding-left: 20px;
      padding-top: 30px;
      padding-right: 40px;
      padding-bottom: 50px;
    }

c3盒子模型

.box {
      width: 300px;
      height: 300px;
      background-color: pink;
      border: 10px solid #000;
      padding: 20px;
      box-sizing: border-box;
      /* 1. 手动内减 */
      /* 2. 利用 css3 的属性 box-sizing: border-box; √ */
    }

外边距

 .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* margin: 10px; */
      /* margin: 10px 20px; */
      /* margin: 10px 20px 30px; */
      margin: 10px 20px 30px 40px;
    }

 .box {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* margin-left: 20px; */
      /* margin-top: 20px; */
      /* margin-right: 20px; */
      margin-bottom: 30px;
    }
应用：调整盒子与盒子间的距离

清除内外边距

/* 清除 html 标签的 margin与padding */
    * {
      margin: 0;
      padding: 0;
    }

margin合并现象

/* 外边距合并现象
    1. 水平方向的两个盒子 同时 都设置 左右的 margin  它们之间的距离 是做 加法运算
    2. 垂直方向的两个盒子 同时 都设置 上下的 margin  它们之间的距离 是以 较大值为准
    
    如何解决：垂直方向的两个盒子 只给某一个盒子设置 margin 即可
    */
    span {
      background-color: pink;
    }
    .s1 {
      margin-right: 50px;
    }
    .s2 {
      margin-left: 30px;
    }
    div {
      width: 100px;
      height: 100px;
    }
    .box1 {
      background-color: pink;
      /* 下maring */
      margin-bottom: 50px;
    }
    .box2 {
      background-color: deeppink;
      /* 上 margin: ; */
      margin-top: 100px;
    }

结构：
 <span class="s1">1234</span><span class="s2">abcd</span>
  <hr>
  <div class="box1"></div>
  <div class="box2"></div>

解决方法：避免就好
• 只给其中一个盒子设置margin即可

塌陷现象

 .father {
      /* display: inline-block; */
      overflow: hidden;
      /* border-top: 1px solid #00f; */
      width: 200px;
      height: 400px;
      background-color: #f00;
    }
    .father .son {
      margin-top: 100px;
      width: 100px;
      height: 100px;
      background-color: #000;
    }

结构：
<!-- 需求：让 黑子的盒子 离 红色 盒子的 顶部 有 100px -->
  <div class="father">
    <div class="son"></div>
  </div>

解决方法：
1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动

栗子

新浪导航案例

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* css 代码的书写顺序 从外到里  从上到下 */
    .nav {
      height: 40px;
      /* background-color: pink; */
      /* 上边框 */
      border-top: 3px solid #ff8500;
      /* 下边框线 */
      border-bottom: 1px solid #edeef0;
    }
    .nav a {
      /* 转换为 行内块 */
      display: inline-block;
      /* width: 80px; */
      height: 40px;
      /* background-color: skyblue; */
      text-align: center;
      line-height: 40px;
      text-decoration: none;
      color: #4c4c4c;
      font-size: 12px;

      /* padding 盒子里面 内容区域 到 盒子边框的距离 */
      /* padding 会撑大盒子 */
      padding: 0 16px;

    }
    /* 鼠标悬停在 a 身上时 */
    .nav a:hover {
      /* 背景颜色 */
      background-color: #edeef0;
      /* 文字的颜色 */
      color: #ff8400;

    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">新浪导</a><a href="#">新浪导航</a><a href="#">新浪导航航</a><a href="#">新浪导航航</a>
  </div>
</body>
</html>

新闻案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 1. 清除 html 标签的 margin 和 padding */
    * {
      margin: 0;
      padding: 0;
    }
    .news {
      width: 500px;
      height: 400px;
      border: 1px solid #000;
      /* 大盒子 水平居中 */
      margin: 50px auto;
      /* 自动内减 */
      box-sizing: border-box;
      /* 站在 .news 盒子的角度  h1 与 ul 都是 .news 盒子里面的内容  内容区域 到 盒子 边框的距离  padding */
      padding: 0 30px;
    }
    .news h1 {
      border-bottom: 1px solid #000;
      font-size: 30px;
      padding-bottom: 8px;
      padding-top: 43px;
    }
    /* 清除 li 前面的 小黑点 */
    li {
      list-style: none;
    }
    .news li {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px dashed #000;
      padding-left: 30px;
    }
    a {
      text-decoration: none;
      color: #333;
    }
    a:hover {
      color: #0c82ff;
    }
  </style>
</head>
<body>
  <div class="news">
    <h1>最新文章/New Articles</h1>
    <ul>
      <li><a href=#">北京招聘网页设计，平面设计，php</a></li>
      <li><a href=#">体验javascript的魅力</a></li>
      <li><a href=#">jquery世界来临</a></li>
      <li><a href=#">网页设计师的梦想</a></li>
      <li><a href=#">jquery中的链式编程是什么</a></li>
    </ul>
  </div>
</body>
</html>

爱宠案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 1. 清除 html 标签的 margin 和 padding */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box { 
      width: 262px;
      height: 329px;
      border: 1px solid #009900;
      margin: 50px auto;
      background-image: url(./images/bg.gif);
      padding: 10px;
      
    }
    .box h2 {
      height: 23px;
      line-height: 23px;
      border-left: 4px solid #c9e143;
      font-size: 18px;
      color: #fff;
      padding-left: 6px;
      margin-bottom: 5px;

    }
    li {
      list-style: none;
    }
    .box ul {
      width: 240px;
      height: 279px;
      background-color: #fff;
    }
    .box li {
      /* 一个盒子的 高度 = 盒子内容的高度  + 上下 边框  + 上下 padding */
      height: 31px;
      line-height: 31px;
      font-size: 12px;
      border-bottom: 1px dashed #000;
      margin: 0 10px;
      background-image: url(./images/tb.gif);
      background-repeat: no-repeat;
      background-position: left center;
      padding-left: 16px;
    }

    a {
      text-decoration: none;
      color: #333;
    }

    a:hover {
      color: #f00;
    }

  </style>
</head>
<body>
  <div class="box">
    <h2>爱宠知识</h2>
    <ul>
      <li><a href="#">养狗比养猫对健康更有利</a></li>
      <li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
      <li><a href="#">狗狗歌曲《新年旺旺》</a></li>
      <li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
      <li><a href="#">【爆笑】这狗狗太不给力了</a></li>
      <li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
      <li><a href="#">狗狗各个阶段健康大事件</a></li>
      <li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
      <li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
    </ul>
  </div>
</body>
</html>

第三天

笔记

结构伪类选择器

作用：根据标签结构关系找标签

ul>Li{$}*38  忘了$

父标签里是同一类型，则用nth-child(n) 不同类型nth-of-type(n)

    /* 无法选中： 因为结构伪类是选择亲儿子 */
    ul a:first-child {
      /* background-color: pink; */
      color: orange;
    }
可选中
    ul li:first-child {
      background-color: pink;
    }


 <ul>
    <li><a href="#">我是第1个a</a></li>
    <li><a href="#">我是第2个a</a></li>
    <li><a href="#">我是第3个a</a></li>
    <li><a href="#">我是第4个a</a></li>
    <li><a href="#">我是第5个a</a></li>
  </ul>

伪元素

定义：通过css模拟出来的html标签，不是真正标签

特点：

是行内元素，
必须有content属性可空；本质是往双标签里插入内容
双标签才能使用伪元素；如input等不能使用

.box::before {
      display: block;
      content: 'aaa';
    }

标准流

块级元素垂直摆放，行内、行内块水平摆放，自动换行

浮动

作用

图片环绕
网页布局；本质让块级盒子可以多个水平摆放

特点

脱标：不占用位置
级别高：高于标准流半级，会覆盖标准流
具有行内块特点
浮动找浮动

案例要点

插入图片宽高要和父级盒子一致
行内转为块级后，不设宽度会自动继承父级，高度需设置父级的100%
扩大a链接的点击范围：转为块级，给父级宽高就可实现:hover范围扩大效果

清除浮动

定义：清除浮动的影响

原因：浮动后子元素会脱标
目的：让父级元素有高度，不影响其他元素的布局

方法

法一：给父级元素加高度 (频率最高)

法二：额外标签法(用的不多)

.clear {
clear:both;
}


<div class="box">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    //块级标签即可
    <div class="clear"></div>
  </div>
  <div class="footer"></div>

法三：伪元素清除浮动(额外标签法升级) 父元素添加伪元素

.box::after {
      content: '';
      display: block;
      clear: both;
    //可省 只是为隐藏
      height: 0;
      visibility: hidden;
    }

法三：双伪元素 (大厂用的多，直接复制即可用的较少)，给父级元素加类名

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

<div class="clearfix"> <div>

法四：给父元素直接设置overflow:hidden;
```
div {
    overflow:hidden;
}
```

拓展：以上方法能清除浮动的原因：BFC盒子的应用

定义：块格式化上下文 Block Formatting Context : 是web页面的可视css渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素和其他元素交互区域
创建BFC方法：
1. html标签是BFC盒子
2. 浮动元素是BFC盒子 float: ...
3. 行内块元素是BFC盒子 display: inline-block
4. overflow属性取值不为visible时 eg. overflow:hidden
  
  。。。
BFC常见特点：

BFC盒子会默认包裹住内部子元素(标准流、浮动) 应用：清除浮动

BFC盒子与子元素之间不存在margin的塌陷问题应用：解决margin的塌陷

栗子

京东页面案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 1150px;
      height: 390px;
      /* background-color: pink; */
      margin: 50px auto;
    }

    .box .left {
      /* 左浮动 */
      float: left;
      width: 350px;
      height: 390px;
      /* background-color: skyblue; */
    }

    .box .center {
      float: left;
      width: 350px;
      height: 390px;
      /* background-color: purple; */
      margin-left: 50px;
      margin-right: 50px;
    }

    .box .right {
      /* 右浮动 */
      float: right;
      width: 350px;
      height: 390px;
      /* background-color: hotpink; */
    }

    li {
      list-style: none;
    }

    .box .left li,
    .box .right li {
      float: left;
      width: 170px;
      height: 190px;
      /* background-color: #daa520; */
      /* margin-right: 10px; */
    }

    /* 经过我们的分析 .left 盒子 里面的 1 li 3 li 有 margin-right 需要使用结构伪类选择器 */

    .box .left li:nth-child(2n + 1),
    .box .right li:nth-child(2n + 1) {
      margin-right: 10px;
    }

    /* 仅仅只有 前面2个 li 有 margin-bottom */
    .box .left li:nth-child(-n + 2),
    .box .right li:nth-child(-n + 2) {
      margin-bottom: 10px;
    }

    .box .left a,
    .box .right a {
      display: block;
      height: 100%;
      width: 100%;
    }

    .box .left a img,
    .box .right a img {
      /* 让 图片的大小 和 a 标签的大小 */
      width: 100%;
      height: 100%;
    }

    .box .center a {
      display: block;
      width: 100%;
      height: 100%;
    }

    .box .center a img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">
      <ul>
        <li>
          <a href="#">
            <img src="./images/left01.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/left02.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/left03.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/left04.png" alt="">
          </a>
        </li>
      </ul>
    </div>
    <div class="center">
      <a href="#">
        <img src="./images/center.png" alt="">
      </a>
    </div>
    <div class="right">
      <ul>
        <li><a href="#"><img src="./images/right01.png" alt=""></a></li>
        <li><a href="#"><img src="./images/right02.png" alt=""></a></li>
        <li><a href="#"><img src="./images/right03.png" alt=""></a></li>
        <li><a href="#"><img src="./images/right04.png" alt=""></a></li>
      </ul>
    </div>
  </div>
</body>

</html>

第四天

学成在线页面制作

效果图展示

准备工作

创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
用vscode打开study目录文件夹。
study 目录内放入事先准备好的 images 文件夹，用于保存图片。
新建首页文件 index.html（以后我们的网站首页统一规定为 index.html )。
study 目录内新建 css 文件夹，用于保存css文件。

css 文件夹内里面新建一个index.css 文件，放入初始化css 代码。

/* css 初始化代码  css reset */

* {
    /* 清除默认内外边距 */
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}
/* 去掉列表默认样式 */
li {
    list-style: none;
}
/* 去掉链接默认下划线 */
a {
    text-decoration: none;
}
/*去掉button 默认自带的边框*/
button {
	border: none;
}
body {
	background-color: #f3f5f7;
}

我们本次采用外链样式表，讲css文件引入到html页面中。
```
<link rel="stylesheet" href="./css/index.css">
```

最终效果如下：

CSS 属性书写顺序(重点)

建议遵循以下顺序：

布局定位属性：display / position / float /clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性盒子模型：width / height / margin / padding/ border / background
文本属性：color / font / text-decoration /text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor /border-radius / box-shadow / text-shadow / background:linear-gradient …

比如：

.jdc {
    /* 第一档 */
    display: block;
    position: relative;
    float: left;
     /* 第二档 */
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
     /* 第三档 */
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
     /* 第四档 */
    background: rgba(0,0,0,.5);
    border-radius: 10px;
 }

页面布局思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

必须确定页面的版心（可视区），我们测量可得知。
分析页面中的行模块，以及每个行模块中的列模块。
一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置。
制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累。

学成在线版心

这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：

 .w {
    width: 1200px;
    margin: auto;
 }

学成在线头部制作- header

首先准备一个大盒子，作为头部模块, 设定好宽、高（1200*41）、背景色，居中对齐。
```
<div class="header">  </div>
```
里面可以划分为4个小模块

版心盒子里面包含 1 号盒子，我们命名为 logo
版心盒子里面包含 2 号盒子导航栏模块，我们命名为 nav
版心盒子里面包含 3 号盒子搜索框模块，我们命名为 search
版心盒子里面包含 4 号盒子用户模块，我们命名为 user

注意：要求里面的 4 个子盒子必须都是浮动，这样才会在一条线上。

学成在线banner制作

首先准备一个通栏的大盒子，给个高度（420px），然后给一个蓝色的背景颜色、背景图片。

相对路径：
- 同一级
- 下一级 /
- 上一级 ../
注意背景图片，要水平局中对齐，顶部靠上对齐
里面放版心（.w）局中对齐。里面包含左右2部分。
- 左侧是左侧导航栏，我们命名为 category (种类、类别)
- 右侧是课程表模块，我们命名为 course （课程）
- h2 标题
- ul 里面包含小li 模块
- 下部是链接模块 .all

<div class="course">
    <h2>我的课程表</h2>
    <ul>
        <li>
            <a href="#">
                <h4>继续学习 程序语言设计</h4>
                <p>正在学习-使用对象</p>
            </a>
        </li>
        <li>
            <a href="#">
                <h4>继续学习 程序语言设计</h4>
                <p>正在学习-使用对象</p>
            </a>
        </li>
        <li>
            <a href="#">
                <h4>继续学习 程序语言设计</h4>
                <p>正在学习-使用对象</p>
            </a>
        </li>
    </ul>
</div>

.category {
    float: left;
    width: 190px;
    height: 420px;
    background: rgba(0,0,0,.3);
    padding-top: 8px;
}
.category ul li a {
    display: block;
    height: 44px;
    line-height: 44px;
    /* padding-left: 20px;
    padding-right: 20px; */
    padding: 0 20px;
    color: #fff;
    font-size: 14px;
}
/* 伪元素 */
.category ul li a::after {
    content: '>';
    float: right;
    /* margin-right: 20px; */ 
}
.category ul li a:hover {
    background: rgba(0,0,0,.6);
    color: #00a4ff;
}
.course {
    float: right;
    width: 228px;
    height: 300px;
    background-color: #fff;
    margin-top: 50px;
}
.course h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    color: #fff;
    font-size: 18px;
}
.course ul {
    margin-top: 8px;
    padding: 0 20px;
}
.course ul li {
    height: 60px;
    padding-top: 12px;
    border-bottom: 1px solid #ccc;
}
.course ul li h4 {
    font-weight: 400;
    color: #4e4e4e;
}
.course ul li p {
    font-size: 14px;
    color: #a5a5a5;
}

.all {
    display: block;
    /* width: 200px; */
    height: 41px;
    border: 1px solid #00a4ff;
    margin: 5px 14px;
    text-align: center;
    line-height: 41px;
    color: #00a4ff;
    font-weight: 700;
}
.all:hover {
    background-color:#00a4ff;
    color: #fff;
}

学成在线标签模块

标签模块：命名为 tag

左侧标题 H3 左侧浮动
中间盒子左侧浮动 goods-item 距离可以控制链接的左右内边距（注意行内元素只给左右内边距）
右侧盒子右浮动 mod 修改 a

盒子阴影：box-shadow

box-shadow: 2px 2px 2px rgb(0,0,0,.2);

学成在线楼层区域-精品推荐

大盒子命名为： recommend /ˌrekəˈmend/ 推荐

里面包含上下2部分：

上部分头部我们命名为 floorhd
- 左侧是 h3 放标题
- 右侧是链接查看全部
下部分内容我们命名为 reco-inner
- 里面用ul和小 li 即可

注意：此处需要用到清除浮动。

学成在线楼层区域-编程入门

大盒子命名为： programme 编程

里面包含上下2部分：

上部分头部我们命名为 floorhd
- 左侧是 h3 放标题
- 中间是 ul 放 4个小li
- 右侧是链接查看全部
下部分内容我们命名为 pro-inner
- 左侧是 left 盒子左浮动
- 右侧是 right 右侧浮动
  - 右侧里面分为上盒子 right-top 放图片即可
  - 右侧里面分为下盒子 right-bottom 里面放 ul 和 li

学成在线楼层区域- 前端开发工程师

大盒子命名为： web

里面包含上下2部分：

上部分头部我们命名为 floorhd
- 左侧是 h3 放标题
- 中间是 ul 放 4个小li
- 右侧是链接查看全部
下部分内容我们命名为 reco-inner 里面放 5个小li即可跟精品推荐模块类似

底部模块

1 号盒子是通栏大盒子，底部footer 给高度，底色是白色
2 号盒子版心水平居中
3 号盒子版权 copyright 左对齐
4 号盒子链接组 links 右对齐

第五天

笔记整理

定位

静态定位

即默认值（标准流） position:static;

相对定位

 * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 600px;
      border: 1px solid #000;
      margin: 100px auto;
    }

    .box div {
      width: 100px;
      height: 100px;
    }

    .box div:first-child {

      background-color: #f00;
    }

    .box div:nth-child(2) {
      /* 相对定位 相对于曾经的自己来进行移动  
      只要移动（可以使用边偏移）了 就会在原来的位置 留下一个空白 
      但是如果我们不使用 边偏移 那么 相对定位的元素 它的位置是没有任何变化

        
      应用场景：
      相对定位一般很少自己来使用 
      相对定位一般是用于给绝对定位当爹 跟绝对定位用于组cp 
      
      */
      position: relative;
      /* left: 100px; */
      background-color: #0f0;
    }

    .box div:nth-child(3) {
      background-color: #00f;
    }

绝对定位

 * {
      margin: 0;
      padding: 0;
    }

    .box {
     /* position: relative; */
      width: 600px;
      border: 1px solid #000;
      margin: 100px auto;
    }

    .box div {
      width: 100px;
      height: 100px;
    }

    .box div:first-child {

      background-color: #f00;
    }

    .box div:nth-child(2) {
      /* 设置绝对定位 
      绝对定位先看看其父元素是否设置了（相对、固定、绝对）任何一种定位 ，就以其父元素来进行定位
      如果其父元素没有设置 （相对、固定、绝对）任何一种定位 则看看爷爷是否设置了 爷爷如果设置了 就以爷爷作为参照物来进行定位 
      .......

      如果其父辈元素没有设置，就相对于浏览器的可视区域来进行定位
      */
      position: absolute;
      right: 0;
      top: 0;

      background-color: #0f0;
    }

    .box div:nth-child(3) {
      background-color: #00f;
    }
    .yeye {
      /* position: relative; */
      width: 800px;
      margin: 100px auto;
      border: 1px solid #000;
    }
最常应用：子绝父相

绝对定位盒子水平居中

 .father {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 0 auto;
    }

    .son {
      position: absolute;
      /* 先让子盒子移动父盒子一半的位置 */
      left: 50%;
      top: 50%;
      width: 120px;
      height: 44px;
      background-color: #00f;
      /* margin: 0 auto; */
      /* 让自己往回走 自己宽度的一半 */
      /* margin-left: -60px;
      margin-top: -22px; */
      /* transform: translateX(-50%) translateY(-50%); */
      /* transform: ; */
      transform: translate(-50%, -50%);
    }

固定定位

  * {
      margin: 0;
      padding: 0;
    }
    body {
      height: 2000px;
    }

    img {
      /* 固定定位的元素 不管浏览器如何滚动 显示的位置是不会发生改变 */
      /* position: fixed;
      top: 50%;
      transform: translateY(-50%);
      width: 150px; */
      position: fixed;
    }

绝对定位，固定定位拥有行内块的特点不设置宽度它的宽度由其内容来决定

元素层级关系

不同布局方式元素的层级关系：
• 标准流 < 浮动 < 定位
不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

应用：提高层级如头部导航条

z-index:99;  
数字越大，层级越高

行内块细节

行内块默认是基线对齐，且（图片）底部有4px缝隙

 div {
      border: 1px solid #000;
    }

    img {
      vertical-align: top;
    }

结构：<div>
    <img src="./images/1.jpg" alt="">小姐姐真漂亮
  </div>

鼠标光标类型与圆角边框

 <ul>
    <li style="cursor: default;">默认</li>
    <li style="cursor: pointer;">小手</li>
    <li style="cursor: text;">工字型</li>
    <li style="cursor: move;">十字光标</li>
    <li style="cursor: not-allowed;">禁用</li>
  </ul>

 .box {
      width: 200px;
      height: 200px;
      background-color: pink;
     写法类似于内外边距
      /* border-radius: 10px; */
      /* border-radius: 10px 20px 30px; */
      border-radius: 50%;
    }

    img {
      border-radius: 50%;
    }


表格边框合并
 table {
      width: 400px;
      border: 1px solid #000;
      
      border-collapse: collapse;
    }
    tr,td {
      border: 1px solid #000;
    }

显示与隐藏

overflow

.box {
      /* 将溢出的部分进行隐藏 */
      /* overflow: hidden; */
    不管内容多少，呈现滚动条
      /* overflow: scroll; */
    内容溢出才呈现滚动条 
    overflow: auto;
      width: 100px;
      height: 100px;
      background-color: pink;
    }

显示与隐藏元素

  div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .box {
        页面删除元素，元素不占有位置
      display: none;
    }
    .news {
        页面隐藏元素  元素还占有位置
      visibility: hidden;
    }

栗子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      position: relative;
      width: 520px;
      height: 280px;
      margin: 100px auto;
    }
    .box a {
      /* 让a标签隐藏 */
      display: none;
      position: absolute;
      /* left: 0; */
      top: 50%;
      width: 20px;
      height: 40px;
      background-color: rgba(0,0,0,0.3);
      transform: translateY(-50%);
      color: #fff;
      text-decoration: none;
      text-align: center;
      line-height: 40px;
    }
    .box .prev {
      left: 0;
    }
    .box .next {
      right: 0;
    }
    /* 鼠标经过a时 将a的背景颜色 透明度 值设置 高一些 */
    .box a:hover {
      background-color: rgba(0,0,0,0.6);
    }
    /* 当鼠标悬停在 盒子上面时 让 a标签显示 */
    .box:hover a {
      display: block;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./images/22.jpg" alt="">
    <!-- 左右的箭头 -->
    <a href="#" class="prev">&lt;</a>
    <a href="#" class="next">&gt;</a>
  </div>
</body>
</html>

透明度opacity

  .box {
      width: 100px;
      height: 100px;
      只包含盒子本身
      background-color: rgba(255, 0, 0, 0.3);
      /* background-color: #000; */
      /* background-color: #f00;
      可看做是不透明度，0-1  值越大，越不透明  盒子及其内容
      opacity: 0.3; */
    }
    img {
      opacity: 0.3;
    }

第六天

笔记整理

选择器扩展

焦点伪类选择器

    input:focus {
      background-color: #f00;
    }



  <!-- 焦点伪类选择器：表单标签使用 -->
  <input type="text">
  <input type="text">

属性选择器

/* 先找到 input 标签 然后 在 找 input 标签里面 有 type属性的 就匹配到 */
    /* input[type] {
      background-color: #f00;
    } */
    /* input[name] {
      background-color: #00f;
    } */
    /* 先找到 input 标签 然后再找 input 标签里面 有 type属性 的 但是属性的值 必须是 password */
    input[type=password] {
      background-color: pink;
    }

结构：
 <!-- 属性选择器：根据 html 标签里面的属性 来获取对应的 html 标签 -->
  <!-- <标签名 属性名="属性值"></标签名> -->
  <input type="text" name="username">
  <input type="password">

精灵图使用

 body {
      background-color: pink;
    }
    /* 1. 准备一个盒子 css把每一个 html 标签 都看作为 一个盒子 */
    /* 2. 给这个盒子设置宽高 宽高 就是小图片的大小 */
    /* 3. 需要 将 大图片 作为 背景图片 设置为 小盒子 */
    /* 4. 设置背景图片的位置 需要设置为 负值 */
    .box {
      width: 27px;
      height: 27px;
      border: 1px solid #000;
      background-image: url(./images/sprites.png);
      background-position: -205px -71px;
    }


.box {
      width: 500px;
      height: 400px;
      border: 1px solid #000;
      /* background-image: url(./images/1.jpg);
      background-repeat: no-repeat; */
      /* 设置背景图片的大小 */
      /* background-size: 500px 500px; */
      /* background-size: 50% 50%; */
      /* background-size: contain; */
      /* background-size: cover; */
      /* background 这个属性是 css2版本的属性 */
      /* background-size 这个属性 css3
     
      background: 背景颜色 背景图片 背景图片是否平铺 背景图片的位置 / bgs

      1. background 这个属性 一定要写 background-positoin  如果没有位置 设置为 0 0 
      2. 在 background-position 属性值的后面 加 / background-size
      
      */
      background: pink url(./images/1.jpg) no-repeat 0 0 / contain;
    }

阴影

  .box {
      font-size: 50px;
      text-shadow: 2px 2px 2px #f00 , -2px -2px 2px #00f;
      /* text-shadow: 2px 2px 2px #00f; */
    }

  .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      /* box-shadow: 2px 2px 2px 2px #ccc, -2px -2px 2px 4px #f00;
       */
       box-shadow: 2px 2px 2px 2px #ccc inset;
    }

过渡

.box {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 过渡  观察鼠标悬停在 box 盒子身上时 w100 h100 ~ w300 h300 需要 2s */
      transition: all 2s;
      
    }
    /* 需求：当 鼠标悬停在 box 盒子上面时 让 box盒子的 w300 h300 */
    .box:hover {
      width: 300px;
      height: 300px;
      background-color: #00f;
    }

谁做过渡给谁加

标签解释

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 告诉浏览器使用 什么编码进行翻译 里面的文字 -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <meta name="description" content=""> -->
  <!-- <meta name="keywords" content=""> -->


<!-- <link rel="shortcut icon" href="favicon1.ico" type="image/x-icon"> -->
  <!-- favicon.ico 一定需要放在 写代码的目录 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">


</head>
<body>
  <!-- gb2312 仅仅支持 5000多个 简体中文 -->
  <!-- gbk 1995 2W多个 简体中文 -->
  <!-- big5 支持繁体中文 -->
  <!-- 编辑器 UTF-8 -->
  中国人 china
</body>
</html>