❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：
文章目录
- 圣杯与双飞翼布局
- clip属性
- clip-path属性
- 例子（不同区域使用不同颜色的导航）
- 列表与生成元素
- 列表
- 计数器
- 计数器嵌套
- cursor(光标)
- outline(轮廓)
- page-break
圣杯与双飞翼布局
- 这个布局就是为了让前面的元素在中间，因为之前的浏览器加载慢都是先加载两边，再加载中间，圣杯布局可以让中间的元素先加载，提高用户的体验感觉，让用户先看到主题部分。
clip属性
- css2中唯一可用的剪裁形状是矩形，值有rect(top，right，bottom，left)，auto，inherit，它的初始值是auto，，主要应用在绝对定位元素中，常规流元素是剪裁不掉的。
clip-path属性
- 这个可以对任意元素进行裁剪，并且可以裁剪成任何形状，例如clip-path：circle(20px at 10px 10px);,ellipse():这个是裁剪成椭圆的样式，polygon(50% 0，100% 50%，50% 100%，0 50%)：这个是多边形的菱形
例子（不同区域使用不同颜色的导航）
<!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:nth-of-type(1) {
background-color: tan;
}
div:nth-of-type(2) {
background-color: violet;
}
div:nth-of-type(3) {
background-color: lime;
}
div:nth-of-type(4) {
background-color: olive;
}
div:nth-of-type(5) {
background-color: pink;
}
html {
scroll-behavior: smooth;
}
div {
height: 100vh;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
ul {
position: fixed;
right: 0;
top: 45%;
}
</style>
</head>
<body>
<div id="a1">
<ul>
<li><a href="#a1">a1</a></li>
<li><a href="#a2">a2</a></li>
<li><a href="#a3">a3</a></li>
<li><a href="#a4">a4</a></li>
<li><a href="#a5">a5</a></li>
</ul>
</div>
<div id="a2">
<ul>
<li><a href="#a1">a1</a></li>
<li><a href="#a2">a2</a></li>
<li><a href="#a3">a3</a></li>
<li><a href="#a4">a4</a></li>
<li><a href="#a5">a5</a></li>
</ul>
</div>
<div id="a3">
<ul>
<li><a href="#a1">a1</a></li>
<li><a href="#a2">a2</a></li>
<li><a href="#a3">a3</a></li>
<li><a href="#a4">a4</a></li>
<li><a href="#a5">a5</a></li>
</ul>
</div>
<div id="a4">
<ul>
<li><a href="#a1">a1</a></li>
<li><a href="#a2">a2</a></li>
<li><a href="#a3">a3</a></li>
<li><a href="#a4">a4</a></li>
<li><a href="#a5">a5</a></li>
</ul>
</div>
<div id="a5">
<ul>
<li><a href="#a1">a1</a></li>
<li><a href="#a2">a2</a></li>
<li><a href="#a3">a3</a></li>
<li><a href="#a4">a4</a></li>
<li><a href="#a5">a5</a></li>
</ul>
</div>
</body>
</html>
列表与生成元素
列表
- 列表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这个意思就是任何元素的滚动条。
- before伪元素的content值有open-quote(开始引号的意思)，close-quote(结束的引号的意思)
计数器
<!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>
h1 {
counter-reset: paras;
}
/*ppp的每个计数器变量都增加2*/
p {
counter-increment: paras ppp 2;
}
p::before {
content: counter(paras) '. ' counter(ppp, cjk-earthly-branch);
}
section::after {
content: counter(ppp, cjk-earthly-branch);
}
</style>
</head>
<body>
<div>
<h1>title1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, cum optio aut fugit neque vitae commodi vel quasi
perspiciatis recusandae nisi sit ex at consequuntur, reprehenderit adipisci. Obcaecati, illo harum!</p>
<p>Voluptatum numquam ad officiis, aperiam nisi nemo amet! Iusto esse, fugiat sapiente perferendis architecto
aperiam
maxime quidem fuga, aliquam cupiditate eligendi voluptatibus delectus ex eius necessitatibus dolorum eos dolorem
expedita?</p>
<p>Natus ullam odit ipsam tenetur aliquam quasi dolores, quidem dolore dolorem recusandae itaque cumque consequatur
vel, reiciendis placeat assumenda fugit impedit, neque ut facere. Eius, numquam qui? Pariatur, reprehenderit
optio!
</p>
<h1>title2</h1>
<p>Velit quia molestiae sapiente, aspernatur at dolor, dignissimos commodi harum voluptates ad officia fugiat
molestias dolorum adipisci cumque. Accusamus, sequi dolorem temporibus perferendis provident ullam distinctio
dolore
eligendi? Voluptates, nisi!</p>
<p>Sit sequi repudiandae officia corporis vel consequuntur laborum expedita, sint saepe dolore? Facilis facere
impedit
quaerat temporibus, autem ipsa magni voluptates tempore pariatur quos sint sunt provident cumque dolor totam.</p>
</div>
<section>aaaa</section>
</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 {
list-style: none;
counter-reset: list-item-count;
}
ul li {
counter-increment: list-item-count;
}
ul li::before {
content: counters(list-item-count, '.');
}
</style>
</head>
<body>
<ul>
<li>Lorem.
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</li>
</ul>
</li>
<li>Perferendis!
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</li>
<li>Dicta.</li>
<li>Mollitia!</li>
<li>Fuga.</li>
</ul>
</body>
</html>
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;
- 这两段代码可以实现h1标题实现独占一页
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章
