CSS是一種用于網頁布局與表現的語言。利用CSS,我們可以很方便地對網頁中的各個元素進行樣式設置。
其中,圖片鏈接與邊框是網頁中經常使用的兩個元素。下面我們就看看如何利用CSS對它們進行樣式設置。
/* 定義圖片鏈接樣式*/ a img { border: none; /* 取消邊框*/ } a:hover img { opacity: 0.8; /* 鼠標懸浮時改變透明度*/ } /* 定義邊框樣式 */ .border { border: 1px solid #ddd; /* 定義1px寬且顏色為#ddd的實線邊框*/ padding: 10px; /* 定義邊框內邊距*/ }
以上就是對圖片鏈接和邊框設置的樣式。其中,a img
選擇器定義了當圖片用鏈接方式展示時的樣式,取消了默認的邊框,并在鼠標懸浮時改變了透明度,增強了交互性。
.border
類選擇器定義了邊框樣式,增加了1px寬的實線邊框,并設置了邊框內邊距為10px。需要注意的是,這里定義的是邊框樣式,而不是圖片鏈接樣式。如果要對鏈接應用邊框樣式,需要在a鏈接標簽內加上類名border
。
上一篇vue打包根目錄
下一篇css 圖片被文字環繞