csgo开箱_(wafotl.cn)茄子推荐的开箱子网站

企業(yè)官網(wǎng)建設(shè) 營銷型網(wǎng)站 微信分銷系統(tǒng) 微信小程序 企業(yè)郵局
css
設(shè)置圖片的樣式
圖片在網(wǎng)頁設(shè)計(jì)中占據(jù)相當(dāng)重要的位置。使用css樣式可以設(shè)置圖片的大小和邊框等屬性。恰當(dāng)?shù)氖褂胏ss其他屬性和配合頁面排布也能創(chuàng)造出很精美的圖片效果。
css設(shè)置圖片
css設(shè)置圖片
了解css技術(shù)基礎(chǔ)之css設(shè)置圖片的樣式

圖片在網(wǎng)頁設(shè)計(jì)中占據(jù)相當(dāng)重要的位置。僅用文字建立的網(wǎng)站相對枯燥,使用圖文結(jié)合是當(dāng)今大部分網(wǎng)站設(shè)計(jì)的形式。使用css樣式可以設(shè)置圖片的大小和邊框等屬性。css沒有提供針對圖片樣式的屬性,但是恰當(dāng)?shù)氖褂胏ss其他屬性和配合頁面排布也能創(chuàng)造出很精美的圖片效果。

在網(wǎng)頁中插入圖片

在html中嵌入圖片的方式是用img標(biāo)簽。

< img src="picture.jpg" />

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" ?/>?

< title >浙江網(wǎng)盛生意寶股份有限公司< /title >?

< /head >?

< body >?

< img src="picture.jpg" />?

< /body >

< /html >

以上是一個(gè)最簡單的在網(wǎng)頁中插入圖片的方式。其中,src屬性是指要插入的圖片所在文件夾位置??梢允窍鄬Φ刂?,也可以是絕對路徑。

在瀏覽器上使用的圖片類型有限,通常為gif和jpeg格式的圖片。由于某些格式的圖片不能在瀏覽器中顯示,所以在插入網(wǎng)頁圖片前應(yīng)先使用ps等圖像處理軟件進(jìn)行圖片格式轉(zhuǎn)化。

控制圖片的大小

在網(wǎng)頁中放置的圖片的原始大小往往與設(shè)計(jì)師需要的圖片大小不同。css的width和height屬性適用于控制圖片的寬度和高度。

width:picwidth

height:picheight

其中picwidth和picheight可以使用任何長度單位來裝飾。通常情況下使用像素為單位。 如果原始圖片不是一比一的關(guān)系,在縮放或放大后會明顯拉伸變形。要使圖片不變形,可以使用百分比控制圖片大小或單獨(dú)控制高度(寬度) 。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" ?/>?

< title >浙江網(wǎng)盛生意寶股份有限公司< /title >?

< style >?

?img{ width:150px; height:150px}/*設(shè)置圖片的寬度為150像素,高度為150像素*/?

< /style >?

< /head >?

< body >?

< img src="picture.jpg" />?

< /body >?

< /html >

使用百分比設(shè)置圖片的寬高能使圖片按照等比例縮放。圖片最終高度(或?qū)挾龋?img標(biāo)簽的父級元素的高度(寬度)X縮放百分比。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" ?/>

< title >浙江網(wǎng)盛生意寶股份有限公司< /title >

< style >?

?img{ width:50%; height:50%}/*設(shè)置圖片的寬度為父元素的50%,高度為父元素的50%*/?

< /style >

< /head >

< body >

< img src="picture.jpg" />?

< /body >

< /html >

單獨(dú)設(shè)置圖片的寬度,圖片按照寬度縮放,高度是按照寬度的縮放比例自動變化,整張圖片在縮放后比例不變。單獨(dú)設(shè)置圖片的高度,同樣。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" ?/>?

< title >浙江網(wǎng)盛生意寶股份有限公司< /title >?

< style > img{ width:200px; /*設(shè)置圖片的寬度為200px*/ < /style >?

< /head >?

< body >?

< img src="picture.jpg" />?

< /body >?

< /html >

給圖片添加邊框的技巧

為放置在網(wǎng)頁上的圖片增加邊框可以使用圖片的邊界清晰,排布整齊,也可以使圖片更美觀。

css的border屬性適用許多元素,同樣適用于圖片。以下是使用border屬性的通用語法:?

border-width:width;設(shè)置邊框的寬度?

border-style:style;設(shè)置邊框的樣式?

border-color:color;設(shè)置邊框的顏色?

其中border-width是指邊框的寬度,width可以用任何長度單位設(shè)置,border-style是指邊框的樣式,style指的是設(shè)置邊框樣式的關(guān)鍵字。border-color是指邊框的顏色,color可以用任何顏色單位設(shè)置。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" ?/>?

< title >浙江網(wǎng)盛生意寶股份有限公司< /title >?

< style >?

img{ border-width:3px; border-style:solid; border-color:#F00 /*設(shè)置邊框?qū)挾葹?像素;設(shè)置邊框樣式為實(shí)線;設(shè)置邊框顏色為紅色*/?

< /style >< /head >?

< body >?

< img src="picture.jpg" />?

< /body >?

< /html >

邊框?qū)傩圆坏梢蕴砑舆吙?,還可以在某些特定的場合去掉邊框。

圖片不顯示的解決辦法

由于網(wǎng)絡(luò)傳輸?shù)葐栴}會造成網(wǎng)頁上某些圖片不能顯示。在圖片不能正常顯示的情況下,為了讓瀏覽者獲悉圖片包含的信息,應(yīng)增加圖片的替換文字。使用img標(biāo)簽的alt屬性,能給圖片增添替換文字。在圖片不能正常顯示的情況下,該替換文字就會出現(xiàn)在瀏覽器中。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" ?/>?

< title >浙江網(wǎng)盛生意寶股份有限公司< /title >?

< style >?

img{ border-width:3px; border-style:solid; border-color:#F00 /*設(shè)置邊框?qū)挾葹?像素;設(shè)置邊框樣式為實(shí)線;設(shè)置邊框顏色為紅色*/?

< /style >?

< /head >?

< body >?

< img src="picture.jpg" alt="該圖片不能顯示,該圖片原為風(fēng)景圖片"/>?

< /body >?

< /html >

在網(wǎng)頁上的圖片常常被作為一個(gè)超鏈接,以下是把圖片設(shè)置為可單擊的鏈接的代碼:

< a href=””>< img src=”picture.jpg” alt=”該圖片不能顯示,該圖片原為風(fēng)景圖片”/ >< /a>

其中在a標(biāo)簽中的href屬性后的#符號可以用任意網(wǎng)頁地址替換。

文字環(huán)繞圖片

合理排布圖片和文字能使網(wǎng)頁顯得生動并且充滿說服力。圖文混排是網(wǎng)頁制作的一項(xiàng)重要手段。