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

按下右側(cè)的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

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

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

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

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

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

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

定義 dom，容器中包含 2 個元素，分別代表 logo 和進度條，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;
}

設置段落樣式：

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

設置字號：

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

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

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

設置字體粗細：

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

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

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

設置行高：

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

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

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

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

.logo .ms::after {
    content: "