制作宅基腐主页 && 制作个人简历--材料：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][ ...

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

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

随机推荐

热门专题