使用vscode学习HTML5+CSS3

1. vscode快速格式化代码:原文链接

Vs Code快速格式化代码: Shift+Alt+F
或者右键单击格式化文档
或者设置当我们保存页面的时候自动格式化代码
1)文件–首选项–设置
2)搜索框内输入 emmet.include;
3)在settings.json下的【用户】中添加以下语句:
用户 用户 用户 不是工作区 重要事情说三遍
“editor.formatOnType”: true,
“editor.formatOnSave”: true

2. emmet语法快速生成HTML和css样式

VSCode 是一种常用的集成开发环境(IDE),特别适合前端开发。可以利用VSCode来设计和编写简单的海贼王网页,下面是一个使用HTML5CSS3编写的基本网页源代码示例: ```html <!DOCTYPE html> <html> <head> <title>海贼王网页</title> <style> body { background-color: #f5f5f5; font-family: Arial, sans-serif; } #header { background-color: #000; color: #fff; padding: 10px; text-align: center; } #content { margin: 20px; } h1 { color: #000; text-align: center; } .character { display: flex; align-items: center; margin-bottom: 20px; } .character img { width: 100px; height: 150px; margin-right: 10px; } .character h3 { margin: 0; } </style> </head> <body> <div id="header"> <h1>海贼王角色</h1> </div> <div id="content"> <div class="character"> <img src="luffy.jpg" alt="Monkey D. Luffy"> <h3>Monkey D. Luffy</h3> </div> <div class="character"> <img src="zoro.jpg" alt="Roronoa Zoro"> <h3>Roronoa Zoro</h3> </div> <div class="character"> <img src="nami.jpg" alt="Nami"> <h3>Nami</h3> </div> <!-- 其他角色... --> </div> </body> </html> ``` 在这个示例代码中,我们首先定义了一个简单的网页布局。标题栏(header)有黑色背景和白色文字,整个网页采用灰色背景色。网页内容区域(content)包括一个标题(h1),以及一些角色卡片。 每个角色卡片都由一个包含头像和角色名字的块元素(div.character)组成。CSS定义了卡片之间的间距,头像的大小和位置,以及字体颜色等样式。 你可以根据自己的需要修改和扩展这个示例代码,添加更多角色信息和页面元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

素心如月桠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值