W3school学习日记3

HTML类和页面布局

一个Web页面布局框架以及背景很重要，那么我们就来学一下html怎么来编写页面框架布局和背景如何选择。

  • 类的编写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
.多肉 {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}	
</style><!--.多肉:类的定义;margin:外边距；padding:内边距-->
</head>
<body>
<div class="多肉"><!--div块级元素，格式在类里定义-->
<h2>蓝豆</h2>
<p>蓝豆（学名：Graptopetalum pachyphyllum Rose）是景天科、风车草属的多年生植物，多肉植物。植株叶片覆白粉，呈淡蓝色，在温差大、日照充足的环境下叶泛橙色或粉紫色。花五瓣，底色白，有红色斑纹。墨西哥多地有分布，广泛栽培于世界各地。</p>
</div> 
</body>
</html>
  • 布局的编写 ，布局可以分为无响应设计和响应设计。
    1、header：定义文档或节的页眉
    2、nav：定义导航连接的容器
    3、section：定义文档中的节
    4、article：定义独立的自包含文章
    5、aside：定义内容之外的内容（比如侧边栏）
    6、footer：定义文档或节的页脚
    7、details：定义额外的细节
    8、summary：定义details元素的标题 
    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
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    header {
        background-color:#000000;
        color:white;
        text-align:center;
        padding:5px;	 
    }
    nav {
        line-height:30px;
        background-color:#eeeeee;
        height:800px;
        width:100px;
        float:left;
        padding:5px;	      
    }
    section {
        width:1000px;
        float:left;
        padding:10px;
        border: 1px solid black;	 	 
    }
    footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;	 	 
    }
    </style><!--定义页眉页脚等样式-->
    </head>
    <body>
    <header>
    <h1>多肉植物介绍</h1>
    </header>
    <nav>
    蓝豆</br>
    </nav>
    <section>
    <h1>蓝豆</h1>
    <p>
    蓝豆（学名：Graptopetalum pachyphyllum Rose）是景天科、风车草属的多年生植物，多肉植物。植株叶片覆白粉，呈淡蓝色，在温差大、日照充足的环境下叶泛橙色或粉紫色。花五瓣，底色白，有红色斑纹。墨西哥多地有分布，广泛栽培于世界各地。
    </p>
    </section>
    </body>
    </html>
  • 框架的编写，通过使用框架，可以在同一个浏览器窗口中显示多个页面。
  • *重要提示：** 不能将 body 标签与frameset标签同时使用！
    不过，假如你添加包含一段文本的 noframes 标签，就必须将这段文字嵌套于 body标签内。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <html>
    <frameset rows="25%,25%,50%"><!--水平框架-->
      <frame src="/example/html/frame_a.html"
      noresize="noresize"><!--框架不可拖拽-->
      <frame src="/example/html/frame_b.html">
      <frameset cols="25%,50%,25%"><!--垂直框架-->
      <frame src="/example/html/frame_a.html"><!--框架可拖拽-->
      <frame src="/example/html/frame_b.html">
      <frame src="/example/html/frame_c.html">
    </frameset>
    </frameset>
    </html>
  • 背景选择
    1、背景颜色（bgcolor）属性值可以是十六进制数、RGB 值或颜色名
    2、背景（background）属性值为图像的URL，图像文件与文字搭配良好，不应超过10K
    HTML颜色