css 分类

CSS生成工具

刘欢原创2022/6/27小于 1 分钟

计数器

带计数器的自动编号

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>使用 CSS 计数器：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>
<p>python</p>
</body>
</html>

刘欢原创2022/6/27小于 1 分钟

实用工具

CSS生成工具

生成工具

刘欢原创2022/6/27小于 1 分钟

css基础

参考手册

div吸顶-sticky

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

刘欢原创2022/5/28大约 2 分钟

css

刘欢原创2022/5/28小于 1 分钟

flex布局

基础应用

基础布局

display: flex;
		flex-direction: row;
		border-radius: 10rpx;
		justify-content: space-between;
		background-color: #064175;
		line-height: 50rpx;
		text-align: center;
		view{
			color: white;
			font-size: 20rpx;
			flex:3
		}

刘欢原创2022/5/28小于 1 分钟

布局

刘欢原创2022/5/28小于 1 分钟