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

2023-02-26 07:27:41

宅基腐主页

主页分为四大板块：导航栏，轮播图，主页内容，相关信息。

导航栏：<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;

}

码农公寓

相关文章