一、环境准备
【vscode】前端环境配置
二、画盒子
- 输入英文的感叹号！并回车，然后不断按Tab直到文本编辑光标在body标签内。
- 输入
.red+.green+.red并回车。html代码部分完毕。 - 在head标签最后写入style标签。
- 写入css样式代码
.red {w100h100bc:red;
}
.green {w100h100bc: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>
