CSS块级元素_内联元素

作者: 鲁智深 分类: div+css 发布时间: 2013-10-20 22:34

块级元素

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素</title>
    <style>
        h1 {
            background-color: pink;
        }
        p {
            background-color: lightseagreen;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
<!-- TODO 独占一行(自动换行) - 所有的块级元素都是垂直排列的 -->
<h1>这是一个标题</h1>
<p>这是一个段落内容</p>
<ul>
    <li>苹果</li>
    <li>小米</li>
</ul>
</body>
</html>

内联元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联元素</title>
    <style>
        a {
            background-color: lightseagreen;
            /* TODO 内联元素 - 设置高度和宽度是无效的(高度和宽度由文字决定)*/
            width: 500px;
            height: 500px;
            font-size: 48px;
        }
    </style>
</head>
<body>
<!-- TODO 内联元素是水平方向排列的 -->
<a href="#">链接一</a>
<a href="#">链接二</a>
</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注