编程笔记 html5&css&js 013 HTML布局

编程笔记 html5&css&js 013 HTML布局

  • 一、使用 `
    ` 元素的网页布局
  • 二、使用 `` 元素的网页布局
  • 三、布局框架
  • 小结

  • 网页布局对改善网站的外观非常重要。请慎重设计您的网页布局。

    一、使用
    元素的网页布局

    div 元素是用于分组 HTML 元素的块级元素。
    下面的例子使用五个 div 元素来创建多列布局:

    实例

    DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>网页布局(runoob.com)title> 
    head>
    <body>
    <div id="container" style="width:500px">
    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">网页标题h1>div>
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>菜单b><br>
    HTML<br>
    CSS<br>
    JavaScriptdiv>
     <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    内容在这里div>
     <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    版权 © 9999999.comdiv>
     div>
     body>
    html>
    

    二、使用

    元素的网页布局

    使用 HTML

    标签是创建布局的一种简单的方式。
    大多数站点可以使用
    或者
    元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

    实例

    DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>网页布局(runoob.com)title> 
    head>
    <body>
    <table width="500" border="0">
    <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1>网页标题h1>
    td>
    tr>
    <tr>
    <td style="background-color:#FFD700;width:100px;">
    <b>菜单b><br>
    HTML<br>
    CSS<br>
    JavaScript
    td>
    <td style="background-color:#eeeeee;height:200px;width:400px;">
    内容在这里td>
    tr>
    <tr>
    <td colspan="2" style="background-color:#FFA500;text-align:center;">
    版权 © 999999.comtd>
    tr>
    table>
    body>
    html>
    

    三、布局框架

    是一种用于设计和组织网页布局的结构。它可以帮助开发者将网页内容划分为不同的区域,并指定它们的位置、尺寸和样式。常见的布局框架有以下几种:

    1. 表格布局:使用HTML的table标签来创建网页布局。表格布局的优点是简单易懂,兼容性好,但缺点是不灵活,不适合响应式设计。
    2. 块级元素布局:使用HTML的块级元素(如div)来划分网页布局。块级元素布局的优点是灵活,可以轻松实现响应式设计,但缺点是需要一些CSS样式来控制元素的位置和尺寸。
    3. 栅格布局:使用CSS框架(如Bootstrap)提供的栅格系统来创建网页布局。栅格布局的优点是简单易用,适用于响应式设计,并且具有一致的样式,但缺点是需要引入额外的框架。
    4. 弹性布局:使用CSS的弹性布局(flexbox)来创建网页布局。弹性布局的优点是灵活性、响应式设计能力强,但缺点是兼容性较差。
    5. 网格布局:使用CSS的网格布局(grid)来创建网页布局。网格布局的优点是灵活性、响应式设计能力强,但缺点是兼容性较差。
      选择合适的布局框架可以根据项目需求和开发者熟悉程度来决定。

    小结

    具体使用哪种布局,视需要而定。

    你可能感兴趣的:(#,html5,css3,javascript,少年工程师)