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小時入門經典視頻教程字體

相關標籤/搜索