設計創(chuàng)作中，如何高效的對信息進行整合、梳理？對此，本文分享了對Confluence 的產(chǎn)品體驗設計拆解，從日常使用場景、體驗亮點、體驗槽點三個方面分析并總結(jié)了文檔類產(chǎn)品的解題寶典，一起來看看吧。

一、前言

Confluence 是一個由 Atlassian 公司所開發(fā)的專業(yè)的企業(yè)知識管理與協(xié)同軟件，可以用于構(gòu)建企業(yè) Wiki。它能夠幫助團隊成員之間共享信息、文檔協(xié)作、集體討論，信息推送等。

如何高效地對信息進行整合、梳理， 是設計創(chuàng)作很重要的一環(huán)。基于此，這里給大家分享一下 Confluence 的產(chǎn)品體驗設計拆解。通過對 Confluence 的體驗設計拆解，為你提供一份文檔類產(chǎn)品的解題寶典！

Ps：筆者之前寫文章主要是使用語雀或 Notion，這次為了拆解「Confluence」，就專門用 Confluence 寫文章來拆解 Confluence ～（套娃警告 ）

1. 事先聲明

• 強烈建議使用電腦查看，用戶體驗更佳；
• 為了讓設計細節(jié)更容易被看到，用 Gif 來呈展示；
• Gif 體積較大，請耐心查看。

2. 適合人群

第一類，UI/UX設計師，可以跳出執(zhí)行層，去思考 Confluence 的產(chǎn)品設計策略，提升產(chǎn)品分析能力；第二類，產(chǎn)品經(jīng)理/運營，通過全面的產(chǎn)品設計拆解、策略推導，獲取產(chǎn)品設計參考；第三類，文檔產(chǎn)品從業(yè)者，通過全面的產(chǎn)品設計策略推導、用戶需求分析，獲取競品分析參考。

二、日常使用場景

1. Confluence 基礎(chǔ)概念

首先了解一下這幾個 Confluence 中的基本概念，頁面都是以樹狀結(jié)構(gòu)放置與空間之中，頁面之間也可以互相鏈接和訪問。創(chuàng)建頁面時除了采用空白文檔，也可以選擇模板。權(quán)限控制分了 3 個維度，分別是團隊、個人和匿名用戶，按照權(quán)限最小化原則，分空間和分頁面管理。

2. 頁面模板

點擊「+」號新建頁面后，這里并沒有像飛書一樣把推薦使用哪些模板作為一個彈窗打斷用戶，而是直接進入到新頁面的編輯流程，光標聚焦到標題，整個過程更加自然。給用戶的預期還是直接新建頁面，當用戶在右側(cè)瀏覽到有很多豐富的模板時，如果有需求便會主動地去觸發(fā)使用。

Confluence Cloud 附帶了 100+個模板，覆蓋了非常多的主題，如人力資源、軟件開發(fā)、團隊合作、項目規(guī)劃等。這些模板幫助能夠用戶制作精美有效的頁面內(nèi)容。并且模板預覽的交互也非常輕量，不需要再次跳轉(zhuǎn)或者打開彈窗去中斷用戶的操作行為，而是直接鼠標懸停便能預覽模板的詳情。

3. 讀寫分離

關(guān)于讀寫分離，看起來是和語雀類似的，把讀和寫區(qū)分為兩種場景。語雀考慮的更多的是希望對作者來說，他的寫能夠在一種平靜又沉浸的一個創(chuàng)作環(huán)境中，他能夠無所顧慮的寫。而讀者他能夠放心的去閱讀。然后在這兩個體驗之間，用一個“發(fā)布/更新”的動作來實現(xiàn)連接。這個發(fā)布讓作者更加有儀式感，這個動作告訴作者，你的內(nèi)容將交給讀者，由讀者來閱讀。

而 Confluence 的考慮更多的應該是基于團隊協(xié)同的辦公場景。期望團隊中被大家看到的的文檔也應該是一個相對穩(wěn)定或者是被審閱過后的版本，即通過「發(fā)布」這個行為來進行確認。

