0
点赞
收藏
分享

微信扫一扫

「前端+鸿蒙」核心技术HTML5+CSS3(八)

1、网站布局详解

网站布局是前端开发中的核心概念之一,它决定了网页的视觉结构和用户浏览的逻辑顺序。以下是几种常见的布局方式及其代码示例:

固定布局
固定布局通常具有固定的宽度和高度,适用于传统的桌面视图。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
     
      width: 960px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>网站头部</header>
    <aside>侧边栏</aside>
    <main>主要内容区域</main>
    <footer>网站底部</footer>
  </div>
</body>
</html>

流体布局
流体布局使用百分比来设置元素的宽度,使得布局能够适应不同的屏幕尺寸。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
     
      width: 100%;
      padding: 20px;
      
举报

相关推荐

0 条评论