码迷,mamicode.com
首页 > 编程语言 > 详细

[刘阳Java]_Web前端入门级练习_迅雷首页第一屏设计

时间:2018-07-28 13:52:02      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:播放   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前端入门级练习_迅雷首页第一屏设计

标签:播放   col   pos   blog   http   info   结合   今天   mil   

原文地址:https://www.cnblogs.com/liuyangjava/p/9381329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!