zoukankan      html  css  js  c++  java
  • HTML 布局

    使用 <div> 元素的 HTML 布局

    注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

    <body>
    
    <div id="header">
    <h1>City Gallery</h1>
    </div>
    
    <div id="nav">
    London<br>
    Paris<br>
    Tokyo<br>
    </div>
    
    <div id="section">
    <h1>London</h1>
    <p>
    London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
    Standing on the River Thames, London has been a major settlement for two millennia,
    its history going back to its founding by the Romans, who named it Londinium.
    </p>
    </div>
    
    <div id="footer">
    Copyright W3School.com.cn
    </div>
    
    </body>

    CSS:

    <style>
    #header {
        background-color:black;
        color:white;
        text-align:center;
        padding:5px;
    }
    #nav {
        line-height:30px;
        background-color:#eeeeee;
        height:300px;
        width:100px;
        float:left;
        padding:5px; 
    }
    #section {
        width:350px;
        float:left;
        padding:10px; 
    }
    #footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px; 
    }
    </style>

    使用 HTML5 的网站布局

    <body>
    
    <header>
    <h1>City Gallery</h1>
    </header>
    
    </body>

    CSS

    <style>
    header {
        background-color:black;
        color:white;
        text-align:center;
        padding:5px; 
    }

    使用表格的 HTML 布局

    注释:<table> 元素不是作为布局工具而设计的。

    <table> 元素的作用是显示表格化的数据。

    使用 <table> 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式:

  • 相关阅读:
    document基本操作 动态脚本-动态样式-创建表格
    js原型模式和继承
    NuGet本地包自定义路径
    技术文档链接收藏
    数据结构排序
    Insertion Sort
    选择排序之javascript
    冒泡排序之javascript
    C++双向链表
    单向链表
  • 原文地址:https://www.cnblogs.com/azureice/p/8502759.html
Copyright © 2011-2022 走看看