在編輯頁面時，進行的更改會自動保存并同步，以便編輯這個頁面的所有人都能看到。不過，只有在您發(fā)布后，查看頁面的人才會看到這些更改。您每次發(fā)布更改時，Confluence 會啟動頁面的一個新版本，并將它存儲在版本歷史記錄中。這樣，用戶可以跟蹤不同時間的更改，并在需要時輕松恢復到以前的版本。

4. 插入?yún)^(qū)塊

Confluence 支持非常可插入的區(qū)塊，點擊「+」或者輸入「/」，通過下拉菜單可以展示一些常用的區(qū)塊，在「查看更多」內(nèi)，可以顯示所有支持插入的區(qū)塊，并且還有一個專門的應用市場可以去安裝更多的應用，例如可以安裝 Mind Maps ，在 Confluence 中就可以直接繪制思維導圖。

5. 草稿和已發(fā)布頁面

基于讀寫分離的設計理念。Confluence 也區(qū)分草稿和已發(fā)布的頁面。創(chuàng)建了新頁面后，在未發(fā)布之前它會以草稿形式存在，直到發(fā)布為止。草稿不會出現(xiàn)在其他成員的頁面樹、動態(tài)訂閱源或搜索結(jié)果中（一經(jīng)發(fā)布，頁面便會出現(xiàn)在所有這些位置，除非它帶有加密的標識）。發(fā)布、關(guān)閉、更多組成了一個按鈕組，在「更多」內(nèi)也可以對進行其他的發(fā)布操作，例如發(fā)布但不通知關(guān)注者、安排發(fā)布的時間等。

6. 頁面權(quán)限

每個頁面都可以設置單獨的頁面權(quán)限，例如允許任何人都可以查看和編輯、只有某些人可以查看或編輯等。整體權(quán)限配置的交互操作也是比較符合由大到小的權(quán)限配置原則，先配置總的三大權(quán)限類型，再在小的權(quán)限類型中可以細化，例如邀請不同的人，給予不同的查看或編輯權(quán)限。

三、體驗亮點

1. 頂部工具欄

Confluence 的頂部工具欄和右側(cè)的發(fā)布、查找、協(xié)同功能是放在同一行功能區(qū)域里，同時也可以看到并沒有把太多的工具都平鋪出來，而是把一些相對常用的工具平鋪出來，不常用的工具則隱藏到「更多」里。相對騰訊文檔、語雀、石墨這類型的產(chǎn)品，頂部能夠節(jié)省一行空間，在保留工具欄常顯的基礎(chǔ)上，整體顯得更加簡潔。

2. 圖片縮放柵格

圖片的縮放不像常見的文檔工具那樣隨意縮放，容易縮放出各種大小不一的圖片，Confluence 的圖片縮放會基于特定的柵格參考線，鼠標在參考線的附近釋放會自動吸附，并縮放至相應的大小，這樣就能夠在一定程度上限制整篇文檔的圖片大小的種類，使圖片的排版也更加精美。

3. 頁面層級省略

左上角的面包屑層級不易默認顯示全部出來，而是會默認將中間省略，優(yōu)先顯示第一個和最后一個層級節(jié)點。這個細節(jié)可以體現(xiàn)在產(chǎn)品設計的策略，并不會一股腦的把所有信息都展示給用戶，而是優(yōu)先展示相對重要的信息，隱藏會省略此藥的信息，當用戶想要關(guān)注的時候，也能夠很方便的進行觸發(fā)。

4. 添加表情符號

鼠標懸停至 Confluence 的標題出，會顯示可以添加表情符號。通過適時隱藏的方式，當鼠標經(jīng)過時才出現(xiàn)，避免常駐顯示給用戶帶來的干擾。內(nèi)置了很多表情，團隊內(nèi)部可以確認表情使用的規(guī)則，便可以幫助用戶更快速地對文檔的類型做出識別和判斷。

5. 頁面狀態(tài)

Confluence 支持給頁面添加自定義的狀態(tài)，例如計劃中、草稿、正在進行、隨時可以查看等，同時狀態(tài)的設置除了基本的文本外，還支持用戶自定義狀態(tài)的顏色，讓其他成員在閱讀文檔的時候，可以很直觀地了解到當前這篇文檔的狀態(tài)，便于團隊協(xié)同和管理。

6. 表格標題行自動固定

?

