今天接着上一篇文章Web前端入门级练习_迅雷官宣网设计正式开始迅雷首页第一版的设计。如果完成，则最终的效果图如下
第一步：先完成logo部分的设计
logo设计，我们会使用CSS的定位来实现，但是在实现定位的时候，先得把网页结构编写好<body> <img src="img/logo.png" class="logo"> <div class="rightOne">更多</div> <div class="rightTwo">产品中心</div></body>添加样式，样式文件xunlei.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;}解释一下上面的代码思路
先消除所有元素的默认的外边距和内边距 *{....}，作用是元素和浏览器之间的距离就可以无缝结合因为迅雷官方首页一种分屏滑动展示的特点，所以我们需要设置html和body的overflow，这样子让超出浏览器可见区域的内容隐藏掉统一设置一下div的高度，如果没有高度那么给div添加背景的时候是不能设置成功的最后分别定义三个选择器来固定他们在屏幕的位置第二步：设计第一屏主区域
主区域会有一个视频播放然后在视频的上方会嵌套对迅雷的一些文字描述这个设计也是利用CSS的定位来完成先看第一主屏区的网页结构
<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);}