文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

html5中的页面布局怎么做

2024-04-02 19:55

关注

这篇文章主要介绍html5中的页面布局怎么做,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

浏览器中渲染的网页由许多东西组成-logo、信息文本、图片、超链接、导航结构等等。

HTML5为网页提供了一系列允许你创建结构化布局的标签。这些元素通常被称为语义化标签,因为它们能够清楚地给开发者和浏览器传达它们的意义和目的。本文将讨论一些有助于网页布局的重要的HTML5标签。

html5中的页面布局怎么做

HTML5新元素及其特性

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。

本次学习HTML5的新标签元素有:

<header>定义页面或区段的头部;

<footer>定义页面或区段的尾部;

<nav>定义页面或区段的导航区域;

<section>页面的逻辑区域或内容组合;

<article>定义正文或一篇完整的内容;

<aside>定义补充或相关内容;

学习这些标签最好的方法当然就是试着使用它们。虽然现在有很多现成的网页布局的模板可以方便的拿来用,但是对于初学者来说,自己实现简单的页面布局绝对是有必要的。

这里通过一个简单的页面布局的例子,来展示上述标签的使用方法。

示例:模仿博客首页布局

实现如图2-1的网页结构,这是一个非常典型的博客页面:头部、尾部、水平导航栏、侧边栏导航以及内容。

html5中的页面布局怎么做

图2-1

在图2-1中已经看到,相应标签实现的区域用名称标注了出来,比如头部Header

在编写页面前,有必要说一下:页面元素由HTML5实现,而元素的显示效果是CSS3渲染的,CSS3的代码可以和HTML5的代码放在同一个文件,也可以是独立的文件,只要在HTML5文件里引用即可。建议最好各自是独立的文件,这样的好处有:

1)符合单一职责原则:HTML5页面就负责管理元素,而CSS3文件只负责对相应HTML5文件显示效果的渲染,相互独立,互不相交。

2)降低页面的复杂度,便于维护:试想,当页面的元素数量增到很多的时候,同时在一个页面里管理元素和元素的显示属性,可读性是该有多差,后期的维护会很蛋疼。

3)加快浏览器的加载速度:第2)点的另外一个好处,简单的页面自然加载更快。

当然,如果就是习惯HTML5+CSS3放在一个文件里,也未尝不可,这里也只是建议。

下面来具体实现图2-1。

分为两个部分:1)HTML5文件;2)CSS3文件

一.HTML5部分

1. HTML5的文档声明

新建index.html文件,如果用的网页编写工具已经支持HTML5文件类型,那么,应该生成如下的HTML5模板:

1

2

3

4

5

6

7

8

9

1 <!DOCTYPE html>

2 <html lang="en-US">

3 <head>

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

5 <title>Layout TEST</title>

6 </head>

7 <body>

8 </body>

9 </html>

如果网页编写工具暂时不支持HTML5也没关系,自己写这几行代码也很简单。

说明:第一行:<!DOCTYPE html>是HTML5对文档类型的简化,化繁为简;(文档类型的作用:验证器依据它来判断该采用何种规则去验证代码;强制浏览器以标准模式渲染页面)

2. 头部

<header>标签实现

1

2

3

<header id="page_header">

    <h2>Header</h2>

</header>

说明:1)header不能喝h2,h3,h4这些混为一谈。<header>可以包含从公司logo到搜索框在内的各式各样的内容。例子中只含有。

2)同一个页面可以包含多个<header>元素。每个独立的区块或文章都可以含有自己的<header>.所以示例中为<header>添加唯一标示id属性,便于CSS3中灵活的渲染。在CSS文件里会看到id标示的作用。

3. 尾部

<footer>标签实现

1

2

3

<footer id="page_footer">

    <h3>Footer</h3>

</footer>

说明:位置是页面或者区块的尾部,用法和<header>基本一样,也会包含其他元素,这里也指定了id.

4. 导航

<nav>标签实现

1

2

3

4

5

6

7

8

<nav>

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">One</a></li>

        <li><a href="#">Two</a></li>

        <li><a href="#">Three</a></li>

    </ul>

</nav>

说明:导航的重要性对于一个网页至关重要,快速方便的导航是留住访客所必须的。

1)可以被包含在<header>或<footer>或者其他区块中,一个页面可以有多个导航。

2)导航一般需要CSS来渲染,随后将会看到CSS的渲染。

5. 区块和文章

<section>和<article>标签实现

1

2

3

4

5

6

7

8

9

<section id="posts">

        

    <article class="post">

         

        </article>

        <article class="post">

         

        </article>

</section>

<section>元素将页面的内容合理归类,合理布局。

下面是<article>的一般内容

1

2

3

4

5

6

7

8

9

10

<article class="post">

        <header>

            <h3>Article Header</h3>

        </header>

        <p>Without you?I'd be a soul without a purpose.

                </p>

        <footer>

            <h3>Article Footer</h3>

        </footer>

</article>

可以看到它可以包含很多元素。

