Web前端线上系统课-01-HTML+CSS/08-结构伪类-图形-字体-字体图标-元素定位

已于 2022-04-14 18:47:45 修改
阅读量80 收藏
点赞数
文章标签： html5 css
于 2022-04-14 18:44:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderlb/article/details/124178837
版权

结构伪类-图形-字体-字体图标-元素定位

结构性伪类选择器

nth-child

  • 父元素中的第n个子元素

nth-child(n)

<!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>
      ul li:nth-child(1) {
        color: #f00;
      }

      ul li:nth-child(3) {
        color: #f00;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>列表元素1</li>
      <li>列表元素2</li>
      <li>列表元素3</li>
      <li>列表元素4</li>
      <li>列表元素5</li>
      <li>列表元素6</li>
    </ul>
  </body>
</html>

nth-child(几n + 几)

<!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>
      ul li:nth-child(2n) {
        color: #0f0;
      }

      ul li:nth-child(2n + 1) {
        color: blue;
      }

      div > div:nth-child(4n + 1) {
        color: orange;
      }

      div > div:nth-child(4n + 2) {
        color: purple;
      }

      div > div:nth-child(4n + 3) {
        color: red;
      }

      div > div:nth-child(4n + 4) {
        color: green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>列表元素1</li>
      <li>列表元素2</li>
      <li>列表元素3</li>
      <li>列表元素4</li>
      <li>列表元素5</li>
      <li>列表元素6</li>
    </ul>
    <div>
      <div>列表元素1</div>
      <div>列表元素2</div>
      <div>列表元素3</div>
      <div>列表元素4</div>
      <div>列表元素5</div>
      <div>列表元素6</div>
      <div>列表元素7</div>
      <div>列表元素8</div>
      <div>列表元素9</div>
      <div>列表元素10</div>
    </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>
      ul li:nth-child(2n) {
        color: #0f0;
      }

      ul li:nth-child(2n + 1) {
        color: blue;
      }

      div > div:nth-child(4n + 1) {
        color: orange;
      }

      div > div:nth-child(4n + 2) {
        color: purple;
      }

      div > div:nth-child(4n + 3) {
        color: red;
      }

      div > div:nth-child(4n + 4) {
        color: green;
      }

      div > div:nth-child(-n + 5) {
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>列表元素1</li>
      <li>列表元素2</li>
      <li>列表元素3</li>
      <li>列表元素4</li>
      <li>列表元素5</li>
      <li>列表元素6</li>
    </ul>
    <div>
      <div>列表元素1</div>
      <div>列表元素2</div>
      <div>列表元素3</div>
      <div>列表元素4</div>
      <div>列表元素5</div>
      <div>列表元素6</div>
      <div>列表元素7</div>
      <div>列表元素8</div>
      <div>列表元素9</div>
      <div>列表元素10</div>
    </div>
  </body>
</html>
  • 偶 even
  • 奇数 odd

nth-last-child

<!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>
      ul > li:nth-child(2) {
        color: red;
      }

      ul > li:nth-last-child(2) {
        color: red;
      }

      ul > li:nth-last-child(-n + 3) {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>列表元素1</li>
      <li>列表元素2</li>
      <li>列表元素3</li>
      <li>列表元素4</li>
      <li>列表元素5</li>
      <li>列表元素6</li>
      <li>列表元素7</li>
      <li>列表元素8</li>
    </ul>
  </body>
</html>

nth-of-type

<!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>
      .box div:nth-child(3) {
        color: red;
      }

      .box div:nth-of-type(3) {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>我是列表1</div>
      <p>我是p元素捣乱的</p>
      <div>我是列表2</div>
      <div>我是列表3</div>
      <div>我是列表4</div>
      <div>我是列表5</div>
      <div>我是列表6</div>
      <div>我是列表7</div>
      <div>我是列表8</div>
      <div>我是列表9</div>
      <div>我是列表10</div>
    </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>
      .box div:nth-child(3) {
        color: red;
      }

      .box div:nth-child(9) {
        color: red;
      }

      .box div:nth-of-type(3) {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>我是列表1</div>
      <p>我是p元素捣乱的</p>
      <span>我是span1</span>
      <span>我是span2</span>
      <span>我是span3</span>
      <div>我是列表2</div>
      <div>我是列表3</div>
      <div>我是列表4</div>
      <div>我是列表5</div>
      <div>我是列表6</div>
      <div>我是列表7</div>
      <div>我是列表8</div>
      <div>我是列表9</div>
      <div>我是列表10</div>
    </div>
  </body>
</html>

nth-last-of-type

first-child

<!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>
      .box > div:first-child {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>列表内容1</div>
      <div>列表内容2</div>
      <div>列表内容3</div>
      <div>列表内容4</div>
      <div>列表内容5</div>
    </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>
      .box > :first-child {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>span元素</span>
      <div>列表内容1</div>
      <div>列表内容2</div>
      <div>列表内容3</div>
      <div>列表内容4</div>
      <div>列表内容5</div>
    </div>
  </body>
</html>

last-child

first-of-type

last-of-type

only-child

<!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>
      .box > :first-child {
        color: red;
      }

      .boxs div:only-child {
        color: green;
      }

      .boxes div:only-child {
        color: green;
      }

      .boxss div:only-of-type {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>span元素</span>
      <div>列表内容1</div>
      <div>列表内容2</div>
      <div>列表内容3</div>
      <div>列表内容4</div>
      <div>列表内容5</div>
    </div>

    <div class="boxs">
      <div>我是box的div</div>
    </div>

    <div class="boxes">
      <div>我是box的div</div>
      <p>p元素</p>
      <p>p元素</p>
    </div>
    <div class="boxss">
      <div>我是container的div</div>
      <p>p元素</p>
      <p>p元素</p>
    </div>
  </body>
</html>

only-of-type

<!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>
      .box > :first-child {
        color: red;
      }

      .boxs div:only-child {
        color: green;
      }

      .boxes div:only-child {
        color: green;
      }

      .boxss div:only-of-type {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>span元素</span>
      <div>列表内容1</div>
      <div>列表内容2</div>
      <div>列表内容3</div>
      <div>列表内容4</div>
      <div>列表内容5</div>
    </div>

    <div class="boxs">
      <div>我是box的div</div>
    </div>

    <div class="boxes">
      <div>我是box的div</div>
      <p>p元素</p>
      <p>p元素</p>
    </div>
    <div class="boxss">
      <div>我是container的div</div>
      <p>p元素</p>
      <p>p元素</p>
    </div>
  </body>
</html>

root

<!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>
      .box > :first-child {
        color: red;
      }

      .boxs div:only-child {
        color: green;
      }

      .boxes div:only-child {
        color: green;
      }

      .boxss div:only-of-type {
        color: blue;
      }

      :root {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>span元素</span>
      <div>列表内容1</div>
      <div>列表内容2</div>
      <div>列表内容3</div>
      <div>列表内容4</div>
      <div>列表内容5</div>
    </div>

    <div class="boxs">
      <div>我是box的div</div>
    </div>

    <div class="boxes">
      <div>我是box的div</div>
      <p>p元素</p>
      <p>p元素</p>
    </div>
    <div class="boxss">
      <div>我是container的div</div>
      <p>p元素</p>
      <p>p元素</p>
    </div>
  </body>
</html>

empty

<!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>
      .box > :first-child {
        color: red;
      }

      .boxs div:only-child {
        color: green;
      }

      .boxes div:only-child {
        color: green;
      }

      .boxss div:only-of-type {
        color: blue;
      }

      :root {
        font-size: 30px;
      }

      :empty {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>span元素</span>
      <div>列表内容1</div>
      <div>列表内容2</div>
      <div>列表内容3</div>
      <div>列表内容4</div>
      <div>列表内容5</div>
    </div>

    <div class="boxs">
      <div>我是box的div</div>
    </div>

    <div class="boxes">
      <div>我是box的div</div>
      <p>p元素</p>
      <p>p元素</p>
    </div>
    <div class="boxss">
      <div>我是container的div</div>
      <p>p元素</p>
      <p>p元素</p>
    </div>
    <div></div>
  </body>
</html>

not

<!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>
      div > .item {
        color: red;
      }

      div > :not(.item) {
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="item">列表内容1</div>
      <div class="item">列表内容2</div>
      <div class="why">列表内容3</div>
      <div class="item">列表内容4</div>
      <div class="item">列表内容5</div>
    </div>
  </body>
</html>

border边框

<!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>
      .box {
        width: 100px;
        height: 100px;
        /* background-color: #f00; */
        box-sizing: border-box;
        border: 50px solid orange;
        /* border-right-color: blue;
        border-bottom-color: aqua;
        border-left-color: purple; */
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        transform: rotate(180deg);
        transform-origin: 50% 25%;
      }
    </style>
  </head>
  <body>
    <div class="box"></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>
      .box {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        border: 50px solid transparent;
        border-top-color: orange;
        transform: rotate(180deg);
        transform-origin: 50% 25%;
      }
    </style>
  </head>
  <body>
    <div class="box"></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>
      /* 将这个字体引入到网页中 */
      @font-face {
        font-family: "AaQingHuanYuanTi";
        src: url("./fonts/AaQingHuanYuanTi-2.ttf");
      }

      .box {
        font-size: 20px;
        font-family: "AaQingHuanYuanTi";
      }
    </style>
  </head>
  <body>
    <div>我是div元素</div>
    <div class="box">我是div元素</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>
      @font-face {
        font-family: "AaQingHuanYuanTi";
        src: url("./fonts02/AaQingHuanYuanTi.eot"); /* IE9 */
        src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix")
            format("embedded-opentype"),
          /* IE6-IE8 */ url("./fonts02/AaQingHuanYuanTi.woff") format("woff"),
          /* chrome、firefox */ url("./fonts02/AaQingHuanYuanTi.ttf")
            format("truetype"),
          /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
            url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
        font-style: normal;
        font-weight: 400;
      }

      .box {
        font-family: "AaQingHuanYuanTi";
      }
    </style>
  </head>
  <body>
    <div>我是div元素</div>
    <div class="box">我是div元素</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>
      @font-face {
        font-family: "iconfont";
        src: url("./fonts3/iconfont.ttf");
      }

      .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .music::before {
        content: "\e664";
      }

      .icon {
        width: 20px;
        height: 20px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <i class="iconfont">&#xe654;</i>
    <i class="iconfont">&#xe664;</i>
    <i class="icon"></i>
    <i class="iconfont music"></i>
  </body>
</html>

字体图标的使用步骤

  • 通过link引入iconfont.css文件
  • 使用字体图标

使用字体图标常见的两种方式

  • 通过对应字体图标的Unicode来显示代码
  • 利用已经编写好的class，直接使用既可
<!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>
    <link rel="stylesheet" href="./fonts3/iconfont.css" />
    <style>
      .icon-shouye {
        font-size: 30px;
        color: red;
      }
    </style>
  </head>
  <body>
    <i class="iconfont icon-shouye"></i>
  </body>
</html>

精灵图

什么是精灵图

  • 是一种css图像合成技术，将各种小图片合并到一张图片上，然后利用css的背景定位来显示对应的图片部分
  • 有人翻译为 css雪碧 css精灵

使用css精灵图的好处

  • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
  • 减少图片总大小
  • 解决了图片命名的困扰，只需要针对一张集合的图片命名

http://www.spritecow.com/

<!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>
      .box {
        background-color: #333;
      }

      i.topbar {
        display: inline-block;
        background-image: url(./images/topbar_sprite.png);
        background-repeat: no-repeat;
      }

      i.hot-icon {
        width: 26px;
        height: 13px;
        background-position: -192px 0;
      }

      i.logo-icon {
        width: 157px;
        height: 33px;
        background-position: 0 -19px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <i class="topbar hot-icon"></i>
      <i class="topbar logo-icon"></i>
    </div>
  </body>
</html>

cursor

  • 鼠标样式
    • auto
    • default
    • pointer
    • text
    • none
<!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>
      div {
        /* cursor: auto; */
        cursor: pointer;
        text-decoration: underline;
        color: #00f;
      }

      a {
        cursor: auto;
      }
    </style>
  </head>
  <body>
    <div>我是box</div>
    <a href="http://www.baidu.com">百度一下</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>
      .box {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>div元素</div>
    <span>span元素</span>
    <img src="./images/gouwujie01.jpg" alt="" />
    <div class="box"></div>
  </body>
</html>

static

  • 默认值 静态定位
    • left/right/bottom/top 无效
<!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>
      .box {
        display: inline-block;
        /* 默认值 静态定位 */
        position: static;
      }
    </style>
  </head>
  <body>
    <div>div元素</div>
    <span>span元素</span>
    <img src="./images/gouwujie01.jpg" alt="" />
    <div class="box"></div>
  </body>
</html>

relative

  • 相对定位
    • left/right/top/bottom 有效
    • 定位参照对象是元素自己原来的位置
<!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>
      .text {
        position: relative;
        /* top: 50px; */
        /* left: 30px; */
        /* bottom: 50px;
        right: 30px; */
        top: -50px;
        left: -30px;
      }
    </style>
  </head>
  <body>
    <span>我是span元素</span>
    <strong class="text">我是strong元素</strong>
    <img src="./images/kobe01.jpg" alt="" />
    <div>我是div元素</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>
      div {
        font-size: 20px;
      }

      span {
        font-size: 12px;
        position: relative;
        top: -8px;
      }
    </style>
  </head>
  <body>
    <div>3<span>2</span>+2<span>3</span> = 17</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>
      body {
        padding: 0;
        margin: 0;
      }

      .box {
        height: 489px;
        background-color: #f00;
        overflow: hidden;
      }

      .box img {
        position: relative;
        left: -960px;
        margin-left: 50%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/mhxy.jpg" alt="" />
    </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>
      body {
        padding: 0;
        margin: 0;
      }

      .box {
        height: 489px;
        background-color: #f00;
        overflow: hidden;
      }

      .box img {
        position: relative;
        transform: translate(-50%);
        margin-left: 50%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/mhxy.jpg" alt="" />
    </div>
  </body>
</html>

absolute

  • 绝对定位

fixed

  • 固定定位
  • top/right/bottom/left 有效
  • 定位参考对象是视口 (viewport)
<!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>
      .text {
        position: fixed;
        /* left: 0;
        top: 0; */
        bottom: 30px;
        right: 30px;
      }
    </style>
  </head>
  <body>
    <span>我是span元素</span>
    <strong class="text">我是strong元素</strong>
    <img src="./images/kobe01.jpg" alt="" />
    <div>我是div元素</div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </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>
      .handle {
        position: fixed;
        right: 30px;
        bottom: 30px;
      }

      .handle .item {
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: brown;
        color: #fff;
        border-radius: 8px;
        cursor: pointer;
      }

      .handle .item:hover {
        background-color: red;
      }

      .top {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="handle">
      <div class="item top">顶部</div>
      <div class="item bottom">反馈</div>
    </div>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
  </body>
</html>

sticky

  • 粘性定位

内容回顾

一、结构伪类

1.1.nth-child
  • nth-child(2)
  • nth-child(2n + 1)
  • nth-child(-n + 5)
1.2.
  • nth-last-child
  • nth-of-type
  • nth-last-of-type
1.3.其他结构伪类
  • first-child
  • root
    • html
  • empty
1.4.否定伪类
  • not()

二、额外知识补充

2.1.border的图形
  • 三角形
  • 旋转
2.2.网络字体
2.3.字体图标
  • 选择图标
  • 下载代码
  • 在项目中使用
2.4.css sprite
  • 将多个图标放到一张图片
  • 使用图片
    • width
    • height
    • background-position

三、元素定位

3.1.对标准流的理解
3.2.元素的定位

常见的值

  • static
  • relative
  • absolute
  • fixed
  • sticky
3.3.相对定位
  • relative
    • 相对于自己原来的位置(标准流中的位置)
    • left/right/top/bottom
  • 小案例
    • 3 + 2 = 5
  • img居中显示
3.4.固定定位
  • fixed
    • 相对视口
    • 不会随着内容的滚动而滚动
  • 练习
    • 建议/反馈案例

课后作业

一. 完成课堂所有的代码

二. 说出结构伪类的nth-child和nth-of-type的区别，并且写出案例练习

三. 自己练习使用字体图标

  • 从iconfont中下载图标练习

四. 自己找精灵图进行练习

五. 结合CSS元素定位，并且找出对应的练习案例（2个）

coderlb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML基础
qq_44801321的博客
08-14 3766
W3C标准 结构化标准语言（HTML,XML）. 表现标准语言（CCS）. 行为标准语言（DOM，ECMAscript） HTML基本结构 <body> <-body>等成对的标签分别叫做开放标签和闭合标签 单独出现的叫自闭合标签 <!--DOCTYPE用来定义标准--> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页的头部--> <head> <!--meta描述
html基础学习
最新发布
weixin_52676304的博客
10-15 4506
html新手学习，以菜鸟教程为主
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 7132
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
HTML - DOCTYPE和lang以及字符集的作用
qq_33962481的博客
05-11 4322
文章目录一、使用VSCode生成骨架标签二、新增代码解释1. ``标签2. lang : 语言3. charset : 字符集 一、使用VSCode生成骨架标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
Web-前端html+css从入门到精通 157. 自定义字体图标.zip
05-23
传统的图标通常是图像文件（如PNG或SVG），但字体图标是将图标设计成字体样式，通过CSS控制大小、颜色和其它样式属性。这种技术的优点在于它们可以像文字一样缩放，保持清晰，且加载速度快，对搜索引擎友好。 创建...
Web-前端html+css从入门到精通 155. @fontface字体图标.zip
05-23
许多图标库如Font Awesome、Ionicons等提供了字体图标集，这些图标以矢量图形的形式存储在字体文件中，可以像使用普通文字一样设置大小、颜色等样式。 5. **浏览器兼容性**：虽然现代浏览器广泛支持`@font-face`，...
Web-前端html+css从入门到精通 156. iconfont矢量图标库.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础技术，而Iconfont矢量图标库则是提升用户体验、美化网站设计的重要工具。本课程“Web-前端html+css从入门到精通 156. iconfont矢量图标库”将深入讲解如何使用Iconfont来...
Web-前端html+css从入门到精通 143. 划入划出的小图标.zip
05-23
在本课程中，“Web-前端html+css从入门到精通 143. 划入划出的小图标”主要探讨了如何使用HTML和CSS技术来实现网页中的动态效果，特别是针对鼠标悬停时元素的划入划出效果。这一主题对于创建交互性强、用户体验良好...
Web-前端html+css从入门到精通 222. Sass与Less嵌套之选择器伪类属性.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础，但随着技术的发展，为了提升样式编写效率和代码可维护性，Sass和Less等预处理器应运而生。本课程聚焦于Sass和Less中的嵌套规则，以及它们如何处理选择器的伪类和属性，...
HTML入门学习
qq_46556545的博客
03-23 3986
基本标签 文档声明 <!DOCTYPE html> <!--文档声明，表示这是一个HTML页面--> HTML标签 <html> </html> <!--标签对，告诉浏览器这个页面的范围--> head标签 <head> </head> <!--标签对，是网页的头部，用于定义一些特殊的内容--> body标签 标题标签 段落标签 换行标签 水平线标签 字体样式标签 常见特殊符号
前端的学习之路：初级HTML---meta标签
weixin_44647555的博客
02-01 776
meta标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>meta标签</title> </head> <body> <!--
2.web前端开发（一）0226html基础
guozhuanchen的博客
02-26 537
一、html概述 1.html是超文本标记语言，主要就是一系列标签组成 2.使用的工具是 Visual Studio Code 3.html是搭建网页的框架、css是把html写的框架进行美化、javaScript是实现数据的交互、react或者vue是前端框架使得开发更简便 4.可以自己学习的网址 W3school 菜鸟教程 二、主要的标签以及其对应的属性 （一）进入工具 写出默认的网页 并认识基本框架 1.进入工具 打出默认的结构 先按 ！ 在按 tab键 2.对框架的认识 <!DOCTY
HTML 基本开发方式，学会常用的 HTML 标签
1226
04-28 1万+
一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单，语法风格和 Java 之类的差别很大，(并不能表达一些逻辑，而只是能表达 “有哪些东西" 一种信息)， 使用记事本创建一个文件，后缀名改成 .html 即可，运行 html 也不需要额外的编译器，直接有浏览器就行 hello world! 虽然这个代码能运行，但是其实并不算是一个合法的 HTML 语法，那为什么浏览器还能正常运行呢?? 鲁棒性：“容错能力” 强 <html> <head> &
HTML中的实体，meta标签
Ice Point.
01-15 234
实体：&实体的名字; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实体</title> </head> <body>
前端学习B
GanZzaz的博客
08-31 136
1JavaScript编程语言 1）三种引用JS 2）变量声明与赋值 变量命名规则 1.变量的名字必须是数字、字母、下划线_和$组成 2.变量名字不能以数字开头 3.变量的名字 不能是关键字 for while if 在 J S 中变量是区分大小写的数据类型 - 数值和字符串 数值 Number 型还有布尔 Boolean 型、字符串 String 型、undefined 型、null 型和对象 Object 型。 字符串型是使用单引号或双引号才是字符串，不管是数字还是名字。转义符 \n 换行 \t 制表
js 收银元小程序
weixin_30594001的博客
08-21 290
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js考试</title></head><script type="text/javascript">// 1.编写一个程序，计算增加后的工资。要求基本工资大于等于100...
flex 运用跟兼容写法
lianxin19900610的博客
06-25 7704
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 57万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
vue-cli3结合vant与postcss-px2rem的移动端开发实战
"本文档详述了如何使用vue-cli3、 vant UI组件库以及postcss-px2rem来构建和适配移动端页面的过程。" 在移动端应用开发中，选择合适的框架和技术栈至关重要。本示例选择了`vue-cli3`作为项目脚手架，它提供了快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值