Zi 字媒體

教學主題: 使用CSS3來定位一個傾斜的圖片 大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學 今天的這個教學主題是: 使用CSS3來定位一個傾斜的圖片 這教學的重點為這幾點 [ 傾斜,圖片,一個,定位,使用,li,src,alt,//li ] 希望你可以從這幾點中領悟到修圖的精華 本文重點 利用純CSS可以做出千變萬化的效果,特別是CSS3的引入更讓更多的效果可以做出來.現在就讓我們動手做出一個關於涼爽為題的圖片庫. 利用純CSS可以做出千變萬化的效果,特別是CSS3的引入更讓更多的效果可以做出來.現在就讓我們動手做出一個關於涼爽為題的圖片庫. 先看看效果： 點擊查看我們要做的效果.請記住這個事例對於IE來說支持的不好,但firefox;safari瀏覽器升級到最高版本是可以看出效果的. 我們先用CSS的基本樣式來構建圖片.然後再加入一些陰影和翻轉的屬性,最近使用z-index屬性來改變圖片的疊加順序. 在開始之前先下載這些清爽的圖片. Iguassu Falls 006 by claudio_ar Sweet Home Under White Clouds by galego Sunset over the highway by claudio_ar Skies and fields from Argentina’s pampa 7 by claudio_ar Sunrise by claudio_ar Södermanland Lake by claudio_ar 第一步:寫入以下代碼來構建一個基本的框架,下載背影圖. body {  background: #959796 url(images/wood-repeat.jpg); } #container {  width: 600px; margin: 40px auto; } 第二步:用ul來定義一列圖片,然後再給每張圖片定義li,別忘了 給每一張圖片添加它們的alt.  < a href="#">< a href="#">< a href="#">< a href="#">< a href="#">< a href="#">   第三步:現在我們來給UL添加CSS屬性,首先我要得把列表默認的小圓點清除掉,使用一個簡單的屬性就可以清除: list-style:none ul.gallery li a {  float: left;  padding: 10px 10px 25px 10px;  background: #eee;  border: 1px solid #fff; }   第四步:現在要給圖片潤潤色.首先讓它們左浮動.再給它們增加一點填充.給圖片添加一個淺灰色的背景,最後再加一個象素的白色邊框讓圖片更加靚麗. ul.gallery li a {  float: left;  padding: 10px 10px 25px 10px;  background: #eee;  border: 1px solid #fff;  -moz-box-shadow: 0px 2px 15px #333;  position: relative; }   第五步:現在要進入本教程的重點了.使用CSS3 box-shadow 這個屬性給圖片添加陰影.為了讓圖片的順序排列好,我們要給圖片加個類.還要加個"相對"屬性.  < ahref="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1">< ahref="http://www.flickr.com/photos/galego/3131005845/" class="pic-2">< ahref="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3">< ahref="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4">< ahref="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-5">< ahref="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"> 第六步:現在要對每個類,加CSS.因此在上面我們給每張圖加個唯一的類名. ul.gallery li a.pic-1 {  z-index: 1;  -webkit-transform: rotate(-10deg);  -moz-transform: rotate(-10deg); } ul.gallery li a.pic-2 {  z-index: 5;  -webkit-transform: rotate(-3deg);  -moz-transform: rotate(-3deg); } ul.gallery li a.pic-3 {  z-index: 3;  -webkit-transform: rotate(4deg);  -moz-transform: rotate(4deg); }   第七步:因為每張圖片在位置上的不同,我們可以為其設置個性的風格.比如說:z-index 和 旋轉 的屬性. 第八步:現在圖片差不多在背景上排列出來了. ul.gallery li a:hover {  z-index: 10;  -moz-box-shadow: 3px 5px 15px #333; } 第九步:添加 :hover 樣式,給z-index加個更高的位置,當鼠標移入的時候可以跳到最上面.同時調整陰影,讓圖片感覺取消了屏幕. 看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢? 希望我們所介紹的 使用CSS3來定位一個傾斜的圖片 這教學會喜歡 文章標題: 骨子愛創意- 使用CSS3來定位一個傾斜的圖片–轉載請註明來源處 本教學分類為網頁設計教程中的 其他教程相關教學 文章相關關鍵字為: 傾斜,圖片,一個,定位,使用,li,src,alt,//li 本文永久連結 :使用CSS3來定位一個傾斜的圖片 本文轉載自 :VIA