制作宅基腐主页 && 制作个人简历--材料：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程序开发的软件的人比较多,程序的开发是为了在不同的人不同的机器使用,为了使不同的机器能使用该软件就需要在制作程序安装包,安装包里必须包含该软件运行所选的所有环境,下面就 ...

随机推荐

NFR
你NFR了吗? NFR,即非功能性需求 (Non -Functional Requirements) ,即系统能够完成所期望的工作的性能与质量.具体包括如下内容: – 效率: 软件实现其功能所需要的计 ...
js的replace函数入参为function时的疑问
近期在写js导出excel文件时运用到replace方法,此处详细的记录下它各个参数所代表的的意义. 定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式 ...
win 10 安装软件报错发布者不受信任
1:打开任务管理器, [运行新任务] 2:(勾上以系统管理员权限创建此任务) 输入 cmd 3:进入要安装的软件所在的目录:cd D:\111_安装包\submit 3 (本文以安装submit 为 ...
The user specified as a definer ('root'@'%') does not exist 异常解决
参考:http://www.cnblogs.com/Magicam/archive/2013/07/22/3207382.html 权限问题,授权给 root 所有sql 权限 mysql> ...
关于SQL Server镜像的一个小误区
昨天晚上突然接到客户的电话, 说在配置了镜像的生产环境数据库下修改 “已提交读快照” 选项的时候报错, 需要先取消镜像然后再重新搭建.悲催的是这是个近TB的数据库,问我有没有什么快速的方法.于是我就问 ...
RemodelanyWhere11.0.2673版本下载
百度云盘链接:http://pan.baidu.com/s/1geL5lez 密码:hisq 原文转载至:http://blog.sun0816.com/13623.html
Docker中部署Kubernetes
Kubernetes为Google开源的容器管理框架,提供了Docker容器的夸主机.集群管理.容器部署.高可用.弹性伸缩等一系列功能:Kubernetes的设计目标包括使容器集群任意时刻都处于用户期 ...
Jsoup系列学习(2)-解析html文件
解析html文件 1.当我们通过发送http请求时,有时候返回结果是一个html格式字符串,你需要从一个网站获取和解析一个HTML文档,并查找其中的相关数据.你可以使用下面解决方法: 使用 Jsoup ...
WPF 自定义的窗口拖动
WPF原有的窗口样式太丑,当我们重新定义窗口时,则需要添加一些额外的功能,如拖动~ 1.在界面上对布局元素如Grid,添加委托事件: MouseLeftButtonDown="UIEleme ...
html drag api 在firefox 下拖动出现新窗口的解决办法
有个功能,需要用drag drop api 来做. 发现在firefox下拖放,会出现新的tab 页签,即使在ondragover.ondrop中使用了event.preventDefault也无济于 ...

制作宅基腐主页 && 制作个人简历--材料：BootStrap

制作宅基腐主页 && 制作个人简历--材料：BootStrap的更多相关文章

随机推荐

热门专题