• 圣杯与双飞翼布局，clip-path，列表与生成元素，计数器

    ❤️ Author： 老九
    ☕️ 个人博客：老九的CSDN博客
    🙏 个人名言：不可控之事 乐观面对
    😍 系列专栏：

    文章目录

    三栏等高自适应布局

    • 通过浮动，然后padding扩大，margin缩小。
    DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bintitle>
  <style>
    aside {
      float: left;
      width: 100px;
      background-color: yellow;
    }

    div {
      float: right;
      width: 120px;
      background-color: tan;
    }

    section {
      overflow: hidden;
    }

    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    main {
      background-color: green;
      overflow: hidden;
    }

    div,
    aside,
    main {
      padding-bottom: 310px;
      margin-bottom: -310px;
    }

  style>
head>

<body>
  <section>
    <aside>aaaaaside>

    <div>ccccdiv>
    <main>Lorem ipsum dolor sit illo reiciendis quaerat, voluptatem eveniet amet. Debitis dignissimos aperiam sequi id
      natus, omnis modi, nisi.main>
  section>

body>

html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    圣杯与双飞翼布局

    • 这个布局就是为了让前面的元素在中间，因为之前的浏览器加载慢都是先加载两边，再加载中间，圣杯布局可以让中间的元素先加载，提高用户的体验感觉，让用户先看到主题部分。

    列表与生成元素

    • 列表ul就是块元素，li继承了ul的块元素，所以li也是块元素，ul 可以设置列表类型，属性值是list-style-type或者是list-stye，默认是circle，还有disc，square，none，number等等有很多，浏览器的内置样式表里面：第一层ul是disc，第二层ul是circle，第三层ul是square
    • list-style中包括list-style-img，值是url的函数，所以那个点点可以变成一个图片
    • list-style中还包括list-style-position，这个可以调整图片的位置，值可以是inside，默认值是outside
    • 前面的点可以通过伪元素::marker进行设置，例如：ul li::marker{color:red}，可以将前面的点点颜色设置为红色。
    • 提到伪元素，不仅仅有::before,::after，input中的placeholder也可以通过伪元素进行设置，例如：input::placeholder{color:red;}，或者设置滚动条也可以通过伪元素，div::-webkit-scrollbar{width:8px;}，div::-webkit-scrollbar-thumb{background-color:red};，-webkit-scrollbar-buttonLactive{border-radius:8888px,height:9px}，这个伪元素可以加伪类，但是before和after不能加伪类。如果前面有两个冒号，::-webkit-scrollbar这个意思就是任何元素的滚动条。

    cursor(光标)

    • cursor属性可以改变鼠标在一段内容中的样式，值有crosshair(十字样式)，text(I形)，pointer(手形)，move(移动形状)，nw-resize(就是页面角角那个扩大缩小)，help，wait(沙漏)，progress(加载中)，url(xxxx.cur)

    outline(轮廓)

    • input那个框框就是轮廓，例子：outline：2px solid red;outline四周必须是一样的，所以不存在outline-top等等，更多的时候设置的是none ，如果加了tabindex可以被focus。

    page-break

          page-break-after: always;
      page-break-before: always;

    • 1
    • 2
    • 这两段代码可以实现h1标题在打印的时候实现独占一页

    ————————————————————————
    ♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
    版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

  • 相关阅读:
    HTML期末学生大作业-节日网页作业html+css+javascript
    为什么我抓不到baidu的数据包
    【元胞自动机】元胞自动机求解城市小区开放对周边道路通行影响研究【含Matlab源码 233期】
    114页5万字字智能交通大数据综合服务平台建设方案
    WPF引用LottieSharp加载json动画，json里有image就无效，请大家看看
    常用的贷后4大类指标介绍
    提取log文件中的数据，画图
    【实战】如何使用Spring Boot Jpa中的findAll进行specification动态查询
    【PAT（甲级）】1056 Mice and Rice
    vue router 解决路由带参数跳转时出现404问题
  • 原文地址：https://blog.csdn.net/partworld/article/details/128003610