Confluence 的表格支持設置標題行，當頁面滾動至表頭不在正常可視范圍時，會自動將表頭進行固定懸浮，讓用戶能夠看清楚下面的內(nèi)容和標題的對應關(guān)系，體驗非常自然順暢。除了設置標題行，也支持設置編號列，同理也是可以在橫向滾動表格的時候，能夠便捷的瀏覽對應的編號。

7. 表格單元格的設置

在表格中框選單元格后，會在右上角出現(xiàn)對于單元格的更多操作設置，例如設置單元格背景色、合并/拆分單元格等。將這些對于單元格的設置直接外露出來，其他的一些文檔工具有的是需要右鍵才觸發(fā)，略顯隱蔽，有的雖然也是浮動工具欄的形式，但是框選文本和框選單元格的觸發(fā)區(qū)分不明確，操作體驗上欠佳。Confluence 中這種表格交互的方式很好的解決了一些表格中的交互問題，使用體驗上也非常流暢。

8. 靈活的分欄設置

Confluence 中的分欄設置也是內(nèi)置了幾種固定的欄數(shù)和布局百分比，基本上能夠兼容絕大部分場景，同時做出限制也能夠讓整體頁面的分欄效果不會因為參差不齊而顯得凌亂。調(diào)節(jié)的方式也非常便捷，所有關(guān)于區(qū)塊的調(diào)整方式都是位于區(qū)塊的下方調(diào)整。

9. 自動保存提示

目前市面上主流的在線文檔工具絕大部份都是實時保存的，不過難免會有一些用戶會有數(shù)據(jù)丟失的焦慮。為解決這種用戶焦慮，Confluence 會在頁面的頂部出現(xiàn)保存的狀態(tài)提示，告知用戶剛剛編輯的數(shù)據(jù)正在保存、已保存等，避免用戶擔心編輯的內(nèi)容沒有保存而引發(fā)的焦慮情況。

10. 無障礙設計

關(guān)于無障礙設計的一個小亮點，對于因視覺障礙而使用屏幕朗讀起的用戶，如果遇到圖片，便無法被朗讀器識別，這個時候就可以使用替代文本的功能，當朗讀器朗讀到某張圖片時，可以將圖片轉(zhuǎn)化為編輯者所設置好的替代文本，這樣就能夠通過替代文本的方式幫助有視覺障礙的用戶理解內(nèi)容。

四、體驗槽點

1. 歸檔彈窗按鈕錯位

在點擊頁面歸檔時彈出來的彈窗，發(fā)現(xiàn)右上角的「關(guān)閉」錯位到彈窗外部了，一個非常明顯的線上 BUG 。

2. 區(qū)塊拖動沒有交互反饋

一部分區(qū)塊在拖拽的時候，只會講區(qū)塊的名稱帶上，缺少即將移動到的目標位置的交互反饋。

3. 一些視覺樣式不統(tǒng)一

創(chuàng)建空間的時候，可以發(fā)現(xiàn)創(chuàng)建空間的彈窗與外面的其他頁面的視覺樣式差異很多，明顯看起來就不是一套設計樣式。推測是因為有比較久遠的歷史設計債務問題，導致目前整體產(chǎn)品內(nèi)存在一些頁面的視覺樣式格格不入。

4. 頁面目錄

在體驗 Confluence 的過程中，不知道是不是因為筆者沒有找到功能的原因，發(fā)現(xiàn) Confluence 沒有國內(nèi)一些文檔工具都有的目錄錨點功能（如果大家有發(fā)現(xiàn)的話，可以告訴我 ），雖然可以通過插入目錄索引來實現(xiàn)，但是這個目錄只是實現(xiàn)一個跳轉(zhuǎn)，并不能將目錄固定在頁面的左側(cè)或右側(cè)顯示。并且這個目錄只能在頁面的查看態(tài)才能看到，在編輯態(tài)的時候無法預覽目錄，導致在整理這篇文章的時候，經(jīng)常要上下滾動翻看，略顯麻煩。

五、總結(jié)

總體來講，Confluence 是非常強大的團隊知識管理工具，它覆蓋了非常全面的團隊協(xié)同場景，國內(nèi)很多文檔產(chǎn)品的設計都會借鑒 Confluence 中的一些設計策略和設計理念。本文只是依據(jù)日常使用場景測試出的一些小模塊，功能體驗也還有非常多的可取之處。

