今天接着上一篇文章《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. FCN与U-Net语义分割算法

    FCN与U-Net语义分割算法 图像语义分割(Semantic Segmentation)是图像处理和是机器视觉技术中关于图像理解的重要一环,也是 AI 领域中一个重要的分支.语义分割即是对图像中每一 ...

  2. Gamma矫正技术

    Gamma矫正技术 一. gamma校正背景 在电视和图形监视器中,显像管发生的电子束及其生成的图像亮度并不是随显像管的输入电压线性变化,电子流与输入电压相比是按照指数曲线变化的,输入电压的指数要大于 ...

  3. Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案

    近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...

  4. eclipse解决中文乱码

    参考链接:https://blog.csdn.net/lzc2644481789/article/details/97244261

  5. 【NX二次开发】用户出口函数介绍

    用户出口(User Exit)是NX Open 中的一个重要概念.NX在运行过程中某些特定的位置存在规定的出口,当进程执行到这些出口时,NX会自动检查用户是否在此处已定义了指向内部程序位置的环境变量: ...

  6. python学习笔记02-简单游戏

    一拖又过去快一个月了,哭聊.. 惰性千万不要有.. 今天简单接触一下条件语句 一个简单的文字游戏 1 print('----第一个文字游戏----') 2 temp = input('猜一下现在心里想 ...

  7. 工具篇：介绍几个好用的guava工具类

    前言 平时我们都会封装一些处理缓存或其他的小工具.但每个人都封装一次,重复造轮子,有点费时间.有没有一些好的工具库推荐-guava.guava是谷歌基于java封装好的开源库,它的性能.实用性,比我们 ...

  8. testt

    一级标题 二级标题 三级标题 四级标题 l 1

  9. 易车网实战+【保姆级】：Feapder爬虫框架入门教程

    今天辰哥带大家来看看一个爬虫框架:Feapder,看完本文之后,别再说你不会Feapder了.本文辰哥将带你了解什么是Feapder?.如何去创建一个Feapder入门项目(实战:采集易车网轿车数据) ...

  10. 9.5、zabbix高级操作(1)

    在zabbix-web中删除之前所有监控的主机: 1.zabbix自动发现配置: zabbix-server通过扫描指定范围的ip地址发现zabbix-agent并自动添加监控主机,适用于zabbix ...