時間：2023-09-03 22:18:01 | 來源：網站運營
時間：2023-09-03 22:18:01 來源：網站運營
Web前端入門級練習_迅雷官網首頁第一屏設計：今天接著上一篇文章Web前端入門級練習_迅雷官宣網設計正式開始迅雷首頁第一版的設計。如果完成，則最終的效果圖如下
在線咨詢
<body> <img src="img/logo.png" class="logo"> <div class="rightOne">更多</div> <div class="rightTwo">產品中心</div></body>* { margin: 0; padding: 0;}html, body { width: 100%; height: 100%; overflow: hidden;}div { height: 100%;}.logo { position: fixed; left: 30px; top: 20px; z-index: 999;}.rightOne { position: fixed; left: 95%; margin-top: 40px; color: #ffffff; z-index: 999;}.rightTwo { position: fixed; left: 85%; margin-top: 40px; color: #ffffff; z-index: 999;}解釋一下上面的代碼思路<body> <img src="img/logo.png" class="logo"> <div class="rightOne">更多</div> <div class="rightTwo">產品中心</div> <div class="main"> <!-- 第一屏 --> <div class="page page1"> <div class="video"> <video loop="loop" autoplay="autoplay"> <source src="img/bg" type=""> </video> <p class="oneTop">技術·共享·娛樂</p> <p class="oneBottom">下載迅雷產品</p> <p class="oneBottomOne">></p> </div> </div> </div> </body> CSS的樣式代碼* { margin: 0; padding: 0;}html, body { width: 100%; height: 100%; overflow: hidden;}div { height: 100%;}.logo { position: fixed; left: 30px; top: 20px; z-index: 999;}.rightOne { position: fixed; left: 95%; margin-top: 40px; color: #ffffff; z-index: 999;}.rightTwo { position: fixed; left: 85%; margin-top: 40px; color: #ffffff; z-index: 999;}.page1 { background-color: black;}.video { width: 100%; height: 100%; overflow: hidden;}.video video { width: 100%; height: 100%; object-fit: fill;}.oneTop { width: 100%; height: 180px; position: absolute; left: 50%; top: 50%; margin-left: -50%; margin-top: -90px; text-align: center; line-height: 180px; color: #ffffff; font-size: 8rem; font-family: '黑體';}.oneBottom { width: 188px; height: 54px; position: absolute; left: 50%; top: 70%; margin-left: -94px; margin-top: -27px; font-size: 22px; font-family: '黑體'; color: #ffffff; text-align: center; line-height: 54px; border: 1px solid #ffffff;}.oneBottom:hover { background-color: rgba(255, 255, 255, 0.3);}.oneBottomOne { width: 100%; height: 180px; position: absolute; left: 50%; top: 80%; margin-left: -50%; margin-top: -90px; color: #ffffff; font-size: 3rem; font-family: '黑體'; text-align: center; line-height: 180px; transform: rotate(90deg);} 原創(chuàng)：知了堂培訓講師-子墨
原文鏈接：Web前端入門級練習_迅雷首頁第一屏設計
關鍵詞：設計,入門,練習
