利用Bootstrap制作一个流行的网页
首先是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制作一个流行的网页的更多相关文章
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...
- 利用DreamweaverCS5制作一个含有动态标题的教程
DreamweaverCS5怎么制作一个含有动态标题?做一个网页就先要做一个标题,一个好标题会让网页让人印象深刻,有动态的标题会让网页更生动,下面我就介绍一下怎么制作一个含有动态的标题 做一个网页 ...
- 利用XPT2046制作一个电位器AD转换装置
XPT2046是一款四线制电阻触摸屏控制芯片,内含12位分辨率125KHz转换速率逐步逼近型A/D转换器,支持从1.5V到5.25V的低电压I/O接口. 所谓逐步逼近型,就是输入一个模拟量,其与100 ...
- 利用bootstrap制作滚动监听
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标. 在这里,需要引入三个文件:bootstrap.min.css jquery-3.3.1.j ...
- 利用Qt制作一个helloworld
使用QT创建第一个 工程: 1.打开应用程序: 2.单击画面中间偏上的 New Project按钮.[要学习使用啊~,传说它的跨平台行很好,QQ就是用它编辑的.] 3.直接点击右下角的选择 按钮. 4 ...
- 利用Python制作一个只属于和她的聊天器，再也不用担心隐私泄露啦！
------------恢复内容开始------------ 是否担心微信的数据流会被监视?是否担心你和ta聊天的小秘密会被保存到某个数据库里?没关系,现在我们可以用Python做一个只属于你和ta的 ...
- 一个流行的网页动画JS库
animejs https://animejs.com/ Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library wi ...
- 利用docker制作一个带有redis软件的镜像,供其他人使用
1. 宿主机在etc/apt/下创建一个haha的文件夹 2.宿主机将haha文件夹映射到容器的虚拟系统中etc/apt/ 3. 此时,可以在宿主机和容器虚拟机中同步创建和删除文件 4. 将宿主机中的 ...
- 利用HTML制作一个简单的界面（工具HBuilder）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"><!--标题,里面填写 ...
随机推荐
- [ 手记 ] 联想rd650服务器整列及系统安装
联想 RD650服务器 磁盘阵列:http://wenku.baidu.com/view/b364c2db5f0e7cd185253644.html?from=search 该服务器安装系统需要BIO ...
- 推荐下载App，如果本地安装则直接打开本地App（Android/IOS）
推荐下载App,如果本地安装则直接打开本地App(Android/IOS) - 纵观现在每家移动网站,打开首页的时候,都有各种各样的形式来提示你下载自身的移动App(Android/IOS),这是做移 ...
- pandas求五日线并画图
import pandas as pd import numpy as np import matplotlib.pyplot as plt stock_data = pd.read_csv('000 ...
- Selenium2+python自动化21-TXT数据参数化【转载】
前言 在17篇我们讲了excel数据的参数化,有人问了txt数据的参数化该怎么办呢,下面小编为你带你txt数据参数化的讲解 一.以百度搜索为例,自动搜索五次不同的关键字.输入的数据不同从而引 ...
- Activiti 6.0 入门篇
从Activiti网站下载Activiti UI WAR文件(或百度云) 将下载的activiti-app.war复制到Tomcat的webapps目录. 启动Tomcat 打开浏览器并转到 http ...
- win7或win2008系统中，出现【已停止工作,联机检查解决方案并关闭该程序,关闭程序】解决方法！
win7或win2008系统中,出现[已停止工作,联机检查解决方案并关闭该程序,关闭程序]解决方法! 经过摸索,点击[控制面板]-[操作中心]-[更改操作中心设置]-[问题报告设置]-[从不检查解决方 ...
- hdu6156
hdu6156 题意 求 \([2, 36]\) 进制下,给定区间内的数是回文数的个数.每存在一个回文数,答案加上该回文数的进制. 分析 10进制下回文数是 数位DP 很常见的问题,这道题只需要把在转 ...
- 6、Flask实战第6天：视图函数Response返回值
视图函数的返回值会被自动转换为一个响应对象,Flask的转换逻辑如下: 如果返回的是一个合法的响应对象,则直接返回 可以使用make_response函数来创建Response对象,这个方法可以设置额 ...
- 传统路径导出 VS 直接路径导出(oracle exp direct=y)
Oracle 传统的Export与Import依旧被保留到11g,而且9i与10g有很多依旧使用Export与Import方式进行备份与恢复的企业.从Oracle 7.3开始,传统的exp导出程序提供 ...
- 【二分法】【尺取法】bzoj2348 [Baltic 2011]Plagiarism
一开始以为死于精度……调了半天发现死于long long…… 一.二分法: #include<cstdio> #include<cstring> #include<alg ...