[劉陽Java]_Web前端入門級練習_迅雷首頁第一屏設計
阿新 • • 發佈：2018-07-28
nsf video 開始 今天 特點 迅雷 www. class 使用
今天接著上一篇文章《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);
}
[劉陽Java]_Web前端入門級練習_迅雷首頁第一屏設計