1.使用！+Tab,可以弹出所有完整HTML框架。【！是英文状态】
（如果遇到！失效，无发弹出html框架格式，则如下图设置即可）
2.背景颜色，用<style>里body{background-color:#111111111;}，样式写在<head>和</head>中间。
3.字体居中，先用<style>里.center-text{text-align:center; }，样式写在<head>和</head>中;再在 <body>里，用<div class="center-text"> <p> 已到店</p> </div>
代码如下：
<!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>邀请函</title>
<style>
.center-text{
text-align:center;
}
body{
background-color:#e2345555;
}
</style>
</head>
<body>
<div class="center-text">
<p> 已到店就餐，期待您的下次光临~</p>
</div>
</body>
</html>
4.调整背景颜色大小(高度)：共2步；
1.在head里面设置参数；
2.在body里面调用类。
<head>
<style>
.full-height-background-vh{
height:10vh; //10%大小
background-color:#e9194379;
}
</style>
</head>
<body>
<div class="full-height-background-vh">
</div>
</body>
5.说白了，就是：
.巴拉拉{}
<div class="巴拉拉"></div>
1).在<head><style>,</style></head>里面写了什么类（里面包含各种属性）；
例如：
.full-height-background-vh-textsize{ //.巴拉拉{}
height:10vh;
background-color:#e9194379;
text-align:center;
}
2).然后在<body>,</body>里调用这个类就可以了。
例如：
<div class="full-height-background-vh-textsize"> //<div class="巴拉拉"></div>
<p> 已到店就餐，期待您的下次光临~</p>
</div>
6.竖线+文字并排：
1)head的style里面：
.container {
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.vertical-line {
width: 2px; /* 竖直线宽度 */
height: 300px; /* 竖直线高度，根据需要调整 */
background-color: black; /* 竖直线颜色 */
margin-right: 15px; /* 竖直线与文字之间的间距 */
}
.text {/* 这里不需要额外的样式，因为flex布局已经处理了并排显示和对齐 */
}
2)body里面：
<div class="container">
<div class="vertical-line"></div>
<div class="text"><p>诚邀您出席【春日宴（xx店）】</p>
包厢预订信息：</p>
预订贵宾：x女士</p>
预订时间：2025-2-9 周日 晚餐</p>
预订位置：xx楼xx厅</p>
预订人数：xx位</p>
联系人：xxx18211111111</p>
恭迎您的光临~</p>
</div>
</div>
</div>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
