標籤：利用 流行 set line 自己的 type .net 下載 over
首先是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;}呈現的效果：
利用Bootstrap製作一個流行的網頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
