首頁 > 開發者 > Java

[劉陽Java]_Web前端入門級練習_迅雷首頁第一屏設計

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：播放   col   pos   blog   http   info   結合   今天   mil   

今天接著上一篇文章《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前端入門級練習_迅雷首頁第一屏設計

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More