效果图

动态图

html代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>主页</title>
  7.         <link rel="stylesheet" type="text/css" href="static/content/bootstrap.min.css" />
  8.         <link rel="stylesheet" type="text/css" href="static/content/index.css" />
  9.     </head>
  10.  
  11.     <body>
  12.         <!--背景-->
  13.         <div class="bg">
  14.             <img src="static/image/bg-timg2.jpg" width="100%" height="100%" />
  15.         </div>
  16.         <!--头部-->
  17.         <div class="container logo-search">
  18.             <div class="row">
  19.                 <div class="logo">
  20.                     <h1 style="margin-top: 10px;">HTML练习</h1>
  21.                 </div>
  22.                 <div class="search">
  23.                     <input type="text" class="placeholder" id="s" name="s" placeholder="搜索……" autocomplete="off">
  24.                 </div>
  25.             </div>
  26.         </div>
  27.         <!--导航栏-->
  28.         <div class="container navigation">
  29.             <div class="row">
  30.                 <ul>
  31.                     <li>
  32.                         <a>首页</a>
  33.                     </li>
  34.                     <li>
  35.                         <a>菜单1</a>
  36.                     </li>
  37.                     <li>
  38.                         <a>菜单2</a>
  39.                     </li>
  40.                     <li>
  41.                         <a>菜单3</a>
  42.                     </li>
  43.                     <li>
  44.                         <a>菜单4</a>
  45.                     </li>
  46.                     <li>
  47.                         <a>菜单5</a>
  48.                     </li>
  49.                     <li>
  50.                         <a>菜单6</a>
  51.                     </li>
  52.                     <li>
  53.                         <a>菜单7</a>
  54.                     </li>
  55.                 </ul>
  56.             </div>
  57.         </div>
  58.         <!--内容-->
  59.         <div class="container main">
  60.             <div class="row">
  61.                 <!--左边-->
  62.                 <div class="all-column left-column">
  63.                     <div class="tab">
  64.                         CSS教程
  65.                     </div>
  66.                     <div class="sidebar-box">
  67.                         <a class="top_tit" target="_top" title="CSS Text(文本)" style="font-weight: bold; color: rgb(255,255,255); background-color: rgb(150,185,125);" href="javascript:void(0)">CSS Text(文本)</a>
  68.                         <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS Fonts(字体)</a>
  69.                         <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 链接(link)</a>
  70.                         <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 列表样式(ur)</a>
  71.                         <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 表格(table)</a>
  72.  
  73.                         <a class="top_tit" target="_top" title="CSS Text(文本)" style="font-weight: bold; color: rgb(255,255,255); background-color: rgb(150,185,125);" href="javascript:void(0)">CSS Text(文本二)</a>
  74.                         <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS Fonts(字体二)</a>
  75.                         <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 链接(link二)</a>
  76.                         <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 列表样式(ur二)</a>
  77.                         <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 表格(table二)</a>
  78.                     </div>
  79.                 </div>
  80.                 <!--中间-->
  81.                 <div class="all-column main-column">
  82.                     <!--轮播图片-->
  83.                     <div class="tempWrap">
  84.                         <ul>
  85.                             <li>
  86.                                 <a href="">
  87.                                     <img src="static/image/banner1.jpg" />
  88.                                 </a>
  89.                             </li>
  90.                             <li>
  91.                                 <a href="">
  92.                                     <img src="static/image/banner2.jpg" />
  93.                                 </a>
  94.                             </li>
  95.                             <li>
  96.                                 <a href="">
  97.                                     <img src="static/image/banner3.jpg" />
  98.                                 </a>
  99.                             </li>
  100.                         </ul>
  101.                         <ol class="tempWrap-ol">
  102.                             <li style="background-color: #222222;">1</li>
  103.                             <li>2</li>
  104.                             <li>3</li>
  105.                         </ol>
  106.                     </div>
  107.  
  108.                     <!--内容-->
  109.                     <div class="main-content">
  110.                         内容
  111.                     </div>
  112.                 </div>
  113.                 <!--右边-->
  114.                 <div class="all-column right-column">
  115.                     <div class="tab right-box right-tab">
  116.                         分类导航
  117.                     </div>
  118.                     <div class="sidebar-box right-box">
  119.                         <ul>
  120.                             <li>
  121.                                 <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">服务端</a>
  122.                                 <ul class="right-tree">
  123.                                     <li>
  124.                                         <a>首页</a>
  125.                                     </li>
  126.                                     <li>
  127.                                         <a>菜单1</a>
  128.                                     </li>
  129.                                     <li>
  130.                                         <a>菜单2</a>
  131.                                     </li>
  132.                                     <li>
  133.                                         <a>菜单3</a>
  134.                                     </li>
  135.                                     <li>
  136.                                         <a>菜单4</a>
  137.                                     </li>
  138.                                     <li>
  139.                                         <a>菜单5</a>
  140.                                     </li>
  141.                                     <li>
  142.                                         <a>菜单6</a>
  143.                                     </li>
  144.                                     <li>
  145.                                         <a>菜单7</a>
  146.                                     </li>
  147.                                     <li>
  148.                                         <a>菜单87</a>
  149.                                     </li>
  150.                                 </ul>
  151.                             </li>
  152.                             <li>
  153.                                 <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">客户端</a>
  154.                                 <ul class="right-tree">
  155.                                     <li>
  156.                                         <a>首页</a>
  157.                                     </li>
  158.                                 </ul>
  159.                             </li>
  160.                             <li>
  161.                                 <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">数据库</a>
  162.                                 <ul class="right-tree">
  163.                                     <li>
  164.                                         <a>首页</a>
  165.                                     </li>
  166.                                 </ul>
  167.                             </li>
  168.                             <li>
  169.                                 <a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">测试</a>
  170.                                 <ul class="right-tree">
  171.                                     <li>
  172.                                         <a>首页</a>
  173.                                     </li>
  174.                                 </ul>
  175.                             </li>
  176.                         </ul>
  177.                     </div>
  178.                 </div>
  179.             </div>
  180.         </div>
  181.         <!--底部-->
  182.         <div class="footer">
  183.             <div class="row footer-data">
  184.                 Copyright © 2013-2019
  185.                 <strong>
  186.                     <a href="//www.runoob.com/" target="_blank">菜鸟教程</a>
  187.                 </strong> &nbsp;
  188.                 <strong>
  189.                     <a href="//www.runoob.com/" target="_blank">runoob.com</a>
  190.                 </strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
  191.             </div>
  192.         </div>
  193.         <!--返回顶部标签-->
  194.         <div class="fixed-btn">
  195.             <a class="go-top" href="javascript:void(0)" title="返回顶部" style="display: inline-block;"><i class="glyphicon glyphicon-chevron-up"></i></a>
  196.             <a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="glyphicon glyphicon-qrcode"></i></a>
  197.             <a class="writer" style="" href="javascript:void(0)" title="标记/收藏"><i class="glyphicon glyphicon-star-empty" aria-hidden="true"></i></a>
  198.             <!-- qrcode modal -->
  199.             <div id="bottom-qrcode" class="modal-fade" style="display: none;">
  200.                 <h4>微信关注</h4>
  201.                 <div class="panel-body"><img alt="微信关注" src="static/image/1.png"></div>
  202.             </div>
  203.         </div>
  204.  
  205.         <script src="static/scripts/jQuery-2.2.0.min.js"></script>
  206.         <script src="static/scripts/bootstrap.min.js"></script>
  207.         <script src="static/scripts/index.js"></script>
  208.     </body>
  209.  
  210. </html>

