[刘阳Java]_Web前端入门级练习_迅雷首页第一屏设计
2024-09-07 12:03:52
今天接着上一篇文章《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);
}
最新文章
- 【BZOJ-3573】米特运输 树形DP
- jenkins2 pipeline入门
- js图片时间翻转
- ok6410 android driver(10)
- grunt 执行
- mvc路由规则相关
- 介绍一款管理软件Redmine
- [Tree]Binary Tree Preorder Traversal
- C#.NET学习笔记2---C#.第一个C#程序
- 4.VUEX到底是什么
- 【转】localStorage使用总结
- 【总结】Java异常分类
- node读取文件转换json文件
- REdis命令处理流程处理分析
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
- MySql cmd下的学习笔记 —— 有关表的操作(对表的增删改查)
- 更改mysql 和jinkins目录
- 非post请求时整个url作为参数传递出现bug
- js基础-类型转换
- 常用,好用的js代码