前言:惟星寵物產品官網,分爲首頁、子頁和登陸註冊頁三個頁面,除網頁內容設計與圖片素材的部分使用網上的材料以外,其他內容呈現以及功能模塊所有爲本身重構。css
1、響應式輪播banner |
思路:使用BootStrap自帶的廣告輪播組件(Carousel)app
<section class="banner"> <div id="wode" class="carousel slide" data-ride="carousel" data-interval="2000"> <div class="carousel-inner"> <div class="item active"> <img src="images/banner.png"> </div> <div class="item"> <img src="images/banner.png"> </div> <div class="item"> <img src="images/banner.png"> </div> <div class="item"> <img src="images/banner.png"> </div> <a href="#wode" class="carousel-control left" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#wode" class="carousel-control right" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <ul class="carousel-indicators"> <li class="active" data-target="#wode" data-slide-to="0" ></li> <li class="active" data-target="#wode" data-slide-to="1" ></li> <li class="active" data-target="#wode" data-slide-to="2" ></li> <li class="active" data-target="#wode" data-slide-to="3" ></li> </ul> </div> </div> </section>
2、CSS點擊圖片放大圖片並顯示遮罩 |
![]() |
![]() |
思路:利用:after、:hover僞類選擇器結合display屬性、transition屬性和transform屬性ide
.ppcp .container .tu_all ul li .pic{ position:relative; overflow:hidden; } .ppcp .container .tu_all ul li .pic:after{ display: block; content: ""; padding-bottom: 50.4%; } .ppcp .container .tu_all ul li img{ transition: 0.3s; } .ppcp .container .tu_all ul li:hover img{ transform: scale(1.2); }
3、Jquery導航條模式觸發事件 |
![]() |
![]() |
思路:觸發另外一個元素上的事件處理函數函數
/*導航欄 顯示*/ $(function(){ $('.nav_tu').click(function(){ $(".nav_show").fadeIn(); }) $('.cha').click(function(){ $(".nav_show").fadeOut(); }) $('.fang').click(function(){ $(".text").toggle(); }) });
4、Jquery新聞縱向輪播 |
思路:使用一次性定時器佈局
//最新資訊 新聞輪播 定時器 $(document).ready(function(){ function gd(){ $('.new_gd_nei').fadeOut(500); $('.new_gd_nei').fadeIn(500); } setInterval(gd,1000); function newsgd($item, $gder){ setTimeout(newsgd,2000,$item.next(),$gder); $item.slideUp(1000,function(){ $item.appendTo($gder).show(); }); } newsgd($('.gder li:first'),$('.gder')); })
5、Jquery帶按鈕輪播圖 |
思路:觸發另外一個元素上的事件處理函數post
//最新資訊 切換圖片 var time=n=0,count; $(document).ready(function(){ count=$(".lb_list a").length; $(".lb_list a:not(:first-child)").hide(); $(".lb_zi li").click(function(){ var i=$(this).text()-1;//獲得li元素內的值(數字) n=i; if(i>=count)return; $(".lb_list li").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); $(this).toggleClass("on"); $(this).siblings().removeAttr("class"); }) })
6、animation主體漸入效果 |
![]() |
![]() |
![]() |
思路:使用animate.css動畫庫文件自帶效果動畫
<li class="animated rollIn"> <span class="quan">1</span> <h5>企業文化</h5> <p>創新,是企業生存和發展的靈魂。企業只有創新纔有發展,企而創新,於是卓越。技術創新、產品創新、服務創新。</p> </li> <li class=" animated bounceIn"> <div class="zi_div"> <h4>個人帥萌 我作主</h4> <h5>My handsome Meng I call the shots</h5> <span></span> </div> </li>
7、Media手寫首頁柵格佈局 |
![]() |
![]() |
![]() |
PC端 | pad端 | 手機端 |
思路:手動添加Madia Query根據不一樣的屏幕類型以及特性執行不一樣的CSSthis
@media(max-width:1300px) { .zxzx .container .home_top a{ font-size: 26px; } } @media(max-width:992px) { .zxzx .container .home_top a{ width:20%; } } @media(max-width:768px) { .zxzx .container .home_top a{ width:24%; } } @media(max-width:480px) { .zxzx .container .home_top a{ width:37%; } }
注:轉載請註明出處spa