css代码：

  1. .::after,.::before{
  2.     content: "";
  3.     display: table;
  4. }
  5. .::after,.::before{
  6.     clear: both;
  7. }
  8.  
  9. body,ul,li{
  10.     margin:;
  11.     padding:;
  12.     color: #000000;
  13.     list-style: none;
  14. }
  15. div,li{
  16.     display: block;
  17. }
  18. .bg {
  19.     width: 100%;
  20.     min-width: 1000px;
  21.     height: 100%;
  22.     min-height: 1000px;
  23.     position: fixed;
  24.     z-index: -1;
  25. }
  26. .container {
  27.     margin: 0 auto;
  28.     padding: 0 10px;
  29. }
  30. /*头部*/
  31. .logo-search{
  32.     width: 100%;
  33.     height: 80px;
  34.     padding: 10px 0 10px 20px;
  35.     overflow: hidden;
  36.     /*border: solid 1px yellow;*/
  37. }
  38. .logo{
  39.     width: 60%;
  40.     margin-right: 1%;
  41.     float: left;
  42. }
  43. .search{
  44.     width: 30%;
  45.     float: left;
  46. }
  47. .placeholder{
  48.     line-height: 34px;
  49.     left: 9px;
  50.     margin-top: 10px;
  51.     text-align: initial;
  52.     white-space: nowrap;
  53.     right: 9px;
  54.     height: 35px;
  55.     width: 94%;
  56.     padding: 0 3% 0 3%;
  57.     background-color: #fff;
  58.     border: 1px solid #c8c8c8;
  59.     border-radius: 3px;
  60.     color: #ccc;
  61.     font-weight:;
  62.     font-size: 1.2em;
  63. }
  64. /*导航栏*/
  65. .navigation {
  66.     width: 100%;
  67.     height: 40px;
  68.     background-color: yellowgreen;
  69.     font-size: 1.1em;
  70.     font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
  71.     overflow: hidden;
  72. }
  73. .row{
  74.     max-width: 1260px;
  75.     min-width: 755px;
  76.     margin: 0 auto;
  77.     padding:0 10px;
  78. }
  79. .navigation .row ul{
  80.     height: 40px;
  81.     padding: 10px 0 10px 10px;
  82.     list-style: nnone;
  83.     white-space: nowrap;
  84. }
  85. .navigation .row ul li{
  86.     float: left;
  87.     margin: 0 20px 0 0;
  88.     display: inline;
  89.     line-height: 20px;
  90.     text-align: center;
  91.     white-space: nowrap;
  92. }
  93. .navigation .row ul li a{
  94.     color: #FFFFFF;
  95.     padding: 10px 0 10px 0;
  96.     margin: 10px 0 0 0;
  97.     text-decoration: none;
  98. }
  99. .navigation .row ul li a:hover{
  100.     color: #CFCFCF;
  101. }
  102. /*内容*/
  103. .main {
  104.     margin-top: 20px;
  105.     width: 100%;
  106. }
  107. .all-column{
  108.     margin-right: 1%;
  109.     float: left;
  110. }
  111. .left-column{
  112.     width: 14%;
  113.     /*height: 1000px;*/
  114.     /*border: solid 1px red;*/
  115. }
  116. .tab{
  117.     opacity: .7;
  118.     padding-left: 4px;
  119.     font-size: 1.2em;
  120.     line-height: 1.9em;
  121.     font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
  122.     color: grey;
  123.     text-shadow: 0 1px 0 rgba(255,255,255,.15);
  124.     border: solid 1px rgba(0,0,0,.1);
  125.     border-bottom:;
  126.     background-clip: padding-box;
  127.     background-color: #f2f2f2;
  128. }
  129. .sidebar-box{
  130.     background: #fff;
  131.     margin: 5px 0 20px 0;
  132. }
  133. .sidebar-box a{
  134.     line-height: 20px;
  135.     text-decoration: none;
  136.     color: #000000;
  137.     background-color: #f6f4f0;
  138.     padding: 4px;
  139.     border-bottom: 1px solid #efefef;
  140.     display: block;
  141. }
  142. .sidebar-box a:hover{
  143.     font-weight: bold;
  144.     color: #2AABD2;
  145.     background-color: #CFCFCF;
  146. }
  147.  
  148. .main-column{
  149.     width: 68%;
  150.     /*height: 1500px;*/
  151.     /*border: solid 1px #007BFF;*/
  152. }
  153. .tempWrap{
  154.     width: 100%;
  155.     height: 400px;
  156.     /*border: solid 1px #007BFF;*/
  157.     position: relative;
  158.     overflow: hidden;
  159. }
  160. .tempWrap ul li a img{
  161.     width: 100%;
  162.     height: 100%;
  163. }
  164. .tempWrap ul{
  165.     width: 300%;
  166.     position: relative;
  167.     overflow: hidden;
  168.     padding: 0px;
  169.     margin: 0px;
  170.     left: 0%;
  171. }
  172. .tempWrap ul li{
  173.     width: 33.33%;
  174.     height: 400px;
  175.     float: left;
  176.     overflow: hidden;
  177.     background-position: center;
  178.     background-repeat: no-repeat;
  179. }
  180. .tempWrap-ol {
  181.     position: absolute;
  182.     z-index:;
  183.     left:;
  184.     right:;
  185.     bottom: 10px;
  186.     padding: 0 10px;
  187.     text-align: center;
  188.     display: inline-block;
  189. }
  190. .tempWrap-ol li{
  191.     width: 10px;
  192.     height: 10px;
  193.     font-size:;
  194.     line-height:;
  195.     border-radius: 50%;
  196.     display: inline-block;
  197.     text-align: center;
  198.     margin-right: 10px;
  199.     background-color: #c2c2c2;
  200.     cursor: pointer;
  201. }
  202. .main-content {
  203.     width: 100%;
  204.     height: 1000px;
  205.     border: solid 1px #007BFF;
  206.     font-size: 50px;
  207.     line-height: 500px;
  208.     text-align: center;
  209. }
  210.  
  211. .right-column{
  212.     width: 14%;
  213.     /*height: 1000px;
  214.     border: solid 1px #101010;*/
  215. }
  216. .right-tab{
  217.     font-size: 30px;
  218.     font-weight: bold;
  219.     line-height: 50px;
  220. }
  221. .right-box{
  222.     margin:;
  223.     padding:;
  224.     text-align: center;
  225. }
  226. .right-box > ul > li{
  227.     margin: 5px 0 0 0;
  228.     position: relative;
  229.     vertical-align: middle;
  230.     cursor: pointer;
  231. }
  232. .right-box ul li a{
  233.     line-height: 30px;
  234. }
  235. .right-box > ul > li:hover > a{
  236.     font-weight: bold;
  237.     text-decoration: underline;
  238.     color: #3E8F3E;
  239.     background-color: #CFCFCF;
  240. }
  241. .right-box ul li:hover > ul{
  242.     display: block;
  243. }
  244. .right-tree {
  245.     position: absolute;
  246.     width: 300px;
  247.     /*height: 200px;*/
  248.     background: #f6f4f0;
  249.     right: 100%;
  250.     top:;
  251.     display: none;
  252.     float: left;
  253.     text-align: center;
  254.     overflow: hidden;
  255.     text-overflow: ellipsis;
  256.     white-space: nowrap;
  257.     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  258. }
  259. .right-tree li{
  260.     width: 140px;
  261.     margin: 5px;
  262.     float: left;
  263.     display: inline;
  264.     line-height: 20px;
  265.     text-align: center;
  266.     white-space: nowrap;
  267. }
  268. .right-tree li a{
  269.     color: #000000;
  270.     text-decoration: none;
  271. }
  272. .right-tree li a:hover{
  273.     color: #007BFF;
  274.     text-decoration: underline;
  275. }
  276.  
  277. /*底部*/
  278. .footer{
  279.     width: 100%;
  280.     height: 60px;
  281.     margin-top: 20px;
  282.     /*background-color: #fff;*/
  283. }
  284. .footer-data{
  285.     line-height: 60px;
  286.     text-align: center;
  287.     color: #000000;
  288.     font-size: 14px;
  289. }
  290. /*返回顶部标签*/
  291. .fixed-btn{
  292.     position: fixed;
  293.     right: 1%;
  294.     bottom: 5%;
  295.     width: 40px;
  296.     border: 1px solid #eee;
  297.     background-color: white;
  298.     font-size: 24px;
  299.     z-index:;
  300. }
  301. .fixed-btn .go-top {
  302.     border-bottom: 1px solid #eee;
  303. }
  304. .fixed-btn a {
  305.     display: inline-block;
  306.     width: 40px;
  307.     height: 40px;
  308.     text-align: center;
  309.     color: #64854c;
  310.     text-decoration: none;
  311. }
  312. .fixed-btn a:hover {
  313.     background-color: #CFCFCF;
  314. }
  315. .fixed-btn a:after {
  316.     content: ".";
  317.     font-size:;
  318.     height: 100%;
  319.     display: inline-block;
  320.     vertical-align: middle;
  321. }
  322. .fixed-btn a i {
  323.     vertical-align: middle;
  324. }
  325. .fa {
  326.     display: inline-block;
  327.     font-family: normal normal normal 14px/1 FontAwesome;
  328.     font-size: inherit;
  329.     text-rendering: auto;
  330. }
  331. .fixed-btn .modal-fade {
  332.     top: auto;
  333.     bottom:;
  334.     height: 188px;
  335.     width: 128px;
  336.     padding: 10px;
  337.     margin:;
  338.     right: 65px;
  339.     left: auto;
  340.     text-align: center;
  341.     position: absolute;
  342. }
  343. .fixed-btn .modal-fade:after,
  344. .fixed-btn .modal-fade:before{
  345.     position: absolute;
  346.     top: 109px;
  347.     right: -100px;
  348.     content: '';
  349.     display: inline-block;
  350.     border-top: 9px solid transparent;
  351.     border-bottom: 9px solid transparent;
  352.     border-left: 9px solid white;
  353. }
  354. .panel-modal .panel-body {
  355.     overflow-y: auto;
  356. }
  357. .panel-body .panel-body img{
  358.     width: 128px;
  359.     height: 128px;
  360. }

