目标网站:http://www.ghostchina.com/
网站 Logo 添加
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body class="home-template">
<header class="main-header"> <!--创建头部-->
<div class="container"> <!--头部存放容器-->
<div class="row"> <!--在容器使用栅格系统-->
<div class="col-md-12"><!--头部只包含一个内容,故应占整个部分-->
<a href="branding" href="http://www.jikexueyuan.com title="Ghos开源博客">
<img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png">
<h2 class="text-hide">现在你看到的是BootStrap实战实例</h2>
</a>
</div>
</div>
</div>
</header>
对应的 app.css 文件内容
.main-header{
text-align: center;
padding: 42px 0;
background: #ffffff;
}
.main-header .branding{
font-size: 3.5em;
color: #303030;
}
a{
color: #e67e22;
outline: none;
text-decoration: none;
}
.main-header .branding img{
max-width: 100%;
}
a:active,a:focus,a img{
outline: none;
}