width(寬) + padding(內(nèi)邊距) + border(邊框) = 元素實(shí)際寬度 height(高) + padding(內(nèi)邊距) + border(邊框) = 元素實(shí)際高度
2016-11-240個(gè)贊
background-size:500px; 設(shè)置圖片的大小,可以設(shè)置像素，也可以設(shè)置成百分比
2016-12-060個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> #div{ width:300px; height:200px; background:linear-gradient(red,blue,yellow); /*線性漸變*/ } #div1{ width:300px; height:200px; background:radial-gradient(red,blue); /*徑向漸變*/ } /*注意，在做線性漸變或者徑向漸變，顏色的參數(shù)最少是2個(gè)*/ </style> </head> <body> <div id="div"></div> <br> <div id="div1"></div> </body> </html>
2016-12-060個(gè)贊
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的子元素進(jìn)行排列、對齊和分配空白空間
2016-11-240個(gè)贊
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想： 取代了查找設(shè)備的類型，CSS3 根據(jù)設(shè)置自適應(yīng)顯示
2016-11-240個(gè)贊
<style> ul { list-style-type: none; } ul li a { color: green; text-decoration: none; padding: 3px; display: block; } </style>
2016-11-240個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> p{ color:red; font-weight:bold; text-shadow:3px 5px 5px blue; /*文本陰影*/ } </style> </head> <body> <p>php中文網(wǎng)</p> </body> </html>
2016-12-060個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div{ width:100px; height:75px; background-color: #9dfff2; border:1px solid #e81d26; transform:translate(50px,100px); /*x軸偏移50px，y軸偏移100px*/ } </style> </head> <body> <div>php中文網(wǎng)</div> </body> </html>
2016-12-060個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div{ width:100px; height:75px; background-color: #f4ff99; border:1px solid black; transform:rotateX(120deg); /*rotateX()方法，圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素*/ } #div1{ width:100px; height:75px; background-color: #f4ff99; border:1px solid black; transform:rotateY(120deg); /*rotateY()方法，圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素*/ } </style> </head> <body> <div>PHP.CN</div> <div id="div1">php中文網(wǎng)</div> </body> </html>
2016-12-060個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div{ width:100px; height:100px; background: #d7ffb5; transition:width 2s; } div:hover{ width:300px; } </style> </head> <body> <div></div> <p>鼠標(biāo)移動(dòng)到 div 元素上，div的寬度會(huì)增加到300px</p> </body> </html>
2016-12-060個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> @keyframes myfirst { from {background:red;} to {background:yellow;} } div{ width:150px; height:100px; background:red; -webkit-animation:myfirst 5s; } </style> </head> <body> <div>css動(dòng)畫</div> </body> </html>
2016-12-060個(gè)贊
column-count:3; /*分為幾列*/ column-gap:15px;/*列與列之間的距離*/ column-rule-style:solid;/*指定了列與列間的邊框樣式*/ column-rule-width:1px;/*指定列與列之間邊框線的粗細(xì)*/ column-rule-color:red;/*指定列與列之間邊框線的顏色*/ column-rule:1px solid red; /*設(shè)置邊框樣式，粗細(xì)與顏色*/ column-width:25px;/*設(shè)置列的寬度*/
2016-12-060個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } </style> </head> <body> <div>調(diào)整屬性指定一個(gè)元素是否由用戶可調(diào)整大小的。.</div> </body> </html>
2016-12-060個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> *{margin:0;padding:0;} img{ max-width: 100%; height: auto; } </style> </head> <body> <img src="1.jpg" alt="Norway"> </body> </html>
2016-12-060個(gè)贊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>按鈕</title> <style type="text/css"> .but{ width:100px; height:30px; font-size:18px; border:1px solid #eee; background:#fff; outline:none; } .but:hover{ background:#eee; color:red; /*text-shadow:5px 5px 5px #f60;*/ /*按鈕文字的陰影*/ box-shadow: 5px 5px 5px #ccc; /*按鈕的陰影效果*/ } </style> </head> <body> <input type="button" value="按鈕" class="but"> </body> </html>
2016-12-060個(gè)贊
