直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.fl {
float: left;
}
.black {
100%;
height: 26px;
background-color: rgb(51, 51, 51);
}
.grey {
100%;
height: 38px;
background-color: #f8f8f8;
border-bottom: 1px solid grey;
}
.arrow1 {
0;
height: 0;
border- 4px;
border-color: #999 transparent transparent transparent;
border-style: solid;
border-bottom: none;
font-size: 0; /* 必须设置 */
display: inline-block;
/*
本身是inline元素，那么对齐的是文本的中线
设置为inline-block，那么对齐的就是文本的基线，而基线是英文字母x的下端沿。
设置为inline-block, 可以使用margin-top和margin-bottom了。
*/
/*
vertical-align适用于inline和inline-block和table-cell元素
*/
vertical-align: middle;
}
.outer1 {
50px;
height: 26px;
padding: 0 13px 0 20px;
font-size: 12px;
text-align: left;
line-height: 26px;
/*
line-height: 100%;是针对12px;
line-height: 1.5;也是针对12px;
line-height: 26px; 文字居中了;
line-height: 1.5em; 也是相对于12px;
*/
}
.a {
color: #fff;
text-decoration: none;
}
.outer2 {
height: 39px;
line-height: 39px;
padding: 0 14px;
position: relative;
}
.outer2 a {
color: #666;
font-size: 12px;
float: left; /*为什么这里一定要浮动呢？如果不浮动的画，就要为outer2设置宽度将em包括进去, 但是我还是不知道*/
}
.arrow2 {
height: 39px;
float: left; /* 一定要浮动 */
position: relative;
margin: 0 0 0 4px;
6px;
cursor: pointer;
}
/*采用的绝对定位*/
.arrow2 span {
position: absolute;
top: 18px;
height: 0;
0;
border- 3px;
border-color: #404040 transparent transparent transparent;
border-style: solid;
}
.jd {
100%;
height: 30px;
line-height: 30px;
background-color: #e3e4e5;
font-size: 12px;
}
.outer3 {
height: 28px;
line-height: 28px;
padding-left: 7px;
padding-right: 20px;
position: relative;
}
.outer3 a {
color: #999;
}
.arrow3 {
position: absolute; /*采用绝对定位*/
right: 5px;
top: 13px;
height: 0;
0;
border- 3px;
border-color: #404040 transparent transparent transparent;
border-style: solid;
font-size: 0;
}
</style>
</head>
<body>
<div class="black clearfix">
<div class="outer1 fl">
<a class="a" href="#">
唯品会
<em class="arrow1"></em>
</a>
</div>
</div>
<div class="grey clearfix">
<div class="outer2 fl">
<a class="a" href="#">淘宝</a>
<em class="arrow2">
<span></span>
</em>
</div>
</div>
<div class="jd clearfix">
<div class="outer3 fl">
<a class="a" href="#">我的京东</a>
<em class="arrow3"></em>
</div>
</div>
</body>
</html>