一、环境准备
【vscode】前端环境配置
二、画盒子
- 输入英文的感叹号！并回车，然后不断按Tab直到文本编辑光标在body标签内。
- 输入
.red+.green+.red并回车。html代码部分完毕。
- 在head标签最后写入style标签。
- 写入css样式代码
.red {
w100
h100
bc:red;
}
.green {
w100
h100
bc:green;
}
- 先按Alt+L，再按Alt+O，查看效果。
- 完整代码展示
<!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>
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
三、进阶：流式布局
- 按住Alt+Tab切回编辑器。
- 输入.body {dp:f}
- 按住Alt+Tab切回浏览器查看效果
- 完整代码
<!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>
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
body {
display: flex;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>