利用bootstrap仿php中文网 - 1月25日作业

Home > List of blog posts > 利用bootstrap仿php中文网
Blogger Information
Blog 49
fans 0
comment 4
visits 41661
Special Recommendation
More>
Related recommendations
实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>bootstrap快速入门</title>

    <link rel="stylesheet" type="text/css" href="admin/css/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">

    <link rel="stylesheet" type="text/css" href="admin/css/demon05.css">

    <script src="layui/layui.js"></script>

    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

<style>

*{

    margin:0;

    padding:0;

}

body{

    background:#F3F5F7;

}

body a:hover{

    text-decoration: none;

}

div .container{

    border-radius: 10px;

    border:0;

    margin:0;

    padding:0;

}

.container div{

    border-radius: 10px;

}

.col-md-1{

    height:55px;

    background:#1E1E1E;

}

.col-md-2{

    height:55px;

    background:#1E1E1E;

}

.col-md-9{

    height:55px;

    background:#1E1E1E;

}

ul{

    list-style: none;

}

.c1 li{

    width: 10%;

    border: none;

    height: 55px;

    line-height: 55px;

    text-align: center;

    color: gray;

    float: left;

}

.col-md-9 ul li a:link{

    color:gray;

    text-decoration: none;

}

.container{

    width: 90%;

}

.box1 .d1 li{

    line-height: 68px;

    height:68px ;

    width: 100%;

    color: #F5F0F0;

    font-size: 20px;

}

.box1.d1 ul{

    background:black;

    margin-top: 5px;

}

.box1 .d1 li span{

    float: left;

    font-size: 15px;

}

.box1 .d1 li i{

    float:right;

    line-height:68px;

}

.box1 .d2 li{

    width: 10%;

    border: none;

    height: 55px;

    line-height: 55px;

    text-align: center;

    color: gray;

    float: left;

}

.box1 .d3 li{

    width: 25%;

    border: none;

    height: 120px;

    line-height: 125px;

    text-align: center;

    background:white;

    float: left;

}

.box3 div{

    background:FFFFFF;

}

.box3 .d1 ul li{

    line-height: 30px;

}

.box3 .d1 ul li a:hover{

  text-decoration: none;

}

.box3 .d2 img{

    width:170px;

    height:90px;

    float: left;

    border-radius: 10px;

    margin:40px 10px 20px 10px;

}

/* 第三块 右侧 常用手册 */

.box3 .d3 div div div{

    margin:5px;

}

.box3 .d3 div div div img{

    float:left;

    width: 40px;

    height: 40px;

    margin:0 10px;

}



.box3 .d3 ul li span a{

    margin-left: 10px;

    float: left;

}

.box4 div div{

    background:red;height: 495px;margin:15px 0;

}

.box4 div div #test1 div{

    width:356px;

    height:183px;

    margin-left:-15px;

    margin-top:-15px;

    background: #1E1E1E;

}

</style

</head>

