为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Bootstrap 学习展示与交流

Bootstrap 学习展示与交流

标签：
Html5 Bootstrap

Hello，大家好。好久没写了，最近心情不错，在2016年的最后一天脱单了。再也不是一个孤单的代码狗了。女朋友最近换了个李宇春式的发型，走在路上总感觉像兄弟，而不是情侣。（笑抽中）
最近敲代码略带拖延，还不是很适应用sublime text 3，编写网页。如有不足和错误之处，请大家多多批评指正，大家一起学习交友，代码之路你我一起奋斗，拒绝孤独感。
同为初学者建议：多去模仿别人的网页，重点在于看清结构，还有一些命名方式，相信很多人都有这种感受：当要自己编写某一部分代码的时候，就会为如何命名犯困（哈哈）。加油！！！
好了，不说废话，直接上码》》》
第一块式关于分类的学习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Learning of Pagination</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <!-- 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
    <header>    I am header.</header>
    <div class="container">
        <div class="content">
            <div class="row">
                <div class="col-md-4">
                    <h1>Primary Pagination</h1>
                    <ul class="pagination">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
                    <h1>Active Pagination</h1>
                    <p>在其中的一个li中添加类：active</p>
                    <ul class="pagination">
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                    <h1>Disabled Pagination</h1>
                    <p>使分页无法使用</p>
                    <ul class="pagination">
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li class="disabled"><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h1>大分页</h1>
                    <ul class="pagination pagination-lg">
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                    <hr style="border-top: 1px dashed #F44333">
                    <h1>小分页</h1>
                    <ul class="pagination pagination-sm">
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h1>面包屑导航 breadcrumb</h1>
                    <ul class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home Page</a></li>
                        <li><a href="#">Home Page Viewers</a></li>
                        <li class="active">Vacation</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<footer>I am footer.</footer>
</body>
</html>

第二块代码关于 badges 和 Label 的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Badges and Label</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <!-- 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

</head>
<body>
    <div class="container">
        <h1>learning of Badges</h1>
        <a href="#">News <span class="badge">5</span></a>
        <a href="#">Comments <span class="badge">10</span></a>
        <a href="#">Updates <span class="badge">5</span></a>
        <hr style="width: 250px; border-top: 1px dashed #f44333">
        <button type="button" class="btn btn-primary" id="button">Recent News<span class="badge" style="margin-left: 5px;"> 7</span></button>
    </div>
    <h1>Label 类的练习</h1>
    <div class="container">
        <h1>Hello<span class="label label-default">News</span></h1>
        <h2>Hello<span class="label label-info">News</span></h2>
        <h3>Hello<span class="label label-success">News</span></h3>
        <h4>Hello<span class="label label-danger">News</span></h4>
        <h5>Hello<span class="label label-primary">News</span></h5>
        <h6>Hello<span class="label label-warning">News</span></h6>
        <h3>Ice Cream<span class="label label-default">YES!</span></h3>
    </div>
</body>
</html>

第三块代码是关于 progressbar的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ProgressBar Learning</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <!-- 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h2>Primary progressBar</h2>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                    aria-valuemin="0" aria-valuemax="100" style="width: 70%;" 
                    >70%</div>
                </div>
            </div>
            <div class="col-md-4">
                <h2>隐藏进度参数的进度条</h2>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="50"
                    aria-valuemin="0" aria-valuemax="70" style="width: 50%" 
                    >
                    <span class="sr-only">50% Complete</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h2>多色彩进度条</h2>
            <div class="progress">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                    40%(primary)
                </div>
            </div>
            <hr style="width: 250px;border-top: 1px dashed #F44333">
            <div class="progress">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
                    50%(info)
                </div>
            </div>
            <hr style="width: 250px;border-top: 1px dashed #F44333">
            <div class="progress">
                <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    60%(warning)
                </div>
            </div>
            <hr style="width: 250px;border-top: 1px dashed #F44333">
            <div class="progress">
                <div class="progress-bar progress-bar-danger" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
                    70%(danger)
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="content content-progressbar">
            <div class="row">
                <div class="col-sm-4 col-md-4">
                    <h2>斑马线进度条</h2>
                    <p>只要给类加上 progress-bar-striped，这个写法和table添加斑马线极其相似</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped " role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
                            <span class="sr-only">50%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped " role="progressbar"  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                            <span class="sr-only">70%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning progress-bar-striped " role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                            <span class="sr-only">80%</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4">
                    <h2>动态斑马线</h2> 
                    <p>只要给类加上active即可</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                            <span class="sr-only">80%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped active " role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
                            <span class="sr-only">50%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar"  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                            <span class="sr-only">70%</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4">
                    <h2>创建一个混合的进度条</h2>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-success active" style="width: 40%"></div>
                        <div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 20%"></div>
                        <div class="progress-bar progress-bar-striped progress-bar-danger" style="width: 10%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="content-review">
            <h2>复习 进度条</h2>
            <div class="progress">
                <div class="progress-bar progress-bar-primary progress-bar-striped active" aira-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
                    <span class="sr-only">50% Complete</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-success active" style="width: 50%" ></div>
                <div class="progress-bar progress-bar-striped progress-bar-info active" style="width: 20%"></div>
                <div class="progress-bar progress-bar-striped progress-bar-warning active" style="width: 10%"></div>
            </div>
        </div>
    </div>
