• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 網(wǎng)頁(yè)設(shè)計(jì)中的陰影圖片

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

        【操作步驟】

        第1步,啟動(dòng)Dreamweaver,新建文檔,保存為index.html。

        第2步,構(gòu)建網(wǎng)頁(yè)基本結(jié)構(gòu)。頁(yè)面的結(jié)構(gòu)很簡(jiǎn)單,只有兩個(gè)<div>標(biāo)簽,在每個(gè)<div>標(biāo)簽中都包含了一個(gè)<div>標(biāo)簽和一個(gè)<img>標(biāo)簽,分別定義了一左一右兩幅圖片。

        <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>

        此時(shí)的頁(yè)面極其簡(jiǎn)單,只有兩張圖片,沒(méi)有任何樣式的設(shè)置。

        第3步,定義圖片的陰影。其實(shí)給圖片加陰影的原理很簡(jiǎn)單,就是運(yùn)用兩個(gè)<div>塊的相對(duì)位置偏移而實(shí)現(xiàn),陰影的寬度和顏色深淺由用戶決定,也就是CSS中的相對(duì)定位屬性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;        /*陰影在右邊時(shí)*/    

        left: -6px;}

        .left {    

        top: -6px;       /*陰影在左邊時(shí)*/    

        right: -6px;

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

        對(duì)內(nèi)層<div>進(jìn)行設(shè)置:首先仍然是設(shè)置其position屬性為relative,這也是本例最關(guān)鍵的一步,之后設(shè)置內(nèi)層div的背景色為#FFF,并設(shè)置邊框樣式和內(nèi)邊距padding。left和right類樣式分別定義了左側(cè)圖片的內(nèi)側(cè)<div>的偏移量和右側(cè)圖片的內(nèi)側(cè)<div>的偏移量,這句話可能有些饒舌,請(qǐng)讀者仔細(xì)理解,也就是說(shuō)我們?cè)?a href="http://www.margaycoffee.com" target="_self" title="昆明網(wǎng)頁(yè)設(shè)計(jì)">網(wǎng)頁(yè)設(shè)計(jì)時(shí)必須讓內(nèi)側(cè)的<div>進(jìn)行位移,而左側(cè)圖片的位移方向與右側(cè)圖片是不同的,所以分別用left和right來(lái)進(jìn)行設(shè)置。

        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>