给萌新HTML5 入门指南

前端开发作者： 2024-08-22 02:35:01

本文由葡萄城技术团队原创并首发转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 HTML5的发展改变了互联网技术趋势，前端热度依旧不减，所以对于应用开发人员

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	ctx.moveTo(0,0);
	ctx.lineTo(200,100);
	ctx.stroke();
</script>

最早的静态表格布局
通过栅栏划分页面的流式布局
根据屏幕大小自动调整内容的自适应布局
融和流式布局和自适应布局的响应式布局

HTML

<body>
<div class="header"></div>
<div class="container">
  <div class="aside"></div>
  <div class="main"></div>
</div>
<div class="footer"></div>
</body>

html,body {
      margin: 0;
      padding: 0;
  height: 100%;
  background: black;
}
 
.header,.footer{
  height:80px;
  background: white;
}
 
.container{
  height: CALC(100% - 160px);
  background: pink;
  padding: 10px 0;
}
 
.aside{
  width: 20%;
  height: 100%;
  float: left;
  background: gold;
}
.main{
  width: 80%;  
  height: 100%;
  float: left;
  background: gray;
}

HTML

<body>
<header><h1>Welcome to HTML5 World!</h1></header>
<section class="designerContainer">
<aside class="designerAside">
<div style="width:180px">Aside</div>
</aside>
<main class="designerMain">
</main>
</section>
<footer><h3>Copyright © 2020 GrapeCity inc.</h3></footer>
</body>

html,body{
      margin: 0;
      padding: 0;
    }
    body{
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    h1,h2,h3 {
      font-family: Avenir,Helvetica,Arial,sans-serif;
      text-align: center;
      color: #2c3e50;
      margin-block-start: 0;
      margin-block-end: 0;
      padding: 15px;
    }
    .designerContainer{
      padding: 10px;
      flex: 1;
      display: flex;
      background: gray;
    }
    .designerAside{
      text-align: center;
      background: gold;
    }
    .designerMain{
      display: flex;
      flex: 1 100%;
      padding: 0 0 0 10px;
      background: pink;
    }

页面使用HTML5语义化标签，页面各部分功能清晰。
body设置高度 100vh，这里使用了CSS3 的新单位vh，即 view height 视窗高度，100vh相当于html,body 高度100%，同样还有vw代表视窗宽度
body设置flex布局，方向从上到下叠放
designerContainer 设置flex 1，自动充满header和footer之外剩余空间
container内部依旧flex布局，designerMain 设置 flex 1，自动充满aside剩余空间

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_66428.html

相关资讯：给萌新HTML5 入门指南