QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 2783|回复: 0

[HTML/CSS/JS] 网页的基本布局

[复制链接]

等级头衔

积分成就    金币 : 2851
   泡泡 : 1516
   精华 : 6
   在线时间 : 1305 小时
   最后登录 : 2024-12-7

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2022-5-15 22:12:15 | 显示全部楼层 |阅读模式
一、问题
! G4 y  _2 D& Z( o       在我们刚开始学习网页的时候,我们并不了解一个网页包含哪些部分,不知道网页的基本框架,导致自己写出的网页杂乱无章。4 L1 j; j; o; {! O
二、方法& O: E6 E* a- N0 w" @5 j5 Q
       在一个基本的网页布局当中,我们往往是需要这几个基础部分,1.头部 2.导航栏  3.内容部分  4.底部信息部分 ,这四个大部分。
' M; G/ X4 d/ Q+ q6 h       在body内放入一个div的大盒子作为头部标签,并在head中的style中设置这个盒子的高(由于默认是无色的,我们用粉色来表示);接下来在头标签的下面再放一个大盒子作为导航标签,同理在style中设置该盒子的样式(指的是宽和高及颜色);在下一步我们在导航标签下放一个大内盒子作为内容盒子,我们可以再盒子里面放一些相应的小盒子放我们需要放入的内容,同理在style中设置这些盒子的样式(包括这些盒子的宽高和颜色);在网页的最下面放入一个大盒子div标签作为我们的底部栏,同样设置该盒子的样式。6 Q, o1 t1 N4 \- c
Courier New字体,23磅行间距
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
   <style>
       * {
           padding: 0;
           margin: 0;
       }
       .top {
           background-color: pink;
           height: 100px;
       }
       .top p {
           text-align: center;
           padding-top:43px;
       }
       .nav {
           height: 200px;
           background-color: antiquewhite;
           margin-top: 20px;
       }
       .nav p {
           text-align: center;
           line-height: 200px;
       }
       .body {
           background-color: aqua;
           height: 1000px;
           width: 1024px;
           margin: auto;
           margin-top: 10px;
       }
       .body .body-1 {
           height: 300px;
           background-color: aquamarine;
           width: 300px;
           float: left;
           margin: 40px 20px 0 20px;
       }
       .body .body-2 {
           height: 300px;
           width: 1024px;
           background-color: blueviolet;
           float: left;
           margin-top: 40px;
       }
       .body .body-3 {
           height: 200px;
           width: 450px;
           background-color: brown;
           float: left;
           margin: 50px 40px 0 20px;
       }
       .foot {
           background-color: blue;
           height: 100px;
           margin-top: 10px;
       }
       .foot p {
           text-align: center;
           padding-top: 45px;
       }
   </style>
</head>
<body>
   <div class="top">
       <p>top</p>
   </div>
   <div class="nav">
       <p>this is nav</p>
   </div>
   <div class="body">
       <div class="body-1">
       </div>
       <div class="body-1">
       </div>
       <div class="body-1">
       </div>
       <div class="body-2">
       </div>
       <div class="body-3">
       </div>
       <div class="body-3">
       </div>
   </div>
   <div class="foot">
       <p>foot</p>
   </div>
</body>
</html>
三、结语, i6 R! n; R: ?4 n, W- W
       以上就是页网页所需要的基本布局了,其中内容部分,盒子和盒子之间的间距,盒子的边框线等可以根据自己的需要来进行改变。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2024-12-7 08:25

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表