<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/wsj.css">
</head>
<body>
<header>
<div class="container hidden-xs hidden-sm">
<div class="row">
<div class="col-md-2">
<a href="#">
<span class="name">手机微金所</span>
<span class="glyphicon glyphicon-chevron-down down"></span>
</a>
</div>
<div class="col-md-5">
<a href="#" class="tel">4006-89-4006(服务时间:9:00~21:00) 联系在线客服</a>
</div>
<div class="col-md-2">
<a href="#" class="faq">常见问题</a>
<a href="#" class="wealth">财富登录</a>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-danger">免费注册</button>
<button type="button" class="btn btn-link login">登录</button>
</div>
</div>
</div>
</header>
<nav>
<div class="container">
<div class="logo">
<a href="#">
<img src="./images/kl.png" alt="">
<span>微金所</span>
</a>
</div>
<ul class="function clearfix hidden-xs hidden-sm">
<li><a href="#">我要投资</a></li>
<li><a href="#">我要投资</a></li>
<li><a href="#">我要投资</a></li>
<li><a href="#">我要投资</a></li>
<li><a href="#">我要投资</a></li>
<li><a href="#">我要投资</a></li>
</ul>
<div class="person">
<a href="#" class="hidden-xs">个人中心</a>
<span class="glyphicon glyphicon-list visible-xs"></span>
</div>
</div>
</nav>
<article>
<div class="container">
<div class="row">
<a href="#" class="col-md-4 col-sm-6 col-xs-12">
<h4>支持交易保障</h4>
<p>银联支持全程保障支持安全</p>
</a>
<a href="#" class="col-md-4 col-sm-6 col-xs-12">
<h4>支持交易保障</h4>
<p>银联支持全程保障支持安全</p>
</a>
<a href="#" class="col-md-4 col-sm-6 col-xs-12">
<h4>支持交易保障</h4>
<p>银联支持全程保障支持安全</p>
</a>
<a href="#" class="col-md-4 col-sm-6 col-xs-12">
<h4>支持交易保障</h4>
<p>银联支持全程保障支持安全</p>
</a>
<a href="#" class="col-md-4 col-sm-6 col-xs-12">
<h4>支持交易保障</h4>
<p>银联支持全程保障支持安全</p>
</a>
<a href="#" class="col-md-4 col-sm-6 col-xs-12">
<h4>支持交易保障</h4>
<p>银联支持全程保障支持安全</p>
</a>
</div>
</div>
</article>
</body>
</html>
ul{
list-style: none;
padding: 0;
margin: 0;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #000;
}
@media screen and (max-width: 500px) {
body {
width: 500px;
}
}
@media screen and (min-width: 1280px) {
.body {
width: 1280px;
}
}
header .container {
height: 50px;
line-height: 50px;
/* border-bottom: 1px solid #cccccc; */
}
header .container .row>div {
text-align: center;
}
header .login {
color: black;
text-decoration: none;
}
header .container .row>div:nth-child(-n+3) {
border-right: 1px solid #cccccc;
}
nav {
margin-bottom: 20px;
}
nav .container {
height: 85px;
line-height: 85px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #f8f8f8;
}
nav .logo {
margin-right: 16px;
}
nav .logo img{
height: 48px;
margin-top: 16px;
margin-right: 6px;
}
nav .logo span {
font-weight: bolder;
font-style: italic;
font-size: 24px;
}
nav .function,
nav .logo,
nav .function li,
nav .logo img{
float: left;
}
nav .person {
float: right;
}
nav .person>span {
margin-top: 30px;
font-size: 24px;
color: #777777;
}
nav .function a,
nav .person a {
color: #777777;
}
nav .function a {
display: block;
height: 85px;
padding: 0 15px;
}
nav .function a:hover {
border-bottom: 3px solid #e92322;
}
article a:hover {
color: #e92322;
}