摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/WKQdpx

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cgzaEH9

每日前端實(shí)戰(zhàn)系列的全部源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

定義 dom，容器中包含 2 個(gè)元素，分別代表 logo 和進(jìn)度條，logo 又包含 3 段文字：

    

        
Microsoft
        
Windows
        
Professional
    
    

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定義容器尺寸：

.windows-boot {
    width: 21.5em;
    height: 15em;
}

設(shè)置段落樣式：

.logo p {
    color: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

設(shè)置字號：

.logo .ms {
    font-size: 1.6em;
}

.logo .win {
    font-size: 4.2em;
}

.logo .pro {
    font-size: 3em;
}

設(shè)置字體粗細(xì)：

.logo .ms {
    font-weight: lighter;
}

.logo .win {
    font-weight: bold;
}

.logo .pro {
    font-weight: lighter;
}

設(shè)置行高：

.logo .ms {
    line-height: 1em;
}

.logo .win {
    line-height: 86%;
}

.logo .pro {
    line-height: 1em;
    padding-left: 0.2em;
}

在 "Microsoft" 后面增加商標(biāo)版權(quán)符號：

.logo .ms::after {
    content: "