project starter

最新推荐文章于 2024-09-14 17:04:32 发布

BEER_7

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量64

点赞数

分类专栏： 50个前端练手小项目文章标签： css html 前端

本文链接：https://blog.csdn.net/Im_print/article/details/126369014

版权

50个前端练手小项目专栏收录该内容

50 篇文章 6 订阅

订阅专栏

这是一个关于网页开发的基础项目，引入了Roboto字体，并设置了全局的box-sizing属性为border-box。页面包含一个标题`ProjectStarter`，并引用了外部的样式表`style.css`和脚本文件`script.js`。网页布局采用Flexbox，垂直居中，全屏显示，无滚动条。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>My Project</title>
  </head>
  <body>
    <h1>Project Starter</h1>
    <script src="script.js"></script>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  /* box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度
  border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 */
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}