实战制作简单网页

最新推荐文章于 2024-05-20 22:08:52 发布

吃一口奶黄包

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量73

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_73261958/article/details/126531207

版权

自学前端系列之HTML与CSS

第九节：实战制作简单网页

如图

第一步：搭建框架

选择html:5,自动跳出基本框架

随即进行编写

第二步：设置title

<title>baidu.com</title>

在这里插入图片描述

第三步：设置div包裹图中文字，并使其水平排列

  <body>
    <div style="display: flex">
      <div>新闻</div>
      <div>hao123</div>
      <div>地图</div>
      <div>贴吧</div>
      <div>视频</div>
      <div>图片</div>
      <div>网盘</div>
      <div>更多</div>
    </div>
  </body>

在这里插入图片描述

第四步：设置文字中的边距

 <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>baidu.com</title>
    <style>
      .distance {
        padding-right: 15px;
      }
    </style>
  </head>
  <body>
    <div style="display: flex">
      <div class="distance">新闻</div>
      <div class="distance">hao123</div>
      <div class="distance">地图</div>
      <div class="distance">贴吧</div>
      <div class="distance">视频</div>
      <div class="distance">图片</div>
      <div class="distance">网盘</div>
      <div class="distance">更多</div>
    </div>
  </body>