animate首页

直接使用代码

图片素材

css代码

 <style>
/*导航*/
#index-bg { background:url(http://www.bootfastui.cn/img/2021/0525-4/bg_index.jpg) no-repeat center top;background-size:100% 100%;}
#com-nav { margin:0 auto; padding:10px 0;  }
 #com-nav .logo { text-align:center;}
#com-nav .nav { margin:0 auto; padding:0;}
#com-nav .nav ul.menu { margin-top:35px; margin-left:20px; }
#com-nav .nav ul,li { list-style:none;  position:relative; float:right}
#com-nav .nav ul.menu > li { float:left; margin-right:10px; background:#096; padding:10px 15px;border-radius:5px; color:#fff;}
#com-nav .nav ul.menu > li a { color:#fff; font-size:16px; }
#com-nav .nav ul.menu > li:hover{background:#F90; color:fff;border-color:#f90}
#com-nav .nav ul.menu > li:hover a{ color:#fff}
#com-nav .nav ul.menu > li.current{ background:#F90; color:fff; border-color:#f90}
#com-nav .nav ul.menu > li.current a{ color:#fff}

#com-nav .nav ul.menu  li ul.xiala{ position:absolute; top:48px;  width:250px; background:#663300; display:none; border-radius:10px; z-index:9999; background:url(http://www.bootfastui.cn/img/2021/0525-4/bg_ul.png) no-repeat center top; padding-top:20px;padding-bottom:15px;}
#com-nav .nav ul.menu  li ul.xiala li{ text-align:center; line-height:28px; margin:0 10px; display:block; width:100%; padding:0; margin:0;}
#com-nav .nav ul.menu  li ul.xiala li a{ color:#fff; font-size:13px;}
#com-nav .nav ul.menu  li ul.xiala li a:hover{ color:#FC3}
/*首页内容*/
#index-content { margin:50px auto;  padding:0;}
#index-content .crude b { font-size:180px; font-weight:600; color:#f1b709 ; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
#index-content .crude span {font-size:80px; font-weight:500; color:#fff }
#index-content .crude {text-align:center; font-size:30px; color:#fff;padding-top:0px;}
</style>

HTML+JS代码

 
<body id="index-bg">
  <!--导航-->
  <div id="com-nav" class="container  ">
    <div class="row ">
      <div class="col-md-2">
        <div class="logo  ">
          <a href="http://www.bootfastui.cn"> <img src="http://www.bootfastui.cn/img/2021/0525-4/logo_01.png" width="200" /></a>
        </div>
      </div>
      <!--col-md-3 end-->
      <div class="col-md-10">
        <div class="nav  ">
          <ul class="menu">
            <li class='current'><a href=" /index.php/Home/Index/index.html">Home</a></li>
            <li><a href="http://www.bootfastui.cn">About Us</a>
              <ul class="xiala" style="left:-70px;">
                <li><a href="http://www.bootfastui.cn">About Us</a></li>
                <li><a href="http://www.bootfastui.cn">Our Qualification</a></li>
                <li><a href="http://www.bootfastui.cn">IEAEC's Programs</a></li>
                <li><a href="http://www.bootfastui.cn">IEAEC's Cooperative Organisation</a></li>
              </ul>
            </li>
            <li><a href="http://www.bootfastui.cn">Our Programs</a>
              <ul class="xiala" style="left:-50px;">
                <li><a href="http://www.bootfastui.cn">Volunteer in Australia</a></li>
                <li><a href="http://www.bootfastui.cn">Work and Holiday</a></li>
                <li><a href="http://www.bootfastui.cn">Study Tours in Australia</a></li>
                <li><a href="http://www.bootfastui.cn">Hospitality Internship</a></li>
                <li><a href="http://www.bootfastui.cn">Teach Abroad</a></li>
                <li><a href="http://www.bootfastui.cn">Education &amp; Culture Exchange</a></li>
                <li><a href="http://www.bootfastui.cn">Australian National Curriculum</a></li>
              </ul>
            </li>
            <li><a href="http://www.bootfastui.cn">Successful Stories</a>
              <ul class="xiala" style="left:-30px;">
                <li><a href="http://www.bootfastui.cn">Hospitality Internship</a></li>
                <li><a href="http://www.bootfastui.cn">Work and Holiday</a></li>
                <li><a href="http://www.bootfastui.cn">Study Tour</a></li>
                <li><a href="http://www.bootfastui.cn">Volunteer in Australia</a></li>
                <li><a href="http://www.bootfastui.cn">Australian National Curriculum</a></li>
              </ul>
            </li>
            <li><a href="http://www.bootfastui.cn">Apply Online</a></li>
            <li><a href="http://www.bootfastui.cn">News Center</a></li>
            <li><a href="http://www.bootfastui.cn">Contact Us</a></li>
          </ul>
        </div>
        <!--nav end-->
      </div>
      <!--col-md-9 end-->
    </div>
    <!--row end-->
    <div class="clear"></div>
  </div>
  <!--id end-->

  <script type="text/javascript">
    $(function () {
      $('.menu li').hover(function () {

        $(this).find('.xiala').stop().slideDown();
      }, function () {
        $(this).find('.xiala').stop().slideUp();
      })


    })

  </script>

  <!--neirong-->
  <div id="index-content" class=" container ">
    <div>
      <p class="crude animated bounceInRight"><img src="http://www.bootfastui.cn/img/2021/0525-4/index_zi.png" /> </p>
      <p class="crude animated bounceInLeft"><span>Australia</span></p>
      <p class="crude animated bounceInBottom" style="padding-top:80px;">International Exchange Association for
        Education
        and Culture Australia </p>
    </div>
  </div>

</body>