網頁設計中的陰影圖片

  • 2019-10-10 12:54:19
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://www.258852.net

網頁設計中中插入圖片是再平常不過的事情了,有時為了美觀的需要,可以給圖片加上陰影,讓圖片有一種特殊的效果,CSS可以為圖片加上陰影嗎?答案是肯定的,在本例中將給讀者介紹在制作網頁時為圖片加陰影的方法。

【操作步驟】

第1步,啟動Dreamweaver,新建文檔,保存為index.html。

第2步,構建網頁基本結構。頁面的結構很簡單,只有兩個<div>標簽,在每個<div>標簽中都包含了一個<div>標簽和一個<img>標簽,分別定義了一左一右兩幅圖片。

<div class="pic">

<div class="left">

<img src="images/2.jpg" border=0 alt="pic" />

</div></div><div class="pic">

<div class="right">

<img src="images/1.jpg" border=0 alt="pic" />

</div></div>

此時的頁面極其簡單,只有兩張圖片,沒有任何樣式的設置。

第3步,定義圖片的陰影。其實給圖片加陰影的原理很簡單,就是運用兩個<div>塊的相對位置偏移而實現,陰影的寬度和顏色深淺由用戶決定,也就是CSS中的相對定位屬性position:relative;。

.pic {    position: relative;    

background: #CCC;    

margin: 10px;    

margin-right: 50px;    

float: left;}

.pic div {    position: relative;    

border: 1px solid #333;    

background: #FFF;    

padding: 3px;}.right {    top: -6px;        /*陰影在右邊時*/    

left: -6px;}

.left {    

top: -6px;       /*陰影在左邊時*/    

right: -6px;

給外層的<div>定義一個類樣式為pic,設置其position屬性為relative,也就是相對定位。設置它的背景色為#CCC,設置四周補白10px,并使兩圖之間距離為50px。最后,定義其為左浮動。

對內層<div>進行設置:首先仍然是設置其position屬性為relative,這也是本例最關鍵的一步,之后設置內層div的背景色為#FFF,并設置邊框樣式和內邊距padding。left和right類樣式分別定義了左側圖片的內側<div>的偏移量和右側圖片的內側<div>的偏移量,這句話可能有些饒舌,請讀者仔細理解,也就是說我們在網頁設計時必須讓內側的<div>進行位移,而左側圖片的位移方向與右側圖片是不同的,所以分別用left和right來進行設置。

當前文章標題:網頁設計中的陰影圖片

當前URL:http://www.258852.net/news/wzzz/3108.html

上一篇:網頁設計中的設計多圖水平排列

下一篇:如何在網頁設計中設計圓角圖片

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
a级国产乱理论片在线观看_久久久久久黃色網站免費_日韩 欧美 一区 不卡_国产成人av综合网