html写网页如何布局


本文摘自PHP中文网,作者墨辰?R,侵删。

html常用的布局有两种。第一种一是div布局,优点是比较方便简洁,代码比较少,制作和维护也比较容易,就是有些地方不同的浏览器兼容性不一样,可能会有不同的显示。第二种是table布局,代码比较多,到后期维护起来是非常头疼的,但是table布局规避了许多浏览器不兼容的问题。

1.div布局

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html> 

<html

<head lang="en"

    <meta charset="utf-8"

    <title></title

    <style

        body{margin: 0; padding: 0;} 

        #header{width:100%; height: 90px; background: #b19f9d; } 

        #nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;} 

        .content{width: 950px; height: 900px; background: #847369; margin: 0 auto;} 

        .left{width:30%; height: 900px; background: #decfd4; float: left;} 

        .right{width: 70%; height: 900px; background: #b3a19d; float: left;} 

        footer{width:100%; height: 150px; background: #a8817a;} 

    </style

</head

   

<body

    <header id="header"

        <nav id="nav">空空</nav

    </header

    <div class="content"

        <div class="left"></div

        <div class="right"></div

    </div

    <footer></footer

</body

   

   

</html>

2.table布局

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html> 

<html

<head lang="en"

    <meta charset="utf-8"

    <title></title

    <style

           

    </style

</head

   

<body marginheight="0px" marginwidth="0px"

    <table width="100%" height="950px" style="background-color:gray"

        <tr

            <td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td

        </tr

        <tr

            <td  width="20%" height="80%" style="background-color: blue" ><td

            <td  width="80%" height="80%" style="background-color: blue" ><td

        </tr

        <tr

            <td colspan="2" width="100%" height="10%" style="background-color: black" ><td

        </tr

       

    </table

</body

   

   

</html>

总结:

阅读剩余部分

相关阅读 >>

认识javascript是如何工作的,深入v8引擎和编写优化代码

Html如何实现点击链接打开一个新窗口

使用Html+css制作一些动画提示工具

canvas原生实现前端网页移动端签名

Html块级、行级元素介绍

Html中引用jquery的两种方法

Html首行缩进怎么设置

怎么设计自己的网页

js怎么去掉Html标签

如何去除Html边框间隙

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...