Difference between revisions of "Team:NKU China/test"

 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{NKU_China/menubar}}
 
<html>
 
<html>
 
<head>
 
<head>
−
<style>
+
 
−
#sideMenu, #top_title {
+
    <!--separatrix-->
−
             display: none;
+
    <style>
 +
        .main#attributions {
 +
             padding: 0 10vw;
 +
            padding-bottom: 10vh;
 +
            font-size: 1.15rem;
 
         }
 
         }
  
−
         #mw-content-text > p {
+
         .main div.h2 {
−
             margin: 0px;
+
            color: cyan;
 +
            text-align: left;
 +
            font-size: 2rem;
 +
             padding-bottom: 1rem;
 
         }
 
         }
−
</style>
 
−
<meta charset="utf-8">
 
−
<title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
 
−
<link rel="stylesheet" href="http://static.runoob.com/assets/bootstrap/3.3.7/css/bootstrap.min.css">
 
−
<script src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>
 
−
<script src="http://static.runoob.com/assets/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
−
</head>
 
−
<body>
 
  
−
<div id="myCarousel" class="carousel slide">
+
        article {
−
<!-- 轮播（Carousel）指标 -->
+
            margin-bottom: 2.5rem;
−
<ol class="carousel-indicators">
+
        }
−
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
 
−
<li data-target="#myCarousel" data-slide-to="1"></li>
+
        #nutshell {
−
<li data-target="#myCarousel" data-slide-to="2"></li>
+
            padding: 1rem 0;
−
</ol> 
+
        }
−
<!-- 轮播（Carousel）项目 -->
+
 
−
<div class="carousel-inner">
+
        #nutshell .article {
−
<div class="item active">
+
            margin: 1rem 0.4rem;
−
<div class="p">
+
            line-height: 1.6rem;
−
                                We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
+
        }
−
                            </div>
+
 
−
</div>
+
        #nutshell .article div:first-child {
−
<div class="item">
+
            font-weight: bold;
−
<div class="p">
+
            color: cyan;
−
                                We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
+
            text-indent: 0;
−
                            </div>
+
        }
−
</div>
+
 
−
<div class="item">
+
        #details .p {
−
<div class="p">
+
            line-height: 1.2;
−
                                We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
+
        }
−
                            </div>
+
    </style>
−
</div>
+
    <script>
−
</div>
+
        $(function () {
−
<!-- 轮播（Carousel）导航 -->
+
            //particles();
−
<a class="carousel-control left" href="#myCarousel"  
+
        })
−
  data-slide="prev">&lsaquo;</a>
+
    </script>
−
<a class="carousel-control right" href="#myCarousel"  
+
</head>
−
  data-slide="next">&rsaquo;</a>
+
<body id="dongzhuoer">
−
</div>
+
    <div id="particles-js"></div>
 +
    <script>
 +
        particlesJS('particles-js',
 +
  {
 +
      "particles": {
 +
          "number": {
 +
              "value": 100,
 +
              "density": {
 +
                  "enable": true,
 +
                  "value_area": 800
 +
              }
 +
          },
 +
          "color": {
 +
              "value": "#0ff"
 +
          },
 +
          "shape": {
 +
              "type": "circle",
 +
              "stroke": {
 +
                  "width": 0,
 +
                  "color": "#000000"
 +
              },
 +
              "polygon": {
 +
                  "nb_sides": 5
 +
              },
 +
              "image": {
 +
                  "src": "img/github.svg",
 +
                  "width": 100,
 +
                  "height": 100
 +
              }
 +
          },
 +
          "opacity": {
 +
              "value": 0.4,
 +
              "random": false,
 +
              "anim": {
 +
                  "enable": false,
 +
                  "speed": 1,
 +
                  "opacity_min": 0,
 +
                  "sync": false
 +
              }
 +
          },
 +
          "size": {
 +
              "value": 5,
 +
              "random": true,
 +
              "anim": {
 +
                  "enable": false,
 +
                  "speed": 40,
 +
                  "size_min": 0,
 +
                  "sync": false
 +
              }
 +
          },
 +
          "line_linked": {
 +
              "enable": true,
 +
              "distance": 150,
 +
              "color": "#ff0",
 +
              "opacity": 0.4,
 +
              "width": 1
 +
          },
 +
          "move": {
 +
              "enable": true,
 +
              "speed": 6,
 +
              "direction": "none",
 +
              "random": false,
 +
              "straight": false,
 +
              "out_mode": "out",
 +
              "attract": {
 +
                  "enable": true,
 +
                  "rotateX": 600,
 +
                  "rotateY": 1200
 +
              }
 +
          }
 +
      },
 +
      "interactivity": {
 +
          "detect_on": "canvas",
 +
          "events": {
 +
              "onhover": {
 +
                  "enable": true,
 +
                  "mode": ["grab", "bubble"]
 +
              },
 +
              "onclick": {
 +
                  "enable": true,
 +
                  "mode": ["push", "repulse"]
 +
              },
 +
              "resize": true
 +
          },
 +
          "modes": {
 +
              "grab": {
 +
                  "distance": 100,
 +
                  "line_linked": {
 +
                      "opacity": 0.75
 +
                  }
 +
              },
 +
              "bubble": {
 +
                  "distance": 100,
 +
                  "size": 4,
 +
                  "duration": 2,
 +
                  "opacity": 8,
 +
                  "speed": 5
 +
              },
 +
              "repulse": {
 +
                  "distance": 200
 +
              },
 +
              "push": {
 +
                  "particles_nb": 4
 +
              },
 +
              "remove": {
 +
                  "particles_nb": 2
 +
              }
 +
          }
 +
      },
 +
      "retina_detect": true,
 +
      "config_demo": {
 +
          "hide_card": false,
 +
          "background_color": "#b61924",
 +
          "background_image": "",
 +
          "background_position": "50% 50%",
 +
          "background_repeat": "no-repeat",
 +
          "background_size": "cover"
 +
      }
 +
  }
  
 +
);
 +
    </script>
 +
    <div class="main" id="attributions">
 +
        <div class="p">
 +
            haha
 +
        </div>
 +
    </div>
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{NKU_China/footer}}

Latest revision as of 08:07, 7 October 2016

haha