时间：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);} 原创：知了堂培训讲师-子墨
原文链接：Web前端入门级练习_迅雷首页第一屏设计
关键词：设计,入门,练习
