制作宅基腐主页 && 制作个人简历--材料：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程序开发的软件的人比较多,程序的开发是为了在不同的人不同的机器使用,为了使不同的机器能使用该软件就需要在制作程序安装包,安装包里必须包含该软件运行所选的所有环境,下面就 ...
随机推荐
- System.Json 使用注意
在xamarin中对json字符串进行解析,使用System.Json时出现怪问题: json-string = { "ret" : "OK" } 使用如下代码 ...
- WebViewJavascriptBridge源码探究--看OC和JS交互过程
今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFr ...
- Android系统属性简介
查看Android源码你会发现,代码中大量存在:SystemProperties.set()/SystemProperties.get():通过这两个接口可以对系统的属性进行读取/设置,顾名思义系统属 ...
- Highcharts配置
一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...
- freeswitch模块之event_socket
这是我之前整理的关于freeswitch mod_event_socket的相关内容,这里记录下,也方便我以后查阅. mod_event_socket以socket的形式,对外提供控制FS一种途径, ...
- SQL Server 2012 新特性：FileTable
FileTable是基于FILESTREAM的一个特性.有以下一些功能: 一行表示一个文件或者目录. 每行包含以下信息: file_Stream流数据,stream_id标示符(GUID). 用户表示 ...
- Storm UI 说明
原文: http://blog.sina.com.cn/s/blog_5c51172c0102v26g.html
- 从一道面试题来认识java类加载时机与过程
说明:本文的内容是看了<深入理解Java虚拟机:JVM高级特性与最佳实践>后为加印象和理解,便记录了重要的内容. 1 开门见山 以前曾经看到过一个java的面试题,当时觉得此题很简单,可 ...
- 自己解决虚拟机Ubuntu开机黑屏
Virtual Box+Ubuntu 64bit,之前都能好好用,但昨天一打开,过了开始的一个选择界面(有什么恢复模式那个)就黑了,左上角的光标不闪,一直卡在那里,后来发现原因了. 1.先下载LeoM ...
- java设计模式之建造者模式
学习了设计模式,一直感觉有进步又没有进步,与同学.同事探讨了一下.变化不可能一会就可以的,需要努力坚持.不管进步大小,也不管是否进步,做到勿忘初心,做自己喜欢的事情就好.还有几个设计模式一直没有写,原 ...