由于時間和篇幅有限，本文關(guān)于 Confluence 的設計拆解中存在的疏誤之處還望大家給與指正，歡迎大家一起學習和討論。

參考鏈接：

https://www.woshipm.com/pd/4836001.html

https://z?huanlan.zhihu.com/p/105877523

作者：波波 Bobby He ；深耕 B端體驗設計，持續(xù)學習輸出中。

本文由 @波波Bobby He 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

天總結(jié)的是CSS3的學習內(nèi)容

一、CSS簡介

CSS3是CSS技術(shù)的升級版本，CSS即層疊樣式表(Cascading StyleSheet)。CSS3語言是朝著模塊化發(fā)展的，把它分解成小的模塊，并且加入 更多新的模塊進來：

                    盒子模型
                    文字特效
                    邊框圓角
                    動畫
                    多列布局
                    用戶界面
                    旋轉(zhuǎn)
                    漸變
                    ...

二、CSS3的應用

2.1.超級選擇器

CSS選擇器：使用CSS對html頁面中的元素實現(xiàn)一對一，一對多或者多對一的控制：

選擇器
{
    樣式
}

1.屬性選擇器

在CSS3中追加了三個選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性，val表示為屬性的屬性值。

[att*=val]:如果元素用att表示的屬性的值中包含val指定的字符，那么該元素使用這個樣式。

[att$=val]:如果元素用att表示的屬性的屬性值的結(jié)尾字符用val指定的字符，那么該元素使用這個樣式。

[att^=val]:如果元素用att表示的屬性的屬性值的開頭字符為用val指定的字符，那么該元素使用這個樣式。

注意： /如果純用數(shù)字的時候該樣式不會顯示成功，需要用\連接與數(shù)字最近的符號 注意！只有’-‘的字符需要加’\’/

<head>
    <meta charset="UTF-8">
    <title>css3中的屬性選擇器</title>
    <style>
        /*1.[att*=val] 此時只有id=section1A的div會擁有該樣式*/
        [id*=section1]{
            background-color: blueviolet;
        }
        /*2.[att^=val] 此時只有id=footer的div會擁有該樣式*/
        [id^=f]{
            background-color: blue;
        }
        /*3.[att$=val] 此時只有id=sectionB的div會擁有該樣式*/
         [id$=B]{
            background-color: chartreuse;
        }
        /*注意！*/
        [id$=\-1]{
            background-color: crimson;
        }
    </style>
</head>
<body>
    <h1>CSS3中的屬性選擇器</h1>
    <div id="section1A">section1A</div>
    <div id="sectionB">sectionB</div>
    <div id="section2-1">section2-1</div>
    <div id="footer">footer</div>
</body>

2.結(jié)構(gòu)性偽類選擇器
(1)類選擇器
使用類選擇器把相同的元素定義成不同的樣式，偽類選擇器是已經(jīng)定義好的不可以隨便起名。

p.right{
    color:red;
}
p.left{
    colot:blue;
}

(2)偽類選擇器—-最常見的偽類選擇器：a（使用順序為：未，已，懸，停）

        a:link{
            color: #ff6600;
        }
        a:visited{
            color: blueviolet;
        }
        a:hover{
            color: aqua;
        }
        /*鼠標點擊時*/
        a:active{
            color: darkblue;
        }

(3)偽元素選擇器
針對于CSS中已經(jīng)定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。

選擇器:偽元素{
    屬性:值;
}
選擇器.類名:偽元素{
    屬性:值;
}

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內(nèi)容。

after：在某個元素之后插入一些內(nèi)容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內(nèi)容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標題前加上編號：counter屬性對項目追加編號

            元素:before{
                content:counter(計數(shù)器);
            }
            元素{
                counter-increment:content屬性值中所指定的計數(shù)器名稱；
            }

    b.對編號中添加文字
    c.指定編號的樣式
    d.指定編號的種類：list-style-type
    e.編號嵌套，重置編號
        要對哪一個元素進行重置，那么就在該元素的父元素上進行設置reset。
    f.中編號中嵌入大編號

        h2:before{
            content:counter(大編號計數(shù)器)'-'conter(中編號計數(shù)器);

    g.在字符串兩邊嵌套文字符號:open-quoter&close-quoter

<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四個偽類選擇器</h1>
    <p>
        CSS中主要有四個偽類選擇器<br />
        first-line偽元素選擇器：向某個元素中的第一行文字使用樣式
    </p>
    <p>
        first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)結(jié)構(gòu)性偽類選擇器

