今天接着上一篇文章《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添加背景的时候是不能设置成功的
- 最后分别定义三个选择器来固定他们在屏幕的位置