今天接着上一篇文章《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前端入门级练习_迅雷首页第一屏设计的更多相关文章

  1. [刘阳Java]_Web前端入门级练习_迅雷官宣网设计

    也有一段时间没有写一些技术专题文章,今天给大家来几篇Web前端入门级练习的文章.主讲<迅雷官宣网>的设计,相信大家平时也用过迅雷这个下载工具,所以分享的这篇技术大家在一定程序会感兴趣. 先 ...

  2. [刘阳Java]_easyui-panel组件入门级_第3讲

    EasyUI中的panel组件在前面一节中我们简单告诉了大家代码如何写.这一节我们会从panel的入门级开始讲起走,重点包括它的事件监听,属性tool介绍 1. 事件监听-通过data-options ...

  3. [刘阳Java]_SpringMVC访问静态资源_第9讲

    有些时候我们在使用SpringMVC的时候造成无法访问静态资源文件(如:html,js,css,image等等).其主要的原因出在web.xml文件我们设置SpringMVC前端控制器的映射路径 &l ...

  4. [刘阳Java]_Spring常用注解介绍_第6讲

    Spring的注解是在Spring2.5的版本中引入的,目的简化XML配置.在企业开发过程中使用注解的频率非常高,但是学习注解的前提是大家一定要对Spring基于XML配置要熟悉,这是我个人建议,因为 ...

  5. [刘阳Java]_MySQL数据优化总结_查询备忘录

    数据库优化是在后端开发中必备技能,今天写一篇MySQL数据优化的总结,供大家看看 一.MySQL数据库优化分类 我们通过一个图片形式来看看数据优化一些策略问题 不难看出,优化有两条路可以选择:硬件与技 ...

  6. [刘阳Java]_BeanNameViewResolver视图解析器_第8讲

    BeanNameViewResolver:这个视图解析器跟XmlViewResolver有点类似,也是通过把返回的逻辑视图名称去匹配定义好的视图bean对象.它要求视图bean对象都定义在Spring ...

  7. [刘阳Java]_ResourceBundleViewResolver视图解析器_第7讲

    ResourceBundleViewResolver是根据proterties文件来找对应的视图来解析"逻辑视图".该properties文件默认是放在classpath路径下的v ...

  8. [刘阳Java]_Spring相关配置介绍_第5讲

    这一节我们介绍一下Spring框架的相关常用配置 Spring依赖注入的两种方式(构造方法注入和setter方式注入) p-namespace方式配置 properties属性文件配置方式 集合对象配 ...

  9. [刘阳Java]_MyBatis_注解基本用法_第10讲

    MyBatis注解提出,可以说是非常好简化了MyBatis配置文件的使用.下面我们简单地来告诉大家如何使用MyBatis的注解 定义接口 package com.gxa.dao; import jav ...

随机推荐

  1. RISC-V与DSA计算机架构

    RISC-V与DSA计算机架构 相信所有和计算机体系结构打过交道的朋友们都看过David Patterson与John Hennessy的煌煌巨作,<计算机体系架构:量化研究方法>.两位在 ...

  2. Anchor Boxes示例实战

    Anchor Boxes示例实战 目标检测算法通常对输入图像中的大量区域进行采样,判断这些区域是否包含感兴趣的目标,并调整这些区域的边缘,以便更准确地预测目标的真实边界框.不同的模型可能使用不同的区域 ...

  3. 用java实现一个ATM机系统（2.0版）

    用java实现一个ATM机系统(2.0版) java实现银行ATM自助取款机,实现功能:用户登录.余额查询.存钱.取钱.转账.修改密码.退出系统. 文章目录 用java实现一个ATM机系统(2.0版) ...

  4. Java面试必知必会：基础

    面试考察的知识点多而杂,要完全掌握需要花费大量的时间和精力.但是面试中经常被问到的知识点却没有多少,你完全可以用 20% 的时间去掌握 80% 常问的知识点. 一.基础 包括: 杂七杂八 面向对象 数 ...

  5. Javaweb：Servlet

    servlet简介 Servlet(Server Applet)是 Java Servlet 的简称,是使用 Java 语言编写的运行在服务器端的程序.具有独立于平台和协议的特性,主要功能在于交互式地 ...

  6. 04-拉格朗日对偶问题和KKT条件

    04-拉格朗日对偶问题和KKT条件 目录 一.拉格朗日对偶函数 二.拉格朗日对偶问题 三.强弱对偶的几何解释 四.鞍点解释 4.1 鞍点的基础定义 4.2 极大极小不等式和鞍点性质 五.最优性条件与 ...

  7. Python 机器学习实战 —— 监督学习（下）

    前言 近年来AI人工智能成为社会发展趋势,在IT行业引起一波热潮,有关机器学习.深度学习.神经网络等文章多不胜数.从智能家居.自动驾驶.无人机.智能机器人到人造卫星.安防军备,无论是国家级军事设备还是 ...

  8. Scala语言笔记 - 第三篇（容器方法篇）

    Scala语言笔记 - 第三篇(容器方法篇) 目录 Scala语言笔记 - 第三篇(容器方法篇) map和flapMap方法: ​ 最近研究了下scala语言,这个语言最强大的就是它强大的函数式编程( ...

  9. split截取字符串

    一.根据单个分隔字符用split截取字符串:string st="GT123_1";split代码:string[] sArray=st.split("_"); ...

  10. 图解 Redis | 差点崩溃了，还好有主从复制

    大家好,我是小林哥,又来图解 Redis 啦. 我在前两篇已经给大家图解了 AOF 和 RDB,这两个持久化技术保证了即使在服务器重启的情况下也不会丢失数据(或少量损失). 不过,由于数据都是存储在一 ...