拼多多案例
发表于|更新于
|阅读量:
导航栏布局实现
使用fixed定位将导航栏固定在头部位置
其他的用absolute和relative进行定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
position: fixed;
top:0;
background-color: white;
width: 100%;
height: 103px;
border-bottom:4px solid #ed435b;
}
.box .head {
width: 1200px;
height: 105px;
margin: 0 auto;
position: relative;
}
.box .head img {
width: 180px;
margin: 21px 0;
}
.div1 {
height: 150px;
background-color: yellowgreen;
margin-top: 107px;
}
.div2 {
height: 150px;
background-color: blue;
}
.div3 {
height: 150px;
background-color: skyblue;
}
.box .head ul {
list-style: none;
right: 20px;
height: 20px;
top: 50%;
margin-top: -10px;
position: absolute;
font-size: 18px;
line-height: 20px;
}
.box .head ul li {
float: left;
border-right: 1px solid #6c6c6c;
}
.box .head ul li span {
color:#6c6c6c;
margin: 0 10px;
}
.box .head ul li a {
text-decoration: none;
}
.box .head ul li:first-child span {
margin-left: 0;
color: #fc475d;
font-weight: 700;
}
.box .head ul li:last-child {
border: none;
}
.box .head ul li:last-child span{
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<a href="#">
<img src="../img/pdd_logo_v2.png" alt="">
</a>
<ul>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span>拼多多商家入驻</span>
</a>
</li>
<li>
<a href="#">
<span>跨境商家入驻</span>
</a>
</li>
<li>
<a href="#">
<span>热点资讯</span>
</a>
</li>
<li>
<a href="#">
<span>社会招聘</span>
</a>
</li>
<li>
<a href="#">
<span>校园招聘</span>
</a>
</li>
<li>
<a href="#">
<span>招采平台</span>
</a>
</li>
<li>
<a href="#">
<span>帮助中心</span>
</a>
</li>
<li>
<a href="#">
<span>举报平台</span>
</a>
</li>
<li>
<a href="#">
<span>分享赚钱</span>
</a>
</li>
</ul>
</div>
</div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
|
定位
不需要定位
固定定位，脱离文档流，固定在窗口的指定位置
在游览器窗口到达指定位置阈值时，显示fixed特性，不脱离文档流
相对元素本身位置进行移动，占据原来的空间
相对于已定位的父元素进行定位
父元素没有定位，则逐级上找
二维码
相当于fixed定位
在里面放个div，使用图片和文字把div撑开就好了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
height: 1400px;
background-color: #18448e;
}
.div2{
height: 1500px;
background-color: #18668e;
}
.box {
width: 162px;
height: 210px;
background-color: white;
position: fixed;
bottom: 150px;
left:-81px;
}
.box:hover {
left: 0;
}
.box .box1 {
margin: 8px;
border: 2px solid #FFEDF1;
padding: 20px 15px 8px;
}
.box .box1 img {
width: 100%;
height: 100%;
display: block;
}
.box .box1 .box2 {
color: #666666;
margin: 6px;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="box">
<div class="box1">
<img src="../img/pdd.png" alt="">
<div class="box2">
<div>微信扫码下载</div>
<div>App专享优惠</div>
</div>
</div>
</div>
</body>
</html>
|