js代码：

  1. $(function() {
  2.     //返回顶部标签
  3.     $(window).scroll(function() {
  4.         if($(window).scrollTop() > 100) {
  5.             $(".go-top").fadeIn(150);
  6.         } else {
  7.             $(".go-top").fadeOut(150);
  8.         }
  9.     });
  10.     $(".go-top").click(function() {
  11.         if($('html').scrollTop()) {
  12.             $('html').animate({
  13.                 scrollTop: 0
  14.             }, 100);
  15.             return false;
  16.         }
  17.         $('body').animate({
  18.             scrollTop: 0
  19.         }, 100);
  20.         return false;
  21.     });
  22.     //微信二维码显示
  23.     $('.qrcode').hover(function() {
  24.         $('#bottom-qrcode').css({"display": "block"})
  25.     },function() {
  26.         $('#bottom-qrcode').css({"display": "none"})
  27.     }
  28.     );
  29.     //右侧菜单显示
  30. //    $('.right-box ul li a').hover(function() {
  31. //        $(".right-box ul li a + ul").addClass("blue");
  32. //        $('.blue').css({"display": "block"})
  33. //    },function() {
  34. //        $('.blue').css({"display": "none"})
  35. //        $(".right-box ul li a + ul").removeClass("blue");
  36. //    }
  37. //    );
  38.  
  39.     //轮播图片
  40.     var index = 0;
  41.     function selectImage(liindex){
  42.         index = liindex;
  43.         var perleft = -index * 100;
  44.         $(".tempWrap ul").animate({"left": perleft + "%"});
  45. //      $('.tempWrap ul').css({"left": perleft + "%"});
  46.         $('.tempWrap-ol li').css({"background-color": "#c2c2c2"});
  47.         $('.tempWrap-ol li').eq(liindex).css({"background-color": "#222222"});
  48.     };
  49.     $('.tempWrap-ol li').click(function(e){
  50.         var i = parseInt(e.target.textContent);
  51.         selectImage(i-1);
  52.     });
  53.     function startImage(){
  54.         if(index == 2){
  55.             index = 0;
  56.         }else{
  57.             index++;
  58.         }
  59.         selectImage(index);
  60.         setTimeout(function(){ startImage(); } , 3000);
  61.     };
  62.     $('.tempWrap').onLoad(startImage());
  63. })