• root選擇器：將樣式綁定到頁面的根元素中。
• not選擇器：只對某個結(jié)構(gòu)元素使用樣式，但該元素下面的子結(jié)構(gòu)元素不使用該樣式。
• empty選擇器：指定當元素中內(nèi)容為空白時顯示的樣式。

<head>
    <style>
    /*empty選擇器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

<head>
    <style>
        /*target選擇器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target選擇器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A標題</h2>
        <p>內(nèi)容</p>
    </div>
    <div id="B">
        <h2>B標題</h2>
        <p>內(nèi)容</p>
    </div>
</body>

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數(shù)下來的第N個子元素，nth-child(odd)為第奇數(shù)個子元素，nth-child(even)為第偶數(shù)個子元素。

nth-last-child(n)：匹配倒數(shù)數(shù)下來第n個子元素。

nth-of-type：正數(shù)，當指定元素為標題加內(nèi)容的時候，如果使用上面的方法會導致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進行指定。

nth-last-type：倒數(shù)，同nth-first-type。

循環(huán)使用樣式：nth-child(An+B)–A 表示每次循環(huán)中共包括幾種樣式，B表示指定的樣式在循環(huán)中所處的位置。

only-child：只對一個元素起作用。

<head>
    <meta charset="UTF-8">
    <title>結(jié)構(gòu)性偽類選擇器</title>
    <style>
        /* 選擇器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循環(huán)*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的問題*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一個就沒有啦</li>
    </ul>
    <div id="A">
        <h2>A標題</h2><p>內(nèi)容</p>
        <h2>B標題</h2><p>內(nèi)容</p>
    </div>
</body>

3.UI元素狀態(tài)偽類選擇器
指定的樣式只有在元素處于某種狀態(tài)下才起作用，在默認狀態(tài)下不起作用！

選擇器:偽元素{
    屬性:值;
}
選擇器.類名:偽元素{
    屬性:值;
}

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內(nèi)容。

after：在某個元素之后插入一些內(nèi)容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內(nèi)容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標題前加上編號：counter屬性對項目追加編號

            元素:before{
                content:counter(計數(shù)器);
            }
            元素{
                counter-increment:content屬性值中所指定的計數(shù)器名稱；
            }

    b.對編號中添加文字
    c.指定編號的樣式
    d.指定編號的種類：list-style-type
    e.編號嵌套，重置編號
        要對哪一個元素進行重置，那么就在該元素的父元素上進行設置reset。
    f.中編號中嵌入大編號

        h2:before{
            content:counter(大編號計數(shù)器)'-'conter(中編號計數(shù)器);

       g.在字符串兩邊嵌套文字符號:open-quoter&close-quoter   

<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四個偽類選擇器</h1>
    <p>
        CSS中主要有四個偽類選擇器<br />
        first-line偽元素選擇器：向某個元素中的第一行文字使用樣式
    </p>
    <p>
        first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)結(jié)構(gòu)性偽類選擇器

• root選擇器：將樣式綁定到頁面的根元素中。
• not選擇器：只對某個結(jié)構(gòu)元素使用樣式，但該元素下面的子結(jié)構(gòu)元素不使用該樣式。
• empty選擇器：指定當元素中內(nèi)容為空白時顯示的樣式。

<head>
    <style>
    /*empty選擇器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

<head>
    <style>
        /*target選擇器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target選擇器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A標題</h2>
        <p>內(nèi)容</p>
    </div>
    <div id="B">
        <h2>B標題</h2>
        <p>內(nèi)容</p>
    </div>
</body>

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數(shù)下來的第N個子元素，nth-child(odd)為第奇數(shù)個子元素，nth-child(even)為第偶數(shù)個子元素。

nth-last-child(n)：匹配倒數(shù)數(shù)下來第n個子元素。

nth-of-type：正數(shù)，當指定元素為標題加內(nèi)容的時候，如果使用上面的方法會導致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進行指定。

nth-last-type：倒數(shù)，同nth-first-type。

循環(huán)使用樣式：nth-child(An+B)–A 表示每次循環(huán)中共包括幾種樣式，B表示指定的樣式在循環(huán)中所處的位置。

only-child：只對一個元素起作用。

<head>
    <meta charset="UTF-8">
    <title>結(jié)構(gòu)性偽類選擇器</title>
    <style>
        /* 選擇器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循環(huán)*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的問題*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一個就沒有啦</li>
    </ul>
    <div id="A">
        <h2>A標題</h2><p>內(nèi)容</p>
        <h2>B標題</h2><p>內(nèi)容</p>
    </div>
</body>

3.UI元素狀態(tài)偽類選擇器
指定的樣式只有在元素處于某種狀態(tài)下才起作用，在默認狀態(tài)下不起作用！

4.兄弟元素選擇器
用來指定位于同一父元素之中的某個元素之后的所有其他某個種類的兄弟元素所使用的樣式。一定要是之后的兄弟元素！

<子元素>~<子元素之后的同級兄弟元素>
    {
        樣式
    }

2.2.文字陰影與自動換行

1.text-shadow

p{
    text-shadow：length(陰影離開文字的橫方向距離) length(陰影離開文字的縱方向距離) length(陰影模糊半徑) color(陰影顏色)
}

位移距離：前兩個參數(shù)代表的陰影離開文字的橫(縱)方向距離，不可省略。

第三個參數(shù)代表模糊半徑，代表陰影向外模糊時候的范圍，數(shù)值越大越模糊。

當沒有指定顏色值時，會使用默認文字的顏色。

指定多個陰影，并且可以針對每個陰影用逗號分隔。

2.word-break：瀏覽器文本自動換行。

3.word-wrap： 長單詞與URL地址自動換行。

4.服務器端字體和@font-face屬性

定義斜體或粗體：在定義字體的時候，可以把字體定義成斜體或者粗體，在使用服務器服務器端字體的時候，需要根據(jù)斜體還是粗體使用不同的漢字。

顯示客戶端字體：首先將font-family設置為本地的字體名，然后將src屬性設置為local(‘字體’)。

font-variant：設置文本是否大小寫。

font-weight：設置文本的粗細。

font-stretch：設置文本是否橫向的拉伸變形。

2.3.盒模型

1.各種盒模型

inline-block類型

使用inline-block類型來執(zhí)行分列顯示

<head>
    <style>
    div.div1{
            background-color: #ff6600;
            width: 300px;
            height: 150px;
            float: left;
        }
        div.div2{
            background-color: #21fffc;
            width: 200px;
            height: 100px;
            float: left;
        }
        div.div3{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
            clear: both;
        }
        /*inline-block*/
        div.div4{
            background-color: #ff6600;
            display: inline-block;
            width: 300px;
        }
        div.div5{
            background-color: #21fffc;
            vertical-align: top;
            display: inline-block;
            width: 200px;
        }
        div.div6{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
        }
      </style>
