Bootstrap[0]

使用bootstrap要先引入jquery

引入头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccdragon</title>
    <link rel="stylesheet" href="./css/bootstrap.css">

</head>
<body>


<script src="jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myjs/anime-master/lib/anime.js"></script>
</body>
</html>

html构建框架、添加元素

css/classname添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width,initial-scale=1">
    <title>ccdragon</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css">

</head>
<body>

<!--头部-->
<header id="cc_header">
    <div class="top-bar hidden-xs hidden-sm text-center text-muted">
    <div class="container">
        <div class="row">
            <div class="top-bar-1 col-md-3">
                <a href="">
                    <i class="icon-phone"></i>
                    <span>Some pic here</span>
                    <span class="caret"></span>
                    <img src="./img/rem_yokari.jpg" alt="alt1" width="130px">
                </a>
            </div>
            <div class="top-bar-2 col-md-6
">
                <i class="phone"></i>
                <span>Contact us at 8848110110</span>
            </div>
            <div class="top-bar-3 col-md-3">
                <a class="btn btn-register" href="#" role="button">注册</a>
                <a class="btn btn-default" href="#" role="button">登陆</a>
            </div>
        </div>

    </div>






    </div>


</header>


<!--/头部-->
<!--轮播-->
<header id="cc_carousel">This is carousel</header>


<!--/轮播-->
<!--关于-->
<header id="cc_about">This is about</header>


<!--/关于-->
<!--产品-->
<header id="cc_product">This is product</header>


<!--/产品-->
<!--热门-->
<header id="cc_hot">This is hot</header>


<!--/热门-->
<!--尾部-->
<header id="cc_footer">This is footer</header>


<!--/尾部-->



<script src="jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myjs/anime-master/lib/anime.js"></script>
</body>
</html>
/********通用样式********/
body{
    /*font-size: 13px;*/
    font-family: "Fira Code Light";
    color: #000;
}

.btn-register {
    color: #ffffff;
    background-color: #66CCFF;
    border-color: #FFFFFF;
}

.btn-register:hover,
.btn-register:focus,
.btn-register:active,
.btn-register.active,
.open .dropdown-toggle.btn-register {
    color: #ffffff;
    background-color: #3E93BD;
    border-color: #FFFFFF;
}

.btn-register:active,
.btn-register.active,
.open .dropdown-toggle.btn-register {
    background-image: none;
}

.btn-register.disabled,
.btn-register[disabled],
fieldset[disabled] .btn-register,
.btn-register.disabled:hover,
.btn-register[disabled]:hover,
fieldset[disabled] .btn-register:hover,
.btn-register.disabled:focus,
.btn-register[disabled]:focus,
fieldset[disabled] .btn-register:focus,
.btn-register.disabled:active,
.btn-register[disabled]:active,
fieldset[disabled] .btn-register:active,
.btn-register.disabled.active,
.btn-register[disabled].active,
fieldset[disabled] .btn-register.active {
    background-color: #66CCFF;
    border-color: #FFFFFF;
}

.btn-register .badge {
    color: #66CCFF;
    background-color: #ffffff;
}
/********通用样式********/

/********头部样式********/
#cc_header{

}
#cc_header .top-bar{
    height: 40px;
    line-height: 39px;
    border-bottom: 1px solid #e0e0e0;
}
#cc_header .top-bar .top-bar-1 a img{
    display: none;
}
#cc_header .top-bar .top-bar-1 a:hover img{
    display: block;
    position: absolute;
    margin-top:-10px;
    margin-left: -65px;
    left:50%;
}
#cc_header .top-bar .top-bar-1 a{
    position: relative;
}
#cc_header .top-bar .container .row>div+div{
    border-left: #e0e0e0 1px solid;

}
/********头部样式********/

发表评论

电子邮件地址不会被公开。 必填项已用*标注