14

上一篇:HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片

一、文字

1.1 属性

clipboard.png

1.2 字体样式:font-family

clipboard.png

clipboard.png

1.3 字体大小:font-size

clipboard.png

clipboard.png

clipboard.png

1.4 字体粗细:font-weight

clipboard.png

1.5 字体风格:font-style

clipboard.png

1.6 行高:line-height

clipboard.png

二、表单

clipboard.png

clipboard.png

clipboard.png

点击文字自动关联:

clipboard.png

三、表格

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

四、浮动

4.1 清除浮动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        .d-parent{
            border: 10px solid green;
            width: 540px;
        }

        .d-float{
            float: left;
            border: 10px dotted orange;
            margin: 10px;
            padding: 10px;
            width: 120px;
        }

        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <h1>清除浮动</h1>
    <div class="d-parent">
        <div class="d-float">d-float:现在 .d-float标签的高度是120px,但是有时候,我们不想明确指定浮动元素的高度,想让它们的内容决定它们的高度。</div>
        <div class="d-float">d-float</div>
        <div class="d-float">d-float</div>
        <div class="clear"></div>
    </div>
</body>
</html>
overflow: hidden; 多余的文字会被隐藏

五、定位

clipboard.png

透明度:a: 0 ~ 1

background-color: rgba(138, 32, 10, 0.75);

div居中显示:

margin: 0 auto

堆叠顺序:

z-index 可用于将在一个元素放置于另一元素之后。

CSS z-index 属性

六、HTML框架布局

clipboard.png

6.1 垂直布局

clipboard.png

clipboard.png

6.2 水平布局

clipboard.png

clipboard.png

clipboard.png

clipboard.png

6.3 内联框架:iframe标签

clipboard.png

clipboard.png

七、搜索引擎优化

clipboard.png

clipboard.png

下一篇:HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性

参考教学视频:HTML和CSS 6小时入门经典视频教程


Bohr
6.5k 声望3.3k 粉丝