</head>
<body>
    <h1>使用inline-block類型來執(zhí)行分列顯示-1.傳統(tǒng)方式</h1>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <hr color="darkred">
    <h1>使用inline-block類型來執(zhí)行分列顯示-1.inline-block方式</h1>
    <div class="div4">
        div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
    </div><div class="div5">
        div2div2div2div2div2div2div2
        div2div2div2div2div2div2div2div2
    </div>
    <div class="div6">
        div3
    </div>  
</body>

使用inline-block類型來顯示水平菜單

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block類型來顯示水平菜單-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

使用inline-block類型來顯示水平菜單

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block類型來顯示水平菜單-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

<head>
    <style>
        table{
           display: inline-table;
           vertical-align: bottom;
           border: 2px solid blueviolet;
           width: 400px;
           height: 200px;
           color: darkviolet;
       }
        td{
            border: 2px solid violet;
        }
    </style>
</head>
<body>
    <h1>使用inline-table類型-一個表格前后都有文字將其環(huán)繞</h1>
    巴拉巴拉
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    巴拉巴拉
</body>

list-item類型

可以將多個元素作為列表顯示，同時在元素的開頭加上列表的標記。

run-in類型和compact類型

none類型

當元素被指定none后，該元素不會顯示

2.顯示不下的內(nèi)容

