HTML学习笔记07

2020-12-13 02:25

阅读：295

YPE html>

标签：style blog java ext color http

一、网站布局

1、网站可以把内容安排到多个列中（就像杂志或报纸那样）。

2、网站布局可以使用

和元素来创建多列。

3、CSS对元素进行定位，创建背景以及色彩等。

4、HTML表格不是布局工具，主要是呈现表格化数据，不推荐使用。

二、HTML布局使用

元素
1、div袁术用于分组HTML元素的块级元素。

2、下面是实例，用到了CSS样式表：

1

2

3

4

5

6

7 div#container{width:600px;}

8 div#header{background-color:#ff0000;}

9 div#menu{background-color:#ff0088;height:200px;width:200px;float:left;}

10 div#content{background-color:#ff8888;height:200px;width:400px;float:left }

11 div#footer{background-color:#88ff88;clear:both;text-align:center;}

12 h1{margin-bottom:0;}

13 h2{margin-bottom:0;font-size:16px}

14 ul{margin:0;}

15 li{list-style:none;}

16

17

18

19

20
id="container">
21
id="header">
22
网页标题

23

24

25
id="menu">
26
导航栏

27

28
HTML

29
CSS

30
JavaScript

31

32

33

34
id="content">页面内容在此输入

35
id="footer">版权所有

36

37

38

39

预览效果如下：

三、HTML布局使用

元素
使用 HTML

标签是创建布局的一种简单的方式，如下所示：

1

2

3

4

5

width="500px" border="0">
6

valign="top">
13

colspan="2" style="background-color:#99bbbb;">

Title

style="background-color:#ffff99;width:100px;text-align:top;">

14 Menu
/>

15 HTML
/>

16 CSS
/>

17 JavaScript

style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">Content

colspan="2" style="background-color:#99bbbb;text-align:center;">Copyright

显示的效果：

soscw.com,搜素材

提示：通过CSS，使得站点更容易维护，改变一个文件就可以改变所有页面的布局。创建高级的布局非常困难，可以使用模板来创建。

HTML学习笔记07,搜素材,soscw.com

HTML学习笔记07

标签：style blog java ext color http

原文地址：http://www.cnblogs.com/weddyzheng/p/3718036.html

上一篇：[转]内嵌WORD/OFFICE的WINFORM程序——DSOFRAMER使用小结

下一篇：修复Windows XP服务扩展视图显示空白

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML学习笔记07
文章链接：http://soscw.com/essay/25575.html

亲，登录后才可以留言！

HTML学习笔记07

评论

热门文章

推荐文章

最新文章

置顶文章