mdn web docs
1.文本相关样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* width: 300px; */
height: 200px;
background-color: pink;
/* text-indent: 2em; */
/* 文本水平对齐方式 */
text-align: center;
/* overflow: auto; */
/* 行高 单行文本垂直居中 行高=元素高度*/
line-height: 200px;
}
a {
color: pink;
text-decoration: none;
/* text-decoration: line-through; */
/* text-decoration: overline; */
}
</style>
</head>
<body>
<div>我是一段文字的世界杯</div>
<a href="https://www.baidu.com">去百度</a>
</body>
</html>
2.goods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.goods {
width: 234px;
height: 300px;
background-color: rgb(217, 213, 213);
text-align: center;
}
.goods img {
width: 160px;
height: 160px;
}
.goods h5 {
font-size: 14px;
font-weight: 400;
}
.goods p {
font-size: 13px;
color: #b0b0b0;
}
.goods span:nth-of-type(1) {
color: orange;
font-size: 14px;
}
.goods span:nth-of-type(2) {
color: #b0b0b0;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="goods">
<img src="../202305291422_e96776c7e1e35cebb454457c3344d3cd.jpg" alt="">
<h5>Redmi Note 12T Pro</h5>
<p>年度最炫led屏幕之光</p>
<span>1499元起</span> <span>1599元</span>
</div>
</body>
</html>
效果图
3.list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* css具有层叠行,后面的会覆盖前面的 */
ul li {
height: 30px;
list-style: none;
list-style: circle;
}
</style>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
</ul>
</body>
</html>
效果图
4.元素显示模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 行内元素无法设置宽、高 转换为行内块元素 */
/* display: none;隐藏元素,脱离文档流 */
display: none;
/* display: inline-block; 将元素转换为行内块元素 */
/* display: inline; 行内元素 */
width: 300px;
height: 300px;
background-color: pink;
}
span {
display: inline-block;
/* display: block; 块元素 */
width: 300px;
height: 300px;
background-color: rgb(15, 105, 66);
}
a {
display: inline-block;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#">彻底</a> <a href="#">彻底</a> <a href="#">彻底</a> <a href="#">彻底</a>
<div class="box">11111</div>
<div class="box">22222</div>
<span>xjsasak</span>
</body>
</html>
效果图
5.背景
/* width: 4000px; */
height: 4000px;
/* background-color: aqua; */
/* background-image: url(../米莱迪.jpg); */
/* background-repeat: no-repeat; */
/* background-attachment: fixed; */
/* background-position: top left; */
background: fixed url(../米莱迪.jpg) no-repeat;
6.边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* border-radius: 10px; */
/* border-width 边框宽度 */
/* border-width: 20px;
border-style: solid;
border-color: rgb(35, 223, 18); */
border: 4px solid black;
/* border-radius: 50%; 边框弧度*/
border-top-left-radius: 40%;
}
</style>
</head>
<body>
<div>
我是一个盒子
</div>
</body>
</html>
效果图
7. 合并相邻边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
/* 合并相邻边框 */
border-collapse: collapse;
}
td {
border: 5px solid red;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td>dsnkd</td>
<td>cdcdzc</td>
<td>cdcd</td>
</tr>
</table>
</body>
</html>
8.阴影
box-shadow: 20px 20px 10px 10px black 图片阴影
text-shadow: red 5px 5px; 文字阴影
9.轮廓线
outline-style: groove; 框外面增加轮廓线
10.防拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
/* 防止文本拖拽 */
resize: none;
/* vertical-align改变与文字的对齐方式 */
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
</style>
</head>
<body>
<span>请输入个人介绍:</span>
<textarea name="xsnsmx" id="" cols="30" rows="10"></textarea>
</body>
</html>
11.隐藏元素
/* display: none; 脱离文档流,原来的位置不再保留 */
/* display: none; */
/*visibility: hidden; 元素隐藏,位置保留 */
/* visibility: hidden; */
/* opacity: 0; */
12.绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grandfather {
position: relative;
width: 1200px;
height: 1200px;
background-color: aquamarine;
}
.father {
/* position: relative; */
width: 600px;
height: 600px;
background-color: pink;
margin: 400px;
}
.son {
/* position: absolute; 绝对定位:不保留原来位置 子绝父相 父亲没有相对定位,继续向上找,谁有相对定位,以谁作为参考移动
如果都没找到,则相对于浏览器进行定位
*/
position: absolute;
/* top: -100px; */
bottom: -100px;
left: 500px;
width: 100px;
height: 100px;
background-color: aqua;
}
.son2 {
width: 100px;
height: 100px;
background-color: rgb(40, 65, 65);
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son">1</div>
<div class="son2">2</div>
</div>
</div>
</body>
</html>
position: fixed; 固定定位:相对于可视区域进行定位
position: sticky; 粘性定位
z-index 定位中显示的优先级