overflow屬性：指定對盒子中容納不下的內(nèi)容的顯示辦法

overflow-x屬性與overflow-y屬性

textoverflow：在盒子的末尾顯示代表省略符號的‘…’，但是該屬性只在內(nèi)容在水平位置上超出時顯示。

3.盒子陰影

box-shadow:讓盒在顯示的時候產(chǎn)生陰影的效果

對盒內(nèi)子元素設置陰影

對一個文字或第一行設置陰影：通過first-line或者first-letter

對表格和對單元格使用陰影

4.box-sizing寬高計算

指定針對元素的寬度和高度的計算方法

    (content)border-box:屬性值表示元素的寬高度(不)包括內(nèi)補白區(qū)域及邊框的寬度高度

<head>
    <style>
        div.a,div.b{
            width: 300px;
            padding: 30px;
            margin: 20px auto;
            border: 30px solid darkviolet;
            background-color: violet;
        }
        div.a{
            box-sizing: border-box;
        }
        div.b{
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <h2>box-sizing：content&border-box</h2>
    <div class="ab">
        <div class="a">
            box-sizing：border-box代表寬度和高度包含內(nèi)補白寬度高度，即雖然有padding和border，最終仍然為300px
        </div>
        <div class="b">
            box-sizing：content-box:代表不包含寬高度內(nèi)補白區(qū)域，即最后為300px+30px+30px
        </div>
    </div>
</body>

2.4.邊框和背景樣式

1.新增的背景屬性

background-clip:指定背景的顯示范圍

border-box：從邊框開始

padding-box：從內(nèi)邊框開始

content-box：從內(nèi)容開始

background-orgin:指定繪制背景圖像的起點

可以指定繪制時的起始位置，默認為padding，可以為border或者content左上角開始繪制。

background-size:指定背景中圖像的尺寸

auto

length

percentage：以父元素的百分比設置背景圖像的寬高度。

cover：全覆蓋。

contain ：與cover相反，主要將背景圖片縮小，來適合布滿整個容器。

2.顯示多個背景屬性： 第一個圖像在最上面

3.圓角邊框：border-radius

指定兩個半徑：左上右下+左下右上

當不顯示邊框的時候，瀏覽器會把四個角繪制成圓角

修改邊框種類。

繪制四個不同半徑的邊框

4.圖像邊框：border-image

可以讓元素的長度或?qū)挾忍幱陔S時變化時，變化狀態(tài)的邊框統(tǒng)一使用一個圖像文件來進行繪制。

2.5.CSS3變形功能

1.利用transform實現(xiàn)文字或圖像的旋轉(zhuǎn)，縮放，傾斜移動這四種類型的變形處理。

旋轉(zhuǎn)：totate(角度)

縮放：scale(值):0.5即為縮放到50%

傾斜:skew(值),值為角度

移動：translate(值)

對一個元素使用多個方法

transform：方法1 方法2 方法 3 方法4

改變元素基點

transform-origin:

2.6.CSS3的動功能

1.transition功能：支持從一個屬性值平滑到另外一個屬性值

允許CSS屬性值在一定的時間內(nèi)平滑的過度，這種效果可以在單擊，獲得焦點，被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑的以動畫效果改變CSS屬性值。

(1)執(zhí)行變換的屬性：transition-property：過渡即將開始

none：沒有屬性會獲得過渡效果

all:所以屬性會獲得過渡效果

property：定義應用過渡效果的CSS屬性名稱列表，以逗號分隔

(2)變換延續(xù)時間：transition-duration：規(guī)定完成過渡需要花費的時間，默認值零沒有效果。

(3)在延續(xù)時間段，變換速率的變化：transition-timing-function。

(4)變換延遲時間：transition-delay：指定一個動畫開始執(zhí)行的時間，也就是當改變元素屬性值后多長時間開始執(zhí)行過渡效果。

<head>
    <meta charset="UTF-8">
    <title>CSS3中的動畫效果</title>
    <style>
        div.transition1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            -webkit-transition:all 1s linear 1s;
        }
    </style>
