CSS樣式第四篇

​針對如今網站的圖片過大問題，能夠用相應的工具進行壓縮，而且可對圖片進行切割處理。

1.若是一個頁面的圖片過大，能夠對其切割，代碼<img src=」1.jpg」><img src=」2.jpg」><img src=」3.jpg」>,如這樣排列的圖片不是塊元素，中間會有空隙，要把圖片寫成塊元素。Img {display:block;}

 

1.對網站中的圖片處理，要保證作一個靜態網頁，對圖片的處理要作到儘可能不變形。以下圖的效果圖：

 

 

代碼實現：

.content {

. background: url(/imges/content-bg47-1.png) top center no-repeat;

}

.content-1, .content-2, .content-3 {

. background: url(/imges/content-bg47-2.png) bottom center no-repeat;

. padding: 71px 0px 50px;

}

.contact-2 {

. background: url(/imges/content-bg47.png)center center no-repeat;

. background-size: 1186px 100%;

. padding: 0 70px;

}

　　

一點關於CSS3樣式的應用：

transition: all 0.6s;表示全部的屬性變化在0.6s的時間段內完成。

transform: scale(1.4);表示在鼠標放到圖片上的時候圖片按比例放大1.4倍

 

 

鼠標移上去，背景對動態的變化，

/* Ujarak */

.words::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background:rgba(255,255,255,0.6);

z-index: -1;

opacity: 0;

-webkit-transform: scale3d(0.3, 1, 1);

transform: scale3d(0.3, 1, 1);

-webkit-transition: -webkit-transform 0.8s, opacity 0.4s;

transition: transform 0.4s, opacity 0.8s;

}

.words:hover a span{color: #00468d;}

.words:hover {

 

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

 

.words:hover::before {

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

　　

鼠標滑過圖片會相應的變大，

/*hover style css */

.team-pic img{  cursor: pointer;  transition: all 0.6s;  }  

.team-pic img:hover{transform: scale(1.5);  } 　　

對導航菜單側面滑出的效果展現並點擊其餘部分隱藏的效果實現：

 

 

1. 先外部引用JQuery庫：<script src="js/jquery-3.2.1.min.js"></script>

2. 寫一個jQuery調用函數'main.js'：

3. $(function(){
   
   'use strict';
   
      var nav_mobile=$('#nav'),
   
      navmobile=$('.top-menu'),
   
   overlay=$('.overlay'),
   
   nav_toggle=$('#nav-toggle');
   
   function showMenu(){
   
   overlay.fadeIn();
   
   //console.log('clicked');
   
   navmobile.css('left',0);
   
   }
   
   function hideMenu(){
   
   overlay.fadeOut();
   
   //console.log('clicked');
   
   navmobile.css('left',-navmobile.width());
   
   }
   
   nav_toggle.on('click',showMenu)
   
   overlay.on('click',hideMenu)
   
   })
   

   　　

4. headher.html中的div如是寫：

   <div id=nav class="top-menu"></div>

5. 對與內容頁要寫：<div class="overlay"></div>點擊按鈕菜單顯示，內容頁上面覆蓋一個灰色圖層

   <button type='button' class="navbar-toggle" id=nav-toggle>
   
   <img src=images/menu.png/></button>

6. Css樣式實現：

/* nav mobile */

.nav-menu li a{height:25px;line-height:25px;padding:5px 20px;font-size:14px;}

.nav-menu li:hover {height: 35px;border-bottom: 4px solid #bd8934;}

.top-menu{width:200px;background:#333;height:auto;position:fixed;top:0;left:-200px;transition:left 0.5s;z-index:99999999;padding-bottom:80px;}

   .top-menu ul li{width:200px;}

.menu-child{left:75px;top:auto;width: 120px;padding-top:8px;background-position:30px 0px;}

li.ab>a,li.cul >a,li.cp >a{background:url(images/sj2.png)no-repeat right 25px;padding-right:20px;}

 li.ab:hover a,li.cul:hover a,li.cp:hover a{background:none;}

.overlay{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.3);display:none;z-index:100;}

button#nav-toggle {display: block; float: right; margin-top: 20px; background: transparent; border: none;width: 45px;}

.nav-menu li li:hover { width: 114px;}

.nav-menu li li a {font-size: 12px;line-height:20px; }

/*nav mobile end*/　　

實現標題樣式：

1.對外層div寫樣式

2.對內層span寫樣式：