利用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="data:images/g.jpg"></h1></div><div class="row"><div class="col-md-4 twopages-courses"><a href="#"><img src="data: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="data: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="data: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制作一个流行的网页相关推荐

Python利用PyQt5制作一个获取网络实时数据NBA数据播报GUI
现在NBA联赛也进行到半决赛了,我们怎么样才能以更快的方法获取NBA的数据呢?这里我们就自己来做一个数据播报的程序文章目录制作NBA数据爬虫捋顺思路编写代码 NBAReporter.py NB ...
python如何制作一个工程软件_如何利用python制作一个解压缩软件-Go语言中文社区...
如何利用python制作一个解压缩软件 python实现解压缩的重要模块就是--zipfile,其次是os 安装zipfile模块首先得安装zipfile模块,打开cmd输入一下命令即可安装 pip ...
用计算机怎么做成绩表,利用Excel制作一个简单的学生成绩表.doc
利用Excel制作一个简单的学生成绩表教学设计表学科信息技术授课年级八年级学校教师姓名章节名称初中信息技术八年级上册第7课(第1节)计划学时1学时学习内容分析学习Excel的基础知识, ...
使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节查看作业目录需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具实现思路: 使用history对象中的 forward() 方法和 ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...
如何利用python制作一个解压缩软件
文章目录如何利用python制作一个解压缩软件安装zipfile模块编写核心代码安装tkinter模块整合代码安装pyinstaller模块打包程序为可执行文件打包程序为可执行文件如 ...
利用EasyDL制作一个简单的图片识别小项目
主要是利用EasyDL制作一个简单的傻瓜式猫狗图片识别,利用EasyDL,只需要几步简单的点击即可 *主要的步骤: 1.准备数据 2.训练模型 3.部署 4.H5 * 1.首先创建两个文件夹cat和d ...
利用字典制作一个登录用户账号密码管理系统，实现对账号密码的增删改查等功能
利用字典制作一个登录用户账号密码管理系统,实现对账号密码的增删改查等功能: 当前默认账号密码为:user = {'Wangwu':123456,'Zhangsan':456789,'Lisi':789 ...
pr如何跳到关键帧_PR教程如何利用pr制作一个简单的动画
Adobe Premiere Pro简称PR,是一款非常不错的视频制作编辑软件,如何如何利用pr制作一个简单的动画,这里小编为大家带来了pr动画制作教程--利用pr制作动画,一起来学习一下吧! Ado ...

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

利用Bootstrap制作一个流行的网页相关推荐

最新文章

热门文章