vs code

wanxiang_zx

已于 2022-09-10 19:39:23 修改

阅读量199

点赞数

分类专栏： html 文章标签： html 前端 javascript

于 2022-09-08 10:04:07 首次发布

本文链接：https://blog.csdn.net/wanxiangzx/article/details/126737663

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

两个学习网站：mdn、菜鸟教程

格式参数

width 宽度
height 高度
margin 边距（外边距），设置盒子和其他盒子之间的距离
border 边框，默认透明
padding 填充（内边距），设置文字和盒子边框之间的距离

vs code常用快捷键

Ctrl+d ：选中下一个相同字符，可以同时修改
Alt+鼠标左键：添加光标，可同时输入
Alt+Shift+ ↓ ：快速将当前行复制到下一行
Ctrl+f ：查找

我的第一个网站

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>祝我的小可爱生日快乐</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>

  <body>
    <div style="background-color: #f1f1; text-align: center; padding: 40px">
      <p>是我的小可爱呀</p>
    </div>
    <div
      style="
        max-width: 700px;
        margin: 30px auto;
        padding: 15px;
        line-height: 1.7;
        color: red;
      "
    >
      <p>my only</p>
      <p>又长大一岁了</p>
      <p>以后还会有很多很多的生日</p>
      <p>希望你的身边一直是我</p>
    </div>
    <div style="background-color: #f1f1; text-align: center; padding: 40px">
      <p>我的第一个网站</p>
    </div>
  </body>
</html>

给小可爱的生日网站

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>祝晚香的小可爱生日快乐</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        background-color: rgb(239, 189, 189);
      }
    </style>
  </head>

  <body>
    <img
      src="https://img0.baidu.com/it/u=2357183690,3647395557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=572"
      alt="是我的乂乂哦"
      width="487"
      height="557"
    />
    <p style="color: rgb(226, 72, 61)">
      <b>To:</b>
      <b>旭旭宝宝</b>
    </p>
    <p style="text-align: center">恭喜我的小可爱又长大一岁啦</p>
    <p style="text-align: center">离成年又近了一步 ^-^</p>
    <p style="text-align: center">未来还会有很多很多的生日</p>
    <p style="text-align: center">希望每一次都是我陪你哦</p>
    <p style="text-align: center">超级超级喜欢你</p>
    <p style="color: rgb(92, 142, 217); text-align: end">
      <b>From:晚香zx</b>
    </p>
    <p>&nbsp;</p>
  </body>
</html>