</body>
</html>

最后一块是一个实操，模仿某个知名网页的footer，也是我学bootstrap后，想要做的自己创建的公益群官网。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Footer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <!-- 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： -->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<style>
a{
    color: #555555;
    text-decoration: none;
}

.main-footer{
    background: #202020;
    padding: 35px 0 0;
    color: #959595;
}
.widget{
    padding: 0px 30px;
}
.widget .title{
    font-size: 1.5em;
    color: #fff;
    margin-top: 0;
    padding-bottom: 7px;
    border-bottom: 1px solid #959595 ;
    margin-bottom: 21px;
    position: relative;
}
.widget .title:after{
    content: "";
    width: 90px;
    height: 1px;
    background: #f4645f;
    position: absolute;
    left: 0;
    bottom: -1px;
}
.recent_sigle_post {
    margin: 20px  0;
    padding-bottom: 20px;
    border-bottom: 1px dashed #303030;  /*添加一条虚线*/
}
.recent_sigle_post .date{
    margin-top: 8px;
}

.widget .tag-clound a{
    /*border: 1px solid grey;
    display: inline-block;
    color: #fff;
    margin: 2px;
    padding: 3px 8px;*/
    border: 1px solid #303030;
    padding: 2px 7px;
    color: #959595;
    line-height: 1.5em;
    display: inline-block;
    margin: 0 7px 7px 0;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

}
.widget .friend-link a{
    border: none;
}
.friend-link hr{
    border: 0;
    border-top: 1px dashed #303030;
}
.widget .tag-clound a:hover{
    background:#f4645f;
    color: #fff;
    text-decoration: none;
}
.copyright{
    background: #111;
    font-size: 13px;
    text-align: center;
    color: #555555;
    padding-top: 28px;
    padding-bottom: 28px;
    border-top: 1px solid #303030;
}
.copyright span a{
    text-decoration: none;
}

</style>
</head>
<body>
    <header></header>
    <article></article>
    <footer class="main-footer">
        <div class="container">
            <div class="row">
                <div class=" col-sm-4 col-md-4 col-lg-4">
                    <div class="widget">
                        <h4 class="title">
                            最新文章
                        </h4>
                        <div class="content recent-content">
                            <div class="recent_sigle_post">
                                <a href="#">友邦公益成立啦,如果可以，我是到付件数量的房间辣世界东方拉斯加分了发上来的空间分离圣诞节福利</a>
                                <div class="date">2017.01.02</div>
                            </div>
                            <div class="recent_sigle_post">
                                <a href="#">友邦公益成立啦</a>
                                <div class="date">2017.01.02</div>
                            </div>
                            <div class="recent_sigle_post">
                                <a href="#">友邦公益成立啦</a>
                                <div class="date">2017.01.02</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="widget">
                        <h4 class="title">
                            标签云
                        </h4>
                        <div class="content tag-clound">
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang</a>
                            <a href="#">xiong</a>
                            <a href="#">Huang</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">xiong</a>
                            <a href="#">Test</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang xiong</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="widget">
                        <h4 class="title">
                            合作伙伴
                        </h4>
                        <div class="content tag-clound friend-link">
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <hr>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <hr>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <span>
                Copyright@ 
                <a href="#">友邦公益</a>   
            </span>
            <span style="margin: 0 20px">|</span>
            <span>  
                粤  我是<a href="#">潮人</a>
            </span>
            <span style="margin: 0 20px">|</span>
            <span>
                邮箱 
                <a href="#">rj14108@163.com</a>
            </span>
        </div>
    </footer>
</body>
</html>
点击查看更多内容
发表于 2017.01.03 20:15， 共 4325 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
8人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

6亿少女的梦

学生
手记
篇
粉丝
41
获赞与收藏
468

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消