6. 旁白和侧边栏

<aside>标签实现旁白,侧边栏则由<section>实现。

<aside>是为主内容添的附加信息,入引言,图片等

1

2

3

4

<aside>

    <p>sth. in aside

    </p>

</aside>

<aside>一般加在<article>中使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<article class="post">

        <header>

            <h3>Article Header</h3>

        </header>

        <aside>

            <p>sth. in aside

            </p>

        </aside>

        <p>Without you?I'd be a soul without a purpose.

                </p>

        <footer>

            <h3>Article Footer</h3>

        </footer>

</article>

侧边栏,不是旁白!看做是右面的一个区域,包含链接,用<section>和<nav>实现即可。

1

2

3

4

5

6

7

8

9

10

<section id="sidebar">

    <nav>

    <ul>

          <li><a href="2012/04">April 2012</a></li>

          <li><a href="2012/03">March 2012</a></li>

          <li><a href="2012/02">February 2012</a></li>

          <li><a href="2012/01">January 2012</a></li>

    </ul>

    </nav>

</section>

到这里,每种标签的使用就是这样了,下面是HTML5的完整代码index.html文件

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Layout TEST</title>

</head>

 

<body>

    <h3>body</h3>

    <header id="page_header">

        <h2>Header</h2>

        <nav>

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">One</a></li>

                <li><a href="#">Two</a></li>

                <li><a href="#">Three</a></li>

            </ul>

        </nav>

    </header>

    <section id="posts">

        <h3>Section</h3>

        <article class="post">

            <h3>article</h3>

            <header>

                <h3>Article Header</h3>

            </header>

            <aside>

                <h3>Article Aside</h3>

            </aside>

            <p>Without you?I'd be a soul without a purpose.

                        </p>

            <footer>

                <h3>Article Footer</h3>

            </footer>

        </article>

        <article class="post">

            <h3>article</h3>

            <header>

                <h3>Article Header</h3>

            </header>

            <aside>

                <h3>Article Aside</h3>

            </aside>

            <p>Without you?I'd be a soul without a purpose. </p>

            <footer>

                <h3>Article Footer</h3>

            </footer>

        </article>

    </section>

 

    <section id="sidebar">

        <h3>Section</h3>

        <header>

            <h3>Sidebar Header</h3>

        </header>

        <nav>

            <h4></h4>

            <ul>

                <li><a href="2012/04">April 2012</a></li>

                <li><a href="2012/03">March 2012</a></li>

                <li><a href="2012/02">February 2012</a></li>

                <li><a href="2012/01">January 2012</a></li>

            </ul>

        </nav>

    </section>

 

    <footer id="page_footer">

        <h3>Footer</h3>

    </footer>

 

</body>

</html>


二.CSS3部分

对于CSS文件,最好能够根据HTML文件的树结构,对应到相应的元素,有组织有层次的进行元素属性的渲染。这样既能够不遗漏元素,又便于查找修改。当然根据个人的习惯来定就好。

CSS3的属性定义更加丰富,这里不再赘述,网上有CSS3参考手册,用的时候查一查就好。更或者,连查都懒得查,还有专门的CSS3控件代码生成工具和网站,例如http://css-tricks.com/examples/,丰富的控件效果示例可以下载。还可以搜一些类似的。

这里直接贴出CSS3代码 style.css文件

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

@charset "utf-8";

body {

    background-color: #CCCCCC;

    font-family: Geneva, sans-serif;

    margin: 10px auto;

    max-width: 800px;

    border: solid;

    border-color: #FFFFFF;

}

 

h3 {

    text-align: center;

}

 

header {

    background-color: #F47D31;

    color: #FFFFFF;

    text-align: center;

}

 

article {

    background-color: #eee;

}

 

p {

    color: #F36;

}

 

nav,article,aside {

    margin: 10px;

    padding: 10px;

    display: block;

}

 

header#page_header nav {

    list-style: none;

    margin: 0;

    padding: 0;

}

 

header#page_header nav ul li {

    padding: 0;

    margin: 0 20px 0 0;

    display: inline;

}

 

section#posts {

    display: block;

    float: left;

    width: 70%;

    height: auto;

    background-color: #F69;

}

 

section#posts article footer {

    background-color: #039;

    clear: both;

    height: 50px;

    display: block;

    color: #FFFFFF;

    text-align: center;

    padding: 15px;

}

 

section#posts aside {

    background-color: #069;

    display: block;

    float: right;

    width: 35%;

    margin-left: 5%;

    font-size: 20px;

    line-height: 40px;

}

 

section#sidebar {

    background-color: #eee;

    display: block;

    float: right;

    width: 25%;

    height: auto;

    background-color: #699;

    margin-right: 15px;

}

 

footer#page_footer {

    display: block;

    clear: both;

    width: 100%;

    margin-top: 15px;

    display: block;

    color: #FFFFFF;

    text-align: center;

    background-color: #06C;

以上是“html5中的页面布局怎么做”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