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

时间 2019-11-09

标签 html css 入门系列文字表单表格浮动定位框架布局 seo 栏目 HTML 繁體版

原文原文链接

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

1、文字

1.1 属性

1.2 字体样式：font-family

1.3 字体大小：font-size

1.4 字体粗细：font-weight

1.5 字体风格：font-style

1.6 行高：line-height

2、表单

点击文字自动关联：css

3、表格

4、浮动

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

5、定位

透明度：a: 0 ~ 1html

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

div居中显示：segmentfault

margin: 0 auto

堆叠顺序：框架

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

CSS z-index 属性布局

6、HTML框架布局

6.1 垂直布局

6.2 水平布局

6.3 内联框架：iframe标签

7、搜索引擎优化

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

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