<body>

    <!-- 顶部导航 -->

   <div class="container-fluid">

       <div class="row">

           <div class="col-md-2">

               <a href="#"><img style="height:55px;" src="image/tubiao.png"></a>

           </div>

           <div class="col-md-9">

               <ul class="c1" style="position:relative;">

                   <li name="0"><a href="#">首页</a></li>

                   <li name="1"><a href="#">视频教程</a></li>

                   <li name="2"><a href="#">社区问答</a></li>

                   <li name="3"><a href="#">编程词典</a></li>

                   <li name="4"><a href="#">手册下载</a></li>

                   <li name="5"><a href="#">工具下载</a></li>

                   <li name="6"><a href="#">类库下载</a></li>

                   <li name="7"><a href="#">特色课程</a></li>

                   <li name="8"><a href="#">菜鸟学堂</a></li>

                   <div class="x1" style="width:100px;height:3px;background:#1AF550;position:absolute;margin-top:52px;"></div>

               </ul>

           </div>

           <div class="col-md-1">

                  <div style="line-height:55px;">

                      <a href="#"><i class="glyphicon glyphicon-volume-up" style="color:honeydew;font-size:20px;line-height: 55px;float: left;"></i></a>

                     <img style="float:right;width:30px;border-radius:15px;" src="http://www.php.cn/static/images/user_avatar.jpg">

                  </div>

           </div>

       </div>

   </div>

   <!-- 第一大块 滚动图 -->

   <div class="container box1" style="margin-top:30px;border-radius: 10px;">

       <div class="row" >

           <div class="col-md-2 d1" style="height: 510px;">

              <!-- 导航条 -->

              <ul>

                  <li>

                      <span>php开发</span>

                      <i class="glyphicon glyphicon-menu-right"></i>

                  </li>

                  <li>

                        <span>前端开发</span>

                        <i class="glyphicon glyphicon-menu-right"></i>

                  </li>

                  <li>

                        <span>服务端开发</span>

                         <i class="glyphicon glyphicon-menu-right"></i>

                 </li>

                  <li>

                       <span>移动开发</span>

                         <i class="glyphicon glyphicon-menu-right"></i>

                  </li>

                  <li>

                        <span>服务器运维&下载</span>

                         <i class="glyphicon glyphicon-menu-right"></i>

                 </li>

                  <li>

                        <span>在线工具箱</span>

                        <i class="glyphicon glyphicon-menu-right"></i>

                </li>

                <li>

                        <span>常用类库</span>

                        <i class="glyphicon glyphicon-menu-right"></i>

                </li>

              </ul>

           </div>

           <div class="col-md-10" style="background:#E5E3E3;height: 510px;">

               <div class="row d2" style="background:#F5F0F0;height:55px">

                  <ul>

                      <li>PHP头条</li>

                      <li>独孤九剑</li>

                      <li>学习路线</li>

                      <li>在线工具</li>

                      <li>趣味课堂</li>

                      <li>社区问答</li>

                      <li>课程直播</li>

                      </ul>

                      <div>

                         <form style="margin-top: 10px;margin-left: 20px;">

                             <input style="height:30px;width: 270px;" type="text" name="search" placeholder="输入关键词搜索">

                            <i class="glyphicon glyphicon-search" style="margin-left:-30px;"></i>

                            </form>

                         </div>

                    </div>

               <div class="row" style="background:yellowgreen;height:330px;">

                <div class="layui-carousel" id="test1">   

                    <div carousel-item >

                        <!-- ？？？？？？轮播图右边测总留一条空白 -->

                        <a href="#"><img src="https://img.php.cn/upload/article/000/000/003/5b49b0e610f26951.jpg"></a>

                        <a href="#"><img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"></a>

                    </div>

                </div>

                </div>

               <div class="row d3" style="height:125px;">

                   <ul>

                       <li><img src="http://www.php.cn/static/images/index_dugu2.jpg"></li>

                       <li><img src="https://img.php.cn/upload/article/000/000/003/5baf2172be8c0490.png"></li>

                       <li><img src="http://www.php.cn/static/images/index_php_item3.jpg"></li>

                       <li><img src="http://www.php.cn/static/images/index_php_new4.jpg"></li>

                   </ul>

               </div>

           </div>

       </div>

   </div>

   <!-- 第二块 广告 -->

   <div class="container box2">

       <div class="row">

           <div class="col-md-12" style="background:gray;height:80px;margin:20px 0;border-radius: 10px;padding:0;">

        <img src="https://img.php.cn/upload/article/000/000/003/5c4580edb940a985.gif" style="width:100%;height:100%;border-radius: 10px;">

        </div>

       </div>

   </div>

   <!-- 第三块 头条 最新课程 常用手册 -->

   <div class="container box3">

        <div class="row">

            <div class="col-md-2 d1" style = "padding-left:10px;padding-right:0;background:#FFFFFF; height: 410px;border-radius: 10px;width:300px;">

            <p style="margin-top:8px;font-size: 14px;font-weight: bold;">头条</p>

            <hr>

            <ul>

                <li ><a href="#">php中文网vip特权会员学习指南</a></li>

                <li><a href="#">php中文网原创视频：《天龙八部》公益ph...</a></li>

                <li><a href="#">php中文网《玉女心经》公益***系列...</a></li>

                <li><a href="#">php空间是什么 该如何选择</a></li>

                <li><a href="#">零基础的小明要如何成为前端工程师？</a></li>

                <li><a href="#">NPM 相关精选文章及视频教程资源推荐（7...</a></li>

                <li><a href="#">拼多多技术事故复盘，程序员应该学到什么？</a></li>

                <li><a href="#">2018 – 2019 年前端 JavaScript 面试题（...</a></li>

                <li><a href="#">程序员导致拼多多出现重大Bug，被薅上千万</a></li>

                <li><a href="#">爷爷：啥是佩奇？佩奇：Python 10 秒可以...</a></li>

                <li><a href="#">Python抢票程序优化，可以选择车次和座次</a></li>

                <li><a href="#">2018年小米高级 PHP 工程师面试题（模拟...</a></li>

            </ul>

            </div>

            <div class="col-md-8 d2" style = "background:#FFFFFF;margin:0 15px;border-radius:10px;height:410px;width:620px;">

                    <p style="margin-top:8px;font-size: 14px;font-weight: bold;">最新课程</p>

                    <hr>

                    <div><a href="#"><img src="https://img.php.cn/upload/course/000/000/001/5c3bec6e2640e714.jpeg"></a></div>

                    <div><a href="#"><img src="https://img.php.cn/upload/course/000/000/014/5c3450fbe6d1b229.jpg"></a></div>

                    <div><a href="#"><img src="https://img.php.cn/upload/course/000/000/014/5c34121d016f5208.jpg"></a></div>

                    <div><a href="#"><img src="https://img.php.cn/upload/course/000/000/015/5c3073edb18cc822.jpg"></a></div>

                    <div><a href="#"><img src="https://img.php.cn/upload/course/000/000/015/5c306535dc5ee207.jpg"></a></div>

                    <div><a href="#"><img src="https://img.php.cn/upload/course/000/000/014/5c304ba1aa085936.jpg"></a></div>

            </div>

            <div class="col-md-2 d3" style="background:#FFFFFF;height:410px; width:260px;border-radius: 10px;">

                <span style="margin-top:8px;font-size: 14px;font-weight: bold;">常用手册</span>

                <span style="float:right;font-size: 14px;font-weight: bold;"><a href="#">更多</a></span>

                <hr>

                <!-- 常用手册文件底部文字列表 -->

                <div class="container" >

                    <div class="row">

                        <div class="col-md-12">

                                <img  src="http://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg">

                                <span>

                                    <a href="#">thinkPHP5.0</a>

                                    <a href="#">Linux教程</a>

                                    <a href="#">php手册</a>

                                    <a href="#">Memcached</a>

                                </span> 

                        </div>

                    </div>

                    <div class="row">

                            <div class="col-md-12">

                                    <img  src="http://www.php.cn/upload/system/000/000/001/57d55f537896d439.jpg">

                                    <span>

                                        <a href="#">JavaScript中文参考手册</a>

                                        <a href="#">jQuery中文参考手册</a>

                                    </span> 

                            </div>

                    </div>

                    <div class="row">

                            <div class="col-md-12">

                                    <img  src="http://www.php.cn/upload/system/000/000/001/57d560a2c0e5f831.jpg">

                                    <span>

                                        <a href="#">MySQL最新手册教程</a>

                                        <a href="#">Redis命令参考手册</a>

                                    </span> 

                            </div>

                        </div>

                        <div class="row">

                                <div class="col-md-12">

                                        <img  src="http://www.php.cn/upload/system/000/000/001/57d56222bfab2642.jpg">

                                        <span>

                                            <a href="#">Node.js中文学习手册</a>

                                            <a href="#">AngularJS中文参考手册</a>

                                        </span> 

                                </div>

                        </div>

                        <div class="row">

                                <div class="col-md-12">

                                        <img  src="http://www.php.cn/upload/system/000/000/001/57d55f07ccfb6991.jpg">

                                        <span>

                                            <a href="#">html手册</a>

                                            <a href="#">CSS手册</a>

                                            <a href="#">html5手册</a>

                                            <a href="#">CSS3手册</a>

                                        </span> 

                                </div>

                            </div>

                            <div class="row">

                                    <div class="col-md-12">

                                            <img  src="http://www.php.cn/upload/system/000/000/000/5a911102396d0195.jpg">

                                            <span>

                                                <a href="#">Bootstrap中文文档</a>

                                                <a href="#">快速入门Git教程</a>

                                            </span> 

                                    </div>

                            </div>

                </div>

            </div>

        </div>

    </div>

    <!-- 第四块 开发工具下载 最新社区回答 -->

    <div class="container box4">

            <div class="row">

                <div class="col-md-3" style="width:357px;">

                        <div class="layui-carousel" id="test1">   

                                <div carousel-item>

                                    <!-- ？？？？？？轮播图右边测总留一条空白 -->

                                    <a href="#"><img src="https://img.php.cn/upload/course/000/001/120/59e7018b107f1234.png"></a>

                                    <a href="#"><img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"></a>

                                    <a href="#"><img src="https://img.php.cn/upload/course/000/001/120/59edb17869f79684.png"></a>

                                </div>

                        </div>

                </div>

                <div class="col-md-6" style="margin:15px 20px;width:508px;">技术文章 网站源码</div>

                <div class="col-md-3" style="width:308px;">最新社区回答</div>

            </div>

    </div>

    <!-- 第五块 广告  -->

   <div class="container">

        <div class="row">

            <div class="col-md-12" style="background:gray;height:80px;margin:20px 0;">广告条</div>

        </div>

    </div>

     <!-- 第六块 词典分类 最新社区回答 -->

     <div class="container">

            <div class="row">

                <div class="col-md-2" style = "background:tomato;height: 390px;margin:20px 0;">词典分类</div>

                <div class="col-md-10" style = "background:#B2311F;height:390px;margin:20px 0;">词典查询 全部词典 最新更新</div>

            </div>

    </div>

    <!-- 第七块 php入门精品课程 -->

    <div class="container">

            <div class="row" style="background:grey;height:80px;">php入门精品课程</div>

            <div class="row">

                <div class="col-md-2" style = "background:tomato;height: 360px;"></div>

                <div class="col-md-10" style = "background:#B2311F;height:360px;"></div>

            </div>

    </div>

     <!-- 第八块 平分5列 -->

     <div class="container">

            <div class="row" style="margin-top:20px;">

                <div class="col-md-2" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">php工具箱最新教学视频</div>

                <div class="col-md-2" style = "background:#B2311F;width:20%;height:170px;margin:20px 0;">孤独九剑</div>

                <div class="col-md-3" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">php万全自学手册</div>

                <div class="col-md-3" style = "background:#B2311F;width:20%;height:170px;margin:20px 0;">mysql权威开发指南</div>

                <div class="col-md-2" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">公益直播</div>

            </div>

    </div>

      <!-- 第九块 广告  -->

   <div class="container">

        <div class="row">

            <div class="col-md-12" style="background:gray;height:80px;margin:20px 0;">广告条</div>

        </div>

    </div>

    <!-- 第十块 php入门精品课程 -->

    <div class="container">

            <div class="row" style="background:grey;height:80px;">php进阶学习路径</div>

            <div class="row">

                <div class="col-md-2" style = "background:tomato;height: 360px;"></div>

                <div class="col-md-10" style = "background:#B2311F;height:360px;"></div>

            </div>

    </div>

     <!-- 第十一块 平分5列 -->

     <div class="container">

            <div class="row" style="margin-top:20px;">

                <div class="col-md-2" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">CI框架30分钟极速入门</div>

                <div class="col-md-2" style = "background:#B2311F;width:20%;height:170px;margin:20px 0;">PHP实战天龙八部</div>

                <div class="col-md-3" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">PHP实战天龙八部</div>

                <div class="col-md-3" style = "background:#B2311F;width:20%;height:170px;margin:20px 0;">PHP实战天龙八部</div>

                <div class="col-md-2" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">php全栈开发之小博客</div>

            </div>

    </div>

    <!-- 第十二块 资源下载 -->

    <div class="container">

            <div class="row">

                <div class="col-md-4" style = "background:tomato;height: 490px;margin:20px 0;">资源下载</div>

                <div class="col-md-4" style = "background:#B2311F;height:490px;margin:20px 0;">HTML5特效</div>

                <div class="col-md-4" style = "background:tomato;height: 490px;margin:20px 0;">更多下载</div>

            </div>

    </div>

    <!-- 第十三块 手册大全 -->

    <div class="container">

            <div class="row">

                <div class="col-md-2" style = "background:tomato;height: 420px;margin:20px 0;">手册大全</div>

                <div class="col-md-10" style = "background:#B2311F;height:420px;margin:20px 0;">学习手册 最新更新</div>

            </div>

    </div>

      <!-- 第十四块 友情链接  -->

   <div class="container">

        <div class="row">

            <div class="col-md-12" style="background:gray;height:130px;margin:20px 0;">友情链接</div>

        </div>

    </div>

        <!-- 第十五块 网页底部  -->

   <div class="container-fluid">

        <div class="row">

            <div class="col-md-12" style="background:black;height:200px;margin:20px 0;">网页</div>

        </div>

    </div>

<script>

    $(function(){

        $('.c1>li').hover(function(){

           $xx=parseInt($(this).attr('name'))*100

            $('.x1').stop().animate({'left':$xx +'px'},300)

        },

        function(){

            $('.x1').stop().animate({'left':0},300)

            //？？？？？此处未实现底线变短消失的效果

        })

        

    })

    layui.use('carousel', function(){

         var carousel = layui.carousel;

    //   建造实例

                          carousel.render({

                            elem:'#test1',

                            width:'100%',//设置容器宽度

                            height:'100%',

                            arrow:'always' //始终显示箭头

                            //,anim: 'updown' //切换动画方式

                          });

                        });

</script>

</body>

</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
css中实现缓慢上升动作的代码

2019-02-08 20:58:04