利用Bootstrap制作一个流行的网页

最新推荐文章于 2023-06-11 12:36:48 发布

bboyjoe

最新推荐文章于 2023-06-11 12:36:48 发布

阅读量1.1w

点赞数 12

分类专栏： bootstrap 文章标签： bootstrap html5 前端响应式

本文链接：https://blog.csdn.net/bboyjoe/article/details/47364467

版权

bootstrap 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

首先是html承载内容：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Bootstrap实战</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="side-nav" role="navigation">
    <ul class="nav-side-nav">
        <li><a class="tooltip-side-nav" href="#pageone"><span class="glyphicon glyphicon-home"></span> 第一屏</a> </li>
        <li><a class="tooltip-side-nav" href="#pagetwo"><span class="glyphicon glyphicon-headphones"></span> 第二屏</a> </li>
        <li><a class="tooltip-side-nav" href="#pagethree"><span class="glyphicon glyphicon-plane"> 第三屏</span></a> </li>
    </ul>
</div>

<div class="onepage" id="pageone">
    <div class="onepage-bg" id="onepagebg"></div>
    <div class="container">
        <div class="row">
            <div class="title-text">
                <div class="col-md-12 headfontsize">
                    <h1 class="headh1content">
                        饭盒儿<small> Fun Here</small><br>
                    </h1>
                    <h3>打开你身边不一样的世界</h3>
                    <p class="headtext">音乐、图片、视屏、想你所想，爱你所爱</p>
                    <p class="btn-app-store">
                        <a class="btn btn-success btn-lg" href="#">立即下载，开始体验</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="twopage" id="pagetwo">
    <div class="twopage-text">
        <h1 class="twopage-text-h1">
            这里有你想要的一切<img src="images/g.jpg">
        </h1>
    </div>
    <div class="row">
        <div class="col-md-4 twopages-courses">
            <a href="#">
                <img src="images/2.jpg"/>
                <div class="classicon">
                    <h3>音乐</h3>
                    <h1><strong>与你的灵魂共振</strong></h1>
                </div>
            </a>
        </div>
        <div class="col-md-4 twopages-courses">
            <a href="#">
                <img src="images/3.jpg"/>
                <div class="classicon">
                    <h3>图片</h3>
                    <h1><strong>记录那些美好瞬间</strong></h1>
                </div>
            </a>
        </div>
        <div class="col-md-4 twopages-courses">
            <a href="#">
                <img src="images/4.jpg"/>
                <div class="classicon">
                    <h3>视频</h3>
                    <h1><strong>开始自己的记录片吧</strong></h1>
                </div>
            </a>
        </div>
    </div>
    <div class="twopagebtn">
        <a id="twopage-easy" href="#" class="btn btn-success btn-lg">现在就开始吧</a>
    </div>
</div>

<div class="threepage" id="pagethree">
    <div class="threepage-bg" id="threepagebg">
        <div class="threepagecontent">
            <div class="threepagetext">
                <h1>饭盒儿为什么这么好玩</h1>
                <p>一张图片,一曲音乐,一段视频,构成了自己命名的星球；<br/>
                    安静地记录自己平凡而精彩的生活，在干净的世界里和自己的灵魂赤裸相见。</p>
            </div>
            <a href="#" class="btn btn-success btn-lg threepagecontentbtn">开始你的Fun here之旅</a>
        </div>
    </div>
</div>
</body>
</html>

接下来CSS设置样式：

/*全局样式*/
h1,h3,p,a,button{
    font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB";
}

/*导航*/
.side-nav{
    position: fixed;
    top:45%;
    right:20px;
    z-index: 1;
}
.side-nav ul.nav-side-nav{
    text-align: center;
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.side-nav ul.nav-side-nav >li{
    display: block;
    line-height: 1.5em;
    margin: 0;
    padding: 8px 0;
}
.side-nav ul.nav-side-nav >li >a{
    display: block;
    width:80px;
    height: 25px;
    font-size:14px;
}
.side-nav ul.nav-side-nav >li >a:hover{
    color:#1eb450;
}
/*第一屏*/
.onepage{
    height: 750px;
}
.onepage-bg{
    height: 760px;
    width:100%;
    position: absolute;
    background-position: center center;
    background-size: cover;
}
#onepagebg{
    background-image: url("../images/1.jpg");
}

.title-text{
    margin-left:50px;
}
.headh1content{
    margin-top: 150px;
    line-height: 75px;
}

.headfontsize h1{
    font-size: 50pt;
    color: #fff;
}

.headfontsize h3,.headfontsize p{
    color: #fff;
}

.headfontsize .headtext{
    color: #d1e973;
    font-size: 12pt;
}
.btn-app-store{
    margin-top:15px;
}
/*第二屏*/
.twopage{
    padding:2px 0 0 2px;
    height: auto;
    background-image: url("../images/10.jpg");
    position: relative;
}
.twopage-text{
    width:100%;
    text-align: center;
    margin-bottom: 20px;
}
.twopage-text-h1{
    margin-left: 120px;
    letter-spacing: 2px;
    margin-top:20px;
    margin-bottom: 0;
    padding: 20px 0 0 0;
}
.twopage-text-h1 img{
    width:120px;
    margin-top: -20px;
}
.twopage .row{
    margin-left: 0px;
    margin-right: 0px;
}
.twopages-courses{
    float: left;
    background: #fff;
    padding: 0 2px 2px 0;
    position: relative;

}
.twopages-courses >a{
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;
    position: relative;
}
.twopages-courses >a >img{
    width:100%;
    height: 260px;
}
.classicon{
    width:100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    color:#fff;
    opacity: 0;
}
.classicon h3{
    margin-top: 120px;
    color: #d1e973;
}
.classicon h1{
    color:#fff5e1;
}
.classicon:hover{
    background: #1eb450;
    opacity: 0.9;
    transition: opactiy 0.5s;
    -webkit-transition:opactiy 0.5s;
    -o-transition: opactiy 0.5s;
    -moz-transition: opactiy 0.5s;
    -ms-transition: opactiy 0.5s;
}
.twopagebtn{
    width:100%;
    margin:0% auto;
    text-align: center;
}
.twopagebtn .btn-lg{
    font-size: 25px;
}
#twopage-easy{
    margin: 30px 0;
}

/*第三屏*/
.threepage{
    position: absolute;
    width: 100%;
    height: 760px;
}
.threepage-bg{
    position: absolute;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#threepagebg{
    background-image: url("../images/10.jpg");
}
.threepagecontent{
    width:100%;
    margin: 0 auto;
    text-align: center;
}
.threepagetext{
    margin-top: 60px;
    color: #1eb450;
}
.threepagetext p{
    margin-top: 20px;
    font-size: 12pt;
    line-height: 30px;
}
.threepagecontentbtn{
    margin-top: 200px;
    font-size: 25px;
}

呈现的效果：