<output id="jbxdv"></output>

      1. 設置圖片樣式

        • 2019-09-24 10:37:21
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        網頁設計時,圖片的效果很大程度上影響到網頁效果,要使網頁圖文并茂并且布局結構合理,就要注意圖片的設置。通過CSS統一管理,不但可以更加精確地調整圖片的各種屬性,還可以實現很多特殊效果。本節將對圖片的邊框、圖片的大小與縮放、圖片對齊等屬性進行介紹。

        定義圖片邊框

        在HTML語法中,可以直接通過<.img>標簽的border屬性來為圖片添加邊框,語法如下:<img src="圖片路徑" border="數值">

        【示例1】

        啟動Dreamweaver,新建一個網頁,保存為test.html,在<body>標簽內輸入以下代碼:

        <img src="images/11.jpg" border="0">

        <img src="images/11.jpg" border="1">

        <img src="images/11.jpg" border="2">

        <img src="images/11.jpg" border="3">按F12鍵,在瀏覽器中預覽。

        可以看到,用HTML控制圖片邊框是無法設計出豐富多彩的圖片效果的,需要使用CSS中的border-style、border-color和border-width 3個屬性來定義邊框。其語法如下:

        border-style:參數;

        border-color:參數;

        border-width:數值;

        border-style屬性用于設置邊框的樣式,用的最多的兩個參數是dotted表示點劃線,用dashed表示虛線,其他的一些值會在后面的章節中詳細說明。在網站建設中,border-color屬性用于設置邊框的顏色。bor-der-width屬性用于設置邊框的寬度。

        【示例2】啟動Dreamweaver,新建一個網頁,保存為test1.html,在<body>標簽內輸入以下代碼:

        <img src="images/22.jpg" class="pic1"/>

        <img src="images/22.jpg" class="pic2"/>

        在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,用來定義圖片邊框樣式。

        .pic1 {    border-style: dotted;        /*點劃線*/ 

        border-color: #000066;       /*邊框顏色*/    

        border-width: 2px;           /*邊框粗細*/}

        .pic2 {    border-style: dashed;        /*點劃線*/    

        border-color: #FF0000;       /*邊框顏色*/    

        border-width: 10px;          /*邊框粗細*/}

        【示例3】下面示例為圖像四邊設計不同的邊框樣式。

        在CSS中,還可以分別設置4個邊框的不同樣式,即分別設置border-left、border-right、border-top、border-bottom的樣式。啟動Dreamweaver,新建一個網頁,保存為test2.html,在<body>標簽內輸入以下代碼:

        <img src="images/33.jpg"/>

        在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,用來定義圖片邊框樣式。

        img {    border-left-style: dotted;      /*左點劃線*/    

        border-left-color: #FF9900;     /*左邊框顏色*/    

        border-left-width: 5px;         /*左邊框粗細*/    

        border-right-style: dashed;    

        border-right-color: #33CC33;    

        border-right-width: 2px;    

        border-top-style: solid;        /*上實線*/    

        border-top-color: #CC00FF;      /*上邊框顏色*/

        border-top-width: 10px;         /*上邊框粗細*/    

        border-bottom-style: groove;    

        border-bottom-color: #666666;    

        border-bottom-width: 15px;}

        【示例4】在示例3中介紹了分別設置4個邊框的方法,border屬性還可以將各個值寫到同一語句,用空格分隔,這樣可以大大縮短代碼長度。

        啟動Dreamweaver,新建一個網頁,保存為test3.html,在<body>標簽內輸入以下代碼:

        <img src="images/44.jpg" class="pic1"/>

        <img src="images/44.jpg" class="pic2"/>

        在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式,用來定義圖片邊框樣式。

        .pic1 { border: 5px double #FF00FF;   /*將各個值合并*/}.pic2 {    

        border-right: 5px double #000;    border-left: 8px solid #45673A;}

        可以看到代碼的長度明顯減少,這樣不但清晰易讀,而且大大加快了網頁下載速度。

        【拓展】示例4是將border的各個屬性值寫到一起,有的時候還會出現這樣的語句:border-style:dotted solid dashed doubel、border-width:5px10px,這種設置方法也是正確的,但是上面這種語句如果寫成這樣:border:dotted solid dasheddoubel、borderh:5px 10px,就不對了。

        制作網頁時,在設置邊框樣式時,如果border-style、border-width、bor-der-color只設置一個參數,則該參數將作用于4個邊,即4個邊的樣式風格一樣;如果設置兩個參數,則第一個參數作用于上、下邊框,第二個參數作用于左、右邊框;如果設置3個參數,則第一個參數作用于上邊框,第二個參數作用于左、右邊框,第三個參數作用于下邊框;如果設置4個參數,則按照上-右-下-左的順序作用于各個邊框。

        pic1 {    border-style: dotted solid;                /*上、下邊框為dotted,左、右邊框為solid*/    

        border-width: 5px 10px 8px 3px; /*上邊框為5px,右邊框為10px,下右邊框為8px,左邊框為3px*/    

        border-color: #009966 #000;                /*分別設置上、下和左、右邊框顏色*/}

        .pic2 { border: 5px double #000;               /*合并border的各個屬性*/}

        CSS中很多其他的屬性也可以進行類似的操作,例如margin和padding:padding:0px 5px、margin:0px 10px 3px 20px。

        提示:在設置border-style、border-color和border-width時,設置的順序是有講究的,在設置border(-?)color和border-width之前必須先設置border-style,否則border-color和border-width的效果將不會顯示。

        當前文章標題:設置圖片樣式

        當前URL:http://www.freenetsites.com/news/wzzz/3101.html

        上一篇:在網頁中插入圖像

        下一篇:在網頁設計中定義圖片大小

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>