css基础
css原创css大约 2 分钟约 698 字
参考手册
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>
水平居中
.parent {
background-color:blue;
height:2000px;
position:relative;
}
.child {
background-color:red;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
/*向左、上平移 */
}
<div class="parent">
<div class="child"></div>
</div>
div平移
transform: translate(-50%, -50%);
修改全局变量
vue使用
定义
/*Vue写在App.vue的style里*/
:root {
--theme-color: pink;
}
使用
/*每个位置都可以这样使用，即颜色为pink*/
color: var(--theme-color);
动态修改
/*选中文档节点，好像全局变量是在html文档上的，所以可以这样动态修改*/
document.documentElement.style.setProperty("--theme-color","yellow");
html使用
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
padding: 5px;
}
#div2 {
background-color: var(--main-bg-color);
padding: 5px;
}
#div3 {
background-color: var(--main-bg-color);
padding: 5px;
}
</style>
</head>
<body>
<h1>var() 函数</h1>
<div id="div1">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
<br>
<div id="div2">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
<br>
<div id="div3">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
</body>
</html>
选择器
元素选择器
p {
text-align: center;
color: red;
}
ID选择器
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
</body>
</html>
引用两个类的元素
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">本段将是红色并居中对齐。</p>
<p class="center large">本段将是红色、居中对齐，并使用大字体。</p>
</body>
</html>
通用选择器
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>
分组选择器
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p>
</body>
</html>