今天接着上一篇文章《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. 在 CUDA C/C++ kernel中使用内存

    在 CUDA C/C++ kernel中使用内存 如何在主机和设备之间高效地移动数据.本文将讨论如何有效地从内核中访问设备存储器,特别是 全局内存 . 在 CUDA 设备上有几种内存,每种内存的作用域 ...

  2. 狂神说redis笔记（三）

    八.Redis.conf 容量单位不区分大小写,G和GB有区别 可以使用 include 组合多个配置问题 网络配置 日志 # 日志 # Specify the server verbosity le ...

  3. 强化学习之CartPole

    0x00 任务   通过强化学习算法完成倒立摆任务,控制倒立摆在一定范围内摆动. 0x01 设置jupyter登录密码 jupyter notebook --generate-config jupyt ...

  4. 源码级别理解 Redis 持久化机制

    文章首发于公众号"蘑菇睡不着",欢迎来访~ 前言 大家都知道 Redis 是一个内存数据库,数据都存储在内存中,这也是 Redis 非常快的原因之一.虽然速度提上来了,但是如果数据 ...

  5. 在线CUR转换器

    在线CUR转换器 在线将文件与cur相互免费转换 鼠标光标cur格式可以利用这网站在线免费转换成jpg,png等任意一种格式,方便快速! 转换格式请点击在线CUR转换

  6. Spring Cloud 和 Dubbo，到底用哪个好？

    Spring Cloud是http协议传输,带宽会比较多,同时使用http协议一般会使用JSON报文,消耗会更大 dubbo的开发难度较大,原因是dubbo的jar包依赖问题很多大型工程无法解决 sp ...

  7. 孟老板 Paging3 (一) 入门

    BaseAdapter系列 ListAdapter系列 Paging3 (一) 入门 Paging3 (二) 结合 Room Paging3 (一)  入门 前言: 官方分页工具,  确实香.   但 ...

  8. Go语言判断一个字节的高位大于四

    Go语言判断一个字节的高位大于四 1.步骤: 第一步,将该字节的低位清零(与0xF0进行&运算) 为了后面与0x40比较 0xF0转为二进制是1111 0000,&运算(两个同时为1, ...

  9. 玩转STM32MP157- 使用 u8g2 驱动 OLED 12864(SSD1306)

    环境 硬件环境:STM32MP157C-DK2 软件: MPU上使用ST官方提供的STM32MP15x OpenSTLinux Starter Package 编译系统:Ubuntu 1604 64b ...

  10. 乘风破浪，Windows11官方原装4K壁纸，前卫的艺术数字设计

    Windows11预览版官方壁纸 默认主题Windows Windows.zip 月轮主题ThemeA ThemeA.zip 艺术石主题ThemeB ThemeB.zip 日升主题ThemeC The ...