摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/WKQdpx
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cgzaEH9
源代碼下載每日前端實戰系列的全部源代碼請從 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" 后面增加商標版權符號:
.logo .ms::after { content: "