今天接着上一篇文章《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. TensorFlow Frontend前端

    TensorFlow Frontend前端 TensorFlow前端有助于将TensorFlow模型导入TVM. Supported versions: 1.12 and below Tested m ...

  2. 图像实例分割：CenterMask

    图像实例分割:CenterMask CenterMask: single shot instance segmentation with point representation 论文链家: http ...

  3. BEP 7：CUDA外部内存管理插件（上）

    BEP 7:CUDA外部内存管理插件(上) 背景和目标 在CUDA阵列接口使得能够共享不同的Python之间的数据库的访问CUDA设备.但是,每个库都与其它库区别对待.例如: Numba在内部管理内存 ...

  4. python读取配置文件，yaml模块读取yml文件

    ymal文件编写语法参考http://www.ruanyifeng.com/blog/2016/07/yaml.html ymal在python中的安装:pip install pyyaml yml文 ...

  5. Linux基础_vim命令

    简介:Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用. vi/vim 共分为三种模式,分别是命令模式(Command mode)也叫 ...

  6. 实战SpringBoot Admin

    长话短说哦,直接查看下文吧 目录 声明 先锋 前提 SpringBoot Admin 介绍 服务端的搭建 客户端的搭建 参数的指南 尾声 声明 见名知意,实战SpringBoot Admin,实战!实 ...

  7. 大厂面试必问！HashMap 怎样解决hash冲突？

    HashMap冲突解决方法比较考验一个开发者解决问题的能力. 下文给出HashMap冲突的解决方法以及原理分析,无论是在面试问答或者实际使用中,应该都会有所帮助. 在Java编程语言中,最基本的结构就 ...

  8. asp.net core配合vue实现后端验证码逻辑

    概述 网上的前端验证码逻辑总感觉不安全,验证码建议还是使用后端配合验证. 如果产品确定可以上网的话,就可以使用腾讯,百度等第三方验证,对接方便.但是产品可能内网部署,就必须自己写了. 本文章就是基于这 ...

  9. Java基准性能测试--JMH使用介绍

    JMH是什么 JMH是Java Microbenchmark Harness的简称,一个针对Java做基准测试的工具,是由开发JVM的那群人开发的.想准确的对一段代码做基准性能测试并不容易,因为JVM ...

  10. 20201123 实验二《Python程序设计》实验报告

    20201123 2020-2021-2 <Python程序设计>实验报告课程:<Python程序设计>班级:2011姓名:晏鹏捷学号:20201123实验教师:王志强实验日期 ...