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

一、文字

1.1 属性

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

1.2 字体样式：font-family

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

1.3 字体大小：font-size

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

1.4 字体粗细：font-weight

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

1.5 字体风格：font-style

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

1.6 行高：line-height

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

二、表单

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

点击文字自动关联：

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

三、表格

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

四、浮动

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; 多余的文字会被隐藏

五、定位

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

透明度：a: 0 ~ 1

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

div居中显示：

margin: 0 auto

堆叠顺序：

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

CSS z-index 属性

六、HTML框架布局

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

6.1 垂直布局

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

6.2 水平布局

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

6.3 内联框架：iframe标签

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

七、搜索引擎优化

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

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

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

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

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

一、文字

1.1 属性

1.2 字体样式：font-family

1.3 字体大小：font-size

1.4 字体粗细：font-weight

1.5 字体风格：font-style

1.6 行高：line-height

二、表单

三、表格

四、浮动

4.1 清除浮动

五、定位

六、HTML框架布局

6.1 垂直布局

6.2 水平布局

6.3 内联框架：iframe标签

七、搜索引擎优化

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

相关推荐