制作宅基腐主页 && 制作个人简历--材料:BootStrap
- 宅基腐主页
主页分为四大板块:导航栏,轮播图,主页内容,相关信息。
导航栏:<nav>标签,class="navbar",navbar-inverse为反色,navbar-fixed-top为始终居顶。
在nav下包含div,并且div的class=container,container下有naver-header与navbar-right。
响应式折叠插件:collapse,主要注意设置如下。
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapsr"
aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-right " id="navbarCollapsr">
</div>
轮播图:最外层包含:carousel slide,使用一个无序序列<ol>来排列图片,ol的class设置为carousel-indicators。在同级用div装载图片,外层用carousel-inner内层 用item。左右翻页功能如下。
<!--左右翻页-->
<a href="#mygirlsCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"/>
</a>
<a href="#mygirlsCarousel" data-slide="next"class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"/>
</a>
如果要设置秒数轮播则使用js
$(document).ready(function(){
$('#mygirlsCarousel').carousel({
interval :2000,
});
});
主页内容:主要使用media组件,外边用行组件row包含。如下
<div class="row" style="text-align: center;">
<div class="col-md-6">
<div class="media">
<div class="media-left">
<a href="#"><img class="imtab2" src="../img/img5.jpg"></a>
</div>
<div class="media-right">
<h4 class="media-heading">现充</h4>
<p1>现充(リア充)指是在现实世界中生活得充实的人们。</p1>
</div>
</div>
</div>
相关信息:与一般无异。
网页整体效果如下
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动漫妹子</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ });
</script>
<link rel="stylesheet" href="../css/mystyle.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header logo">
<a href="" class="navbar-brand">动漫老婆</a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapsr"
aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <div class="collapse navbar-collapse navbar-right " id="navbarCollapsr">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" ><span class="glyphicon glyphicon-home"></span> 后宫</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list"></span> 中二病</a></li>
<li><a href="#"><span class="glyphicon glyphicon-fire"></span> 抖s</a></li>
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 搞基</a></li>
</ul>
</div>
</div>
</nav>
<!-- 轮播部分-->
<div id="mygirlsCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#mygirlsCarousel" data-slide-to="0" class="active"></li>
<li data-target="#mygirlsCarousel" data-slide-to="1"></li>
<li data-target="#mygirlsCarousel" data-slide-to="2"></li>
<li data-target="#mygirlsCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background: #330033;">
<img src="../img/img1.jpg" alt="第一张">
</div>
<div class="item" style="background:#990000;">
<img src="../img/img2.jpg" alt="第二张" >
</div>
<div class="item" style="background:#e1ffe0;">
<img src="../img/img3.jpg" alt="第三张">
</div>
<div class="item" style="background:#F2F2F2;">
<img src="../img/img4.jpg" alt="第四张">
</div>
<!--左右翻页-->
<a href="#mygirlsCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"/>
</a>
<a href="#mygirlsCarousel" data-slide="next"class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"/>
</a>
</div>
</div>
<!--网页内容-->
<div class="tab1">
<div class="container">
<h2>为什么世界这么美好还要作死</h2>
<p>不作死的话,活着还有什么意义 <img class="imtab1" src="../img/img7.jpg"></p>
<div class="row" style="text-align: center;">
<div class="col-md-6">
<div class="media">
<div class="media-left">
<a href="#"><img class="imtab2" src="../img/img5.jpg"></a>
</div>
<div class="media-right">
<h4 class="media-heading">现充</h4>
<p1>现充(リア充)指是在现实世界中生活得充实的人们。</p1>
</div>
</div>
</div> <div class="col-md-6">
<div class="media">
<div class="media-left">
<a href="#"><img class="imtab2" src="../img/img6.jpg"></a>
</div>
<div class="media-right">
<h4 class="media-heading">死宅</h4>
<p1>死宅这词是对很宅很宅的宅男或宅女的谑称,形容一个人宅到无可救药。。</p1>
</div>
</div>
</div> </div>
</div>
</div>
<div class="tab2">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="../img/test.gif" class="img-responsive center-block">
</div>
<div class="col-md-6">
<h3>比如说</h3>
<p>小妹妹,叔叔帮你检查身体</p>
<p>但是人家并不想理你</p>
</div>
</div>
</div>
</div>
<div class="tab3">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<h3>真相</h3>
<p>同性才是真爱</p>
</div>
<div class="col-md-6 col-sm-6">
<img src="../img/test2.gif" class="img-responsive center-block">
</div>
</div>
</div>
</div>
<!--内容底部-->
<div id="footer" >
<div class="container" style="text-align: center">
<p>自制娱乐 | 学习交流 | bootstrap熟悉</p>
<p>详情咨询中二病神经病院</p>
</div>
</div>
</body>
</html>
所用css
@CHARSET "UTF-8"; #mygirlsCarousel{
margin: 50px 0 0 0;
}
.logo{
padding:;
}
#navbarCollapsr ul{
margin-top:;
} .carousel-inner img {
margin: 0 auto;
}
.tab1 h2{
text-align: center;
}
.tab1 p{
text-align: center;
text-decoration: line-through;
}
.imtab1{
height: 10%;
width: 10%;
}
.imtab2{
height: 60%;
width: 60%;
margin-bottom: 10px;
}
#footer {
background: #e6e6e6;
padding:20px;
color: #b7b7b7;
border-top: solid;
}
.tab2{
background: #e4f2ef;
}
.tab3{
background: #bbf2e3;
}
.tab3 .row{
text-align: center;
}
.tab3 img{
width:80%;
}
- 个人简历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/mystyle.css" rel="stylesheet">
<title>个人简历</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#leadBar"
aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="leadBar">
<ul class="navbar nav navbar-nav">
<li><a href="site.html" class="glyphicon glyphicon-home" ></a></li>
<li><a href="#info">基本信息</a></li>
<li><a href="">职业技能</a></li>
<li><a href="">项目展示</a></li>
<li><a href="">请联系我</a></li>
</ul>
</div> </div>
</nav>
<div class="page-header">
<h1>个人简历</h1>
</div>
<div class="divContent container">
<div class="row">
<h2 class="lead">基本信息</h2>
<div class="col-sm-3">
<blockquote>
<h2>某某</h2>
<footer>java后端工程师</footer>
</blockquote>
<div class="row text-center">
<img src="../img/head.jpg" alt="boy" class="img-responsive img-circle img-thumbnail">
</div>
<div class="row text-center">
<div class="col-sm-4">
<h2><abbr title="n年工作经验">n</abbr></h2>
</div>
<div class="col-sm-4">
<h2><abbr title="m个大型网站项目">m</abbr></h2>
</div>
<div class="col-sm-4">
<h2><abbr title="k种技能">k</abbr></h2>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="jumbotron">
<h2>自我评价</h2>
<hr>
<p2>n年工作经验</p2>
<br>
<p2>m个大型网站项目</p2>
<br>
<p2>k种技能</p2>
<div class="text-right">
<a href="http://www.cnblogs.com/chentingk/"><button class="btn-primary">个人博客</button></a>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<tr>
<td>姓名</td>
<td>YYY</td>
<td>年龄</td>
<td>25</td>
</tr>
<tr>
<td>学校</td>
<td>XX大学</td>
<td>学历</td>
<td>本科</td>
</tr>
<tr>
<td>专业</td>
<td>计算机科学</td>
<td>学制</td>
<td>全日制</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<h2 id="skill" class="lead">职业技能</h2> <p>
<span class="label label-success">java</span>
<span class="label label-success">ssh</span>
</p>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 80%;" >
<span>精通</span>
</div>
</div> <p>
<span class="label label-info">javascript</span>
<span class="label label-info">html/css</span>
</p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 70%;" >
<span>熟悉</span>
</div>
</div> <p>
<span class="label label-warning">linux</span>
<span class="label label-warning">数据结构/算法</span>
</p>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 80%;" >
<span>熟悉</span>
</div>
</div>
</div>
<div class="row">
<h2 class="lead">项目展示</h2>
<div id="mygirlsCarousel" class="carousel slide" style="height: 406px;width: 650px">
<ol class="carousel-indicators">
<li data-target="#mygirlsCarousel" data-slide-to="0" class="active"></li>
<li data-target="#mygirlsCarousel" data-slide-to="1"></li>
<li data-target="#mygirlsCarousel" data-slide-to="2"></li>
<li data-target="#mygirlsCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../img/img1.jpg" alt="第一张" class="img-responsive">
</div>
<div class="item">
<img src="../img/img2.jpg" alt="第二张" class="img-responsive">
</div>
<div class="item">
<img src="../img/img3.jpg" alt="第三张" class="img-responsive">
</div>
<div class="item">
<img src="../img/img4.jpg" alt="第四张" class="img-responsive">
</div>
<!--左右翻页-->
<a href="#mygirlsCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"/>
</a>
<a href="#mygirlsCarousel" data-slide="next"class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"/>
</a>
</div>
</div>
</div>
<div class="row">
<h2 class="lead">请联系我</h2>
<div class="panel panel-default">
<div class="panel-heading">如果你感兴趣</div>
<div class="panel-body">
<form action="" method="post">
<label class="control-label" for="email">Email</label>
<input type="email" class="form-control" id="email"/>
<br/>
<div class="btn-group pull-right">
<button type="submit" class="btn btn-success">请联系我</button>
<button type="reset" class="btn btn-danger">重置</button>
</div>
<div class="clearfix"></div>
</form> </div>
</div>
</div>
</div> </body>
</html>
header,footer,nav,div,section,aside,article,p{
border: 1px dotted #f0f0f0;
}
.divContent{
min-height: 350px;
}
制作宅基腐主页 && 制作个人简历--材料:BootStrap的更多相关文章
- PPT制作教程:如何制作ppt
PowerPoint(PPT)是专门用于制作演示文稿(俗称幻灯片).广泛运用于各种会议.产品演示.学校教学等.学会如何制作ppt,成为提升工作效 率的好帮手.PPT包含有很多的功能,我们可以根据个人喜 ...
- 【制作镜像】BCEC制作镜像
如要制作的新镜像已存在标准版本镜像,即linux发行版本相同(此处指CentOS6.5 64位),可利用BCEC制作. 在BCEC创建centos6.5系统的可联外网的虚机,ssh到此虚机,用yum方 ...
- 实验三 平面广告制作工具Photoshop基础--制作LOGO
实验三 平面广告制作工具Photoshop基础--制作LOGO [实验目的] ⑴.熟悉Photoshop的界面 ⑵.能利用photoshop处理简单的图像 [实验条件] ⑴.个人计算机一台 ⑵.个人 ...
- [Interview] 程序员如何制作一份漂亮的面试简历
简历模板 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; ...
- 第一次软件工程作业——html制作一份简单的个人简历
源码链接(码云):https://gitee.com/yongliuli/codes/eavjr7lxotb85s0icnq1z68 简历效果图展示: 代码展示: 添加背景音乐的方法: 在<he ...
- CSS——制作天天生鲜主页
终于做好了! index.html: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 封装win7系统、制作win7GHO镜像、制作一个自定义的镜像文件具体步骤、制作Win10镜像gho
作者:导演你让灰太狼吃只羊 来源:CSDN 原文:https://blog.csdn.net/qq_35057426/article/details/83015516 版权声明:本文为博主原创文章,转 ...
- 用一张图片制作skybox图片 (如何制作360全景图、立方体)
我转发的帖子在这里 http://dong2008hong.blog.163.com/blog/static/4696882720140294039205/ 原帖不知道地址 我这里简单整理了下 去掉了 ...
- C#软件winform程序安装包制作及卸载程序制作
使用vs2010 winform程序开发的软件的人比较多,程序的开发是为了在不同的人不同的机器使用,为了使不同的机器能使用该软件就需要在制作程序安装包,安装包里必须包含该软件运行所选的所有环境,下面就 ...
随机推荐
- Android开发学习—— Service 服务
Service运行于后台的一个组件,用来运行适合运行在后台的代码,服务是没有前台界面,可以视为没有界面的activity. 服务可以被手动关闭,不会重启,但是如果被自动关闭,内存充足就会重启. sta ...
- Android之RecyclerView的原生Bug-Inconsistency detected. Invalid view holder adapter positionViewHolder{a1bbfa3 position=2 id=-1, oldPos=-1, pLpos:-1 no parent}
今天在运行自己编写的App时,突然发现App在运行时闪退,然后就查看了Android Studio的Log,发现了这个错误,上网查了一下,才知道是RecyclerView的原生Bug,在数据更新时会出 ...
- Windows下SVN服务器的搭建步骤
1.下载svn服务端和客户端 服务端VISUALSVN SERVER:https://www.visualsvn.com/ 客户端TortoiseSVN:https://tortoisesvn.net ...
- chkconfig
chkconfig的级别: 0:关机 1:单用户模式 2:无网络支持的多用户模式 3:有网络支持的多用户模式 4:保留,未使用 5:有网络支持有X-Windows(图形界面)支持的多用户模式 6:重新 ...
- [jquery]将当前时间转换成yyyymmdd格式
如题: function nowtime(){//将当前时间转换成yyyymmdd格式 var mydate = new Date(); var str = "" + mydate ...
- python下如何安装biopython
本来是自学python,后来又了解到有biopython这个包,将想安装下来,结果折腾了我一上午...终于安装成了,哈哈哈,功夫不负有心啊 过程如下: 1.首先去http://biopython.or ...
- [No0000A4]DOS命令(cmd)批处理:替换字符串、截取字符串、扩充字符串、获取字符串长度
1.替换字符串,即将某一字符串中的特定字符或字符串替换为给定的字符串.举例说明其功能:========================================= @echo off set a ...
- Oracle 获取当前日期及日期格式
http://blog.sina.com.cn/s/blog_6168ee920100l2ye.html Oracle 获取当前日期及日期格式 获取系统日期: SYSDATE() 格式化日期: ...
- Hbase学习连接
http://blog.csdn.net/baolibin528/article/details/43672131 http://m.blog.csdn.net/article/details?id= ...
- Lua面线对象学习
--[[ ]] local userdata = {} local Register = {} function Register:del(key) userdata[self.namespace][ ...