• web2.0开发教程1.2(HTML)——HTML4与HTML5的布局


    前言:说到布局这个内容比较有意思,2003年第一次学HTML的时候,我还是个初一学生,对于网页一窍不通,是菜鸟级别的,属于只会上网的那种。刚学的时候,看这东西四不像,后面感觉就像是造房子一样的,还是蛮有趣的。当时学的是HTML4,学了2年以后,除了中间参加了几个设计比赛,在学算法以后,有5、6年没用过HTML了。突然这两年HTML5就火起来了,很莫名,于是去看了下,发现HTML5好强大啊,不禁感叹,特别是本地存储、canvas、地理位置、默认的音频视频等新特性,真的做得很好。接着,就从国外论坛找了点电子书视频,又开始研究起来,发现这个布局有点不太一样,HTML5的新标签布局突显了一种结构化,还定义了头部、尾部、水平导航栏、侧边栏导航以及文章内容这些标签,这个是与时俱进的。

    一、HTML4中的DIV布局

    DIV(层)是HTML4中常用的布局标签,现在也一直使用,很多网页设计的顶尖大师就是利用CSS+DIV来设计漂亮网页的。

    确实DIV就是结合CSS(级联样式表)来进行布局,CSS是个定义标签样式的语言,以后会另外用几章来大致讲解CSS的用法。

    下面讲一个实例,w3school中的实例 

    这个布局是通过设定DIV的宽和高进行布局的,首先,前面我们说了,可以在<head></head>中设定好css(样式)。

    在 <head></head> 中定义 <style type="text/css"></style> ,这个就是样式的定义,内容就是对网页中的标签的样式进行定义。

    然后下面div#,#后面则是div的id。div#container{500px},意思是把名为container的div的宽设为500个像素。例如float:left就是左对齐的意思。

    其他的CSS属性大家可以从w3school中找到。

    在<div></div>这个标签中,id为container的是一个容器,它把header、menu、content和footer包含在内。

    由于第一层叫header的 div没有设置宽度,因此它就占据这第一层。

    而第二层中,menu和content都设置了width(宽度)、height(高度),两个div宽度加起来没有超过container的宽度,因此不用把content放在第三层。

    另外float这个属性为div的对齐方式,<ul></ul>是一个列表显示的标签,其中每一项的内容用<li></li>包含在内。

    第三层中,只有footer这个div,它里面有text-align的属性为设置div中的文本对齐方式。

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#container{width:500px}
    div#header {background-color:#99bbbb;}
    div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}
    div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
    div#footer {background-color:#99bbbb; clear:both; text-align:center;}
    h1 {margin-bottom:0;}
    h2 {margin-bottom:0; font-size:14px;}
    ul {margin:0;}
    li {list-style:none;}
    </style>
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="header">
    <h1>Main Title of Web Page</h1>
    </div>
    
    <div id="menu">
    <h2>Menu</h2>
    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ul>
    </div>
    
    <div id="content">Content goes here</div>
    
    <div id="footer">Copyright W3School.com.cn</div>
    
    </div>
    
    </body>
    </html>

     二、总结

    这一章讲了关于div的简单布局,另外我们还可以根据height和width还有边距等参数布局,但是这都是网页设计的内容,不作详细讲解,这里仅讲解标签使用,HTML的基础。

    然后在结束html、javascript、css、jquery等静态网页的技术以后,介绍asp.net php等技术。下一章将介绍html5中布局标签。学编程是需要不断地练习不断地研究,才能有所进步,大家加油啦!

  • 相关阅读:
    360网盘书籍分享
    oracle11g字符集问题之一
    order by 的列名不能参数化,要拼sql
    oracle11g的冷热备份
    Spring 事务管理的使用
    Spring 事务管理的API
    事务总结
    Excel 单元格中内容的换行
    手动配置IP地址
    MyBatis 三剑客
  • 原文地址:https://www.cnblogs.com/44iter/p/2804315.html
Copyright © 2020-2023  润新知