</head>
<body>
    <h2>transition</h2>
    <div class="transition1"></div>
</body>

2.Animations功能：支持通過關(guān)鍵幀的指定來在頁面上產(chǎn)生更復雜的動畫現(xiàn)象。

• name：指定合集名稱
• duration：整個動畫執(zhí)行完成所需時間
• timing-function：實現(xiàn)動畫方法
• iteration-count：重復播放次數(shù)

<head>
    <style>
        div.animation{
            width: 20px;
            height: 20px;
            background-color: #ef23ff;
        }
        /*關(guān)鍵幀的封裝*/
        @-webkit-keyframes myan{
            0%{
                background-color: violet;
                width: 50px;
            }
            10%{
                background-color: palevioletred;
                width: 100px;
            }
            30%{
                background-color: mediumvioletred;
                width: 200px;
            }
            50%{
                background-color: blueviolet;
                width: 40px;
            }
            70%{
                background-color: darkviolet;
                width: 400px;
            }
            90%{
                background-color: #7300a4;
                width: 600px;
            }
            100%{
                background-color: #4a0068;
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <h2>animation</h2>
    <div class="animation"></div>
</body>

2.7.CSS3的分頁

1.點擊及鼠標懸停分頁樣式

2.鼠標懸停過渡效果：transition: background-color .9s;

3.圓角樣式：border-radius

4.邊框：border:2px solid darkviolet;

2.8.布局相關(guān)樣式

1.多欄布局

column-count屬性：將一個元素中的內(nèi)容分成多欄進行顯示，要將元素的寬度設置成多個欄目的總寬度

column-width屬性：指定欄目的寬度來生成分欄

column-gap屬性：指定欄目之間的距離

column-rule:欄目之間添加分隔線

2.盒布局： 多欄布局的欄目寬度必須相等，指定欄目的寬度的時候也只能統(tǒng)一指定，但是欄目的寬度不可能全部都一樣，所以多欄布局比較適合在文字內(nèi)容頁面顯示，比如新聞。并不適合整個網(wǎng)頁編排時使用。而盒布局就相對比較隨意一些，可以定義成不同的頁面。

3.彈性盒子布局

(1)box-flex：使得盒子布局變成彈性布局：可以自適應窗口

(2)box-ordinal-group：改變元素的顯示順序

(3)box-orient：改變元素排列方向

horizontal:在水平行中從左向右排列子元素

vertical：從上向下垂直排列子元素

<style>
    div.all{
        display: -webkit-box;
        /*-webkit-box-orient: vertical;窗口垂直現(xiàn)實與水平顯示*/
        }
        .left{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group:3;
        }
        .right{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group: 2;
        }
        .center{
            -webkit-box-flex:1;
            background-color: #962fff;
            -webkit-box-ordinal-group: 1;
        }
    </style>        

(4)元素的高度寬度自適應：就是元素的高度和寬度可以根據(jù)排列的方向改變而改變。
(5)使用彈性布局來消除空白：方法就是給子div中加入一個box-flex屬性。

<style>
    .center1{
            display: -webkit-box;/*盒模型顯示*/
            border: 5px solid darkviolet;
            -webkit-box-orient: horizontal;/*水平顯示*/
            width: 600px;
            height: 400px;
        }
        .d1{
            background-color: #ff99e1;
            -webkit-box-flex: 2;
        }
        .d2{
            background-color: #962fff;
            -webkit-box-flex: 3;
        }
        .d3{
            background-color: #ef23ff;
            -webkit-box-flex: 4;
        }
        .d1,.d2,.d3{
            -webkit-box-sizing: border-box;
        }
    </style>

(6)對多個元素使用box-flex屬性，讓瀏覽器或者容器中的元素的總寬度或者總高度都等于瀏覽器或者容器高度。

(7)box-pack屬性和box-align屬性：指定水平方向與垂直方向的對齊方式(文字，圖像，以及子元素的水平方向或是垂直方向上的對齊方式)

2.9.不同瀏覽器加載不同的CSS樣式

Media Queries模塊是CSS3中的一個和各種媒體相關(guān)的重要模塊

原文鏈接：https://blog.csdn.net/qq_27348951/article/details/53378364