今天接着上一篇文章《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. JVM学习心得—JVM内存模型（个人整理，请勿转载）

    一.运行时数据区域 线程私有的:程序计数器+虚拟机栈+本地方法栈 线程共享的:堆+方法区(运行时常量池)+直接内存(非运行时数据区的一部分) *JDK1.8后将方法区废除,新增元空间. 1.1 程序计 ...

  2. CUDA C++编程手册（总论）

    CUDA C++编程手册(总论) CUDA C++ Programming Guide The programming guide to the CUDA model and interface. C ...

  3. IPv6 与 IPv4现状

    IPv6 与 IPv4现状 一．概述 (1) IPv4可提供bai4,294,967,296个地址,IPv6将原来的32位地址空间增大du到128位,数目是zhi2的128次方.能够对地球上每平方米d ...

  4. H.265 HD 和H.265 4K Video Encoder IP Core

    H.265 HD 和H.265 4K Video Encoder IP Core H.265 HD Video Encoder IP Core(H.265 HD Video/Audio Encoder ...

  5. 算法编程Algos Programming

    算法编程Algos Programming 不同算法的集合,用于编程比赛,如ACM ICPC. 算法按主题划分.大多数算法都可以从文件中按原样运行.每种算法都有一个参考问题,并对其时间和空间复杂度作了 ...

  6. 九、配置Tomcat集群

    配置Tomcat集群所需服务器三台:192.168.1.5(调度服务器).192.168.1.10(WEB1),192.168.1.20(WEB2) 1.调度服务器设置 [root@proxy ~]# ...

  7. 会点自动化就要25k？ 现在年轻人这么浮躁吗

    面试中一问元素定位就对答如流.一问实际项目框架如何搭建就避重就轻.含糊其辞,这样的自动化实战能力也能拿25K?静待下文: 一.为什么现在自动化测试工资那么高呢? 结合现在的职场环境与企业用人需求,自动 ...

  8. 必看！LuatOS自定义C库全新教程，一文极速上手

    今天继续讲LuatOS的开发,上一期简单说了一下如何移植LuatOS,相信很多朋友已经看过了.那么今天,我就开始讲C和Lua调用的部分教程. LuatOS相关资料及Lua语言的官方定义,详见以下链接: ...

  9. 【题解】逐个击破 luogu2700

    题目 题目描述: 现在有N个城市,其中K个被敌方军团占领了,N个城市间有N-1条公路相连,破坏其中某条公路的代价是已知的. 现在,告诉你K个敌方军团所在的城市,以及所有公路破坏的代价,请你算出花费最少 ...

  10. HTTP请求方法及响应状态码详解

    HTTP请求方法和响应状态详解 HTTP请求方法 HTTP1.0/1.1支持的所有请求方法如下所示: GET 用来请求访问已被URI识别的资源.指定的资源经服务器解析后返回响应内容. POST POS ...