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

時間 2019-12-08

標籤 java web 前端入門練習首頁第一設計欄目 Java 简体版

原文原文鏈接

今天接着上一篇文章《Web前端入門級練習_迅雷官宣網設計》正式開始迅雷首頁初版的設計。若是完成，則最終的效果圖以下css

第一步：先完成logo部分的設計html

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添加背景的時候是不能設置成功的
最後分別定義三個選擇器來固定他們在屏幕的位置

第二步：設計第一屏主區域java

主區域會有一個視頻播放
而後在視頻的上方會嵌套對迅雷的一些文字描述
這個設計也是利用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的樣式代碼ide

* {
	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);
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。