zoukankan      html  css  js  c++  java
  • HTML布局<div>or<table>

    网页布局对改善网站的外观非常重要,请慎重设计您的网页布局,大多数网站会把内容安排到多个列中(就像杂志或报纸那样),大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
    e.g:虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

    HTML 布局 - 使用<div> 元素/div 元素是用于分组 HTML 元素的块级元素

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <div id="container" style="800px">
     6 
     7 <div id="header" style="background-color:#FFA500;">
     8 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
     9 
    10 <div id="menu" style="background-color:#FFD700;height:200px;100px;float:left;">
    11 <b>Menu</b><br>
    12 HTML<br>
    13 CSS<br>
    14 JavaScript</div>
    15 
    16 <div id="content" style="background-color:#EEEEEE;height:200px;700px;float:left;">
    17 Content goes here</div>
    18 
    19 <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    20 Copyright © w3cschool.cn</div>
    21 
    22 </div>
    23  
    24 </body>
    25 </html>

    HTML 布局 - 使用table表格
    使用 HTML <table> 标签是创建布局的一种简单的方式;大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <table width="500" border="0">
     6 <tr>
     7 <td colspan="2" style="background-color:#FFA500;">
     8 <h1>Main Title of Web Page</h1>
     9 </td>
    10 </tr>
    11 
    12 <tr>
    13 <td style="background-color:#FFD700;100px;">
    14 <b>Menu</b><br>
    15 HTML<br>
    16 CSS<br>
    17 JavaScript
    18 </td>
    19 <td style="background-color:#eeeeee;height:200px;400px;">
    20 Content goes here</td>
    21 </tr>
    22 
    23 <tr>
    24 <td colspan="2" style="background-color:#FFA500;text-align:center;">
    25 Copyright  © w3cschool.cn</td>
    26 </tr>
    27 </table>
    28 
    29 </body>
    30 </html>

    HTML 布局/使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。同时由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。


    拓展:网页简单布局之结构与表现原则案例

     概括:一开始我们接触网页制作的时候,就了解到html代表结构、css代表样式、javascript代表行为,网页制作中,我们一直强调结构与表现相分离的原则,这里面的结构一般指HTML,此外分离是说把它们写在不同的文件加以引用吗?当然不是,在这里的学习中了解到,分离不单是一种方法更是一种思想,简而言之,一个平面二维坐标,其中x轴代表技术发展,y轴代表网页制作需求,分离是根据技术发展和我们的网页制作需求完成的!

  • 相关阅读:
    5.19 省选模拟赛 T1 小B的棋盘 双指针 性质
    5.15 省选模拟赛 容斥 生成函数 dp
    5.15 省选模拟赛 T1 点分治 FFT
    5.15 牛客挑战赛40 B 小V的序列 关于随机均摊分析 二进制
    luogu P4929 【模板】舞蹈链 DLX
    CF 878E Numbers on the blackboard 并查集 离线 贪心
    5.10 省选模拟赛 拍卖 博弈 dp
    5.12 省选模拟赛 T2 贪心 dp 搜索 差分
    5.10 省选模拟赛 tree 树形dp 逆元
    luogu P6088 [JSOI2015]字符串树 可持久化trie 线段树合并 树链剖分 trie树
  • 原文地址:https://www.cnblogs.com/webaction/p/12586999.html
Copyright © 2011-2022 走看看