图片的话自己找吧

随机推荐

  1. jquery - 定义二维数组

    var products = []; products.push({product_id: '1',count: 3},{product_id:'2',count: 6})

  2. 全国数据json

    { "provinces": { "province": [ { "ssqid": "110000", "ss ...

  3. 生成要发送到社区的内核补丁时如何指定发布的版本号（v2,v3...）？

    1. 生成一个补丁 git format-patch --subject-prefix=v2 -1 那么生成的patch文件就会有如下类似的信息: Subject: [v2] your descrip ...

  4. Maven 引入外部依赖

    pom.xml 的 dependencies 列表列出了我们的项目需要构建的所有外部依赖项. 要添加依赖项,我们一般是先在 src 文件夹下添加 lib 文件夹,然后将你工程需要的 jar 文件复制到 ...

  5. ELK的安全解决方案 X-Pack（1）

    安装 X-Pack 前必须安装 elasticsearch. Kibana.logstash,因为之前安装ELK选择的版本都是5.4.1,所以这次选择X-Pack的版本也要是5.4.1的 第一步:下载 ...

  6. Qt打开文件QFileDialog

    //打开Pts文件按钮点击事件void AnalysisPtsDataTool201905::OnOpenFileButtonClick(){ qDebug()<<"open f ...

  7. HDFS的NameNode与SecondaryNameNode的工作原理

    原文:https://blog.51cto.com/xpleaf/2147375 看完之后确实对nameNode的工作更加清晰一些 在Hadoop中,有一些命名不好的模块,Secondary Name ...

  8. 怎么理解linux的平均负载及平均负载高后的排查工具

    什么是平均负载 平均负载可以对于我们来说及熟悉又陌生,但我们问平均负载是什么,但大部分人都回答说平均负载不就是单位时间内CPU使用率吗?其实并不是这样的,如果可以的话,可以 man uptime 来了 ...

  9. android之Framework问题总结：

    移动开发知识体系总章(Java基础.Android.Flutter) Android Handler消息机制 . Android中为什么主线程不会因为Looper.loop里的无限循环ANR? 1.1 ...

  10. 【ARTS】01_26_左耳听风-201900506~201900512

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...