BootStrap实战二之网站 Logo 添加

来源：互联网发布：mac炉石传说无法运行编辑：程序博客网时间：2024/05/21 22:36

目标网站：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;}

0 0