CSS是現(xiàn)代互聯(lián)網(wǎng)開發(fā)中必不可少的一部分,它可以控制網(wǎng)頁的布局、顏色、字體等外觀細(xì)節(jié),使我們的網(wǎng)頁更加漂亮、炫酷和易于使用。而在CSS樣式表中,一些常用的CSS代碼段則可以幫助我們更加高效地制作網(wǎng)頁。
//1. 對齊文本 text-align: center; //居中對齊 text-align: left; //左對齊 text-align: right; //右對齊 text-align: justify; //兩端對齊
//2. 改變字體 font-family: 'Arial', sans-serif; //設(shè)定字體樣式 font-size: 16px; //設(shè)定字體大小 font-style: italic; //斜體 font-weight: bold; //加粗
//3. 設(shè)定顏色 color: #333; //16進(jìn)制顏色代碼 color: rgb(100, 100, 100); //RGB數(shù)值 color: rgba(100, 100, 100, 0.5); //RGBA數(shù)值(帶透明度)
//4. 設(shè)定背景 background-color: #f7f7f7; //背景顏色 background-image: url('example.jpg'); //背景圖片 background-repeat: repeat-x; //水平重復(fù) background-size: cover; //盡量填滿,不變形 background-position: center top; //背景位置
//5. 設(shè)定邊框 border: 1px solid #ccc; //設(shè)定寬度、樣式、顏色 border-radius: 10px; //設(shè)定圓角半徑
//6. 設(shè)定陰影 box-shadow: 2px 2px 5px #f3f3f3; //設(shè)定x軸偏移、y軸偏移、模糊半徑、顏色 text-shadow: 1px 1px 5px #ccc; //在文字上添加陰影
//7. 設(shè)定透明度 opacity: 0.5; //設(shè)定透明度值(0~1之間)
//8. 設(shè)定動(dòng)畫效果 animation: example 2s ease-out; //設(shè)定動(dòng)畫名稱、時(shí)間、緩動(dòng)函數(shù) @keyframes example { //定義動(dòng)畫具體內(nèi)容 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
//9. 清除默認(rèn)樣式 margin: 0; //去除外邊距 padding: 0; //去除內(nèi)邊距 list-style: none; //去除列表樣式 text-decoration: none; //去除文本裝飾
//10. 響應(yīng)式布局 @media screen and (max-width: 768px) { //針對屏幕寬度小于768px的設(shè)備 body { font-size: 14px; } .container { width: 90%; } }
以上是60個(gè)常用的CSS代碼段,它們可以幫助您更加高效地開發(fā)網(wǎng)頁,并增加網(wǎng)頁的美觀程度。但請記住,CSS的應(yīng)用不是標(biāo)配化做法,合理運(yùn)用常規(guī)以外的編碼可以創(chuàng)造更加個(gè)性化的網(wǎng)頁和視覺效果。
上一篇vue click 提交
下一篇vue click事件