Selepas mengikuti, anda boleh menjejaki maklumat dinamiknya tepat pada masanya
Kursus dalam bahagian yang berkaitan：Gaya sempadan dalam CSS
<html> <head> <meta charset="utf-8"> <title>邊框</title> <style type="text/css"> body{background:#66b3ff;}/*背景顏色：淺藍(lán)*/ *{padding:0px;margin:0px;}/*去除頁面邊距*/ h3{color:yellow;margin:20px 0px 0px 20px;}/*設(shè)置為黃色，內(nèi)邊距上部和左邊都為20*/ span{font-size:2em;color:pink;}/*字體2倍大小，顏色粉色*/ .t1{width:100px;height:150px;border:2px;border-radius:15px;background:#ccc;padding-top:10px;padding-left:5px;margin-left:50px;color:#000;}/*設(shè)置大小，邊框?yàn)?，圓角，背景色，上內(nèi)邊距10（為了顯示文字），左內(nèi)邊距5，左外邊距50，字體黑色*/ .t2{width:100px;height:150px;border:2px;border:dashed blue;margin:10px 0px 0px 70px;padding-left:3px;background:red;color:#fff;}/*設(shè)置大小，邊框?yàn)?，虛線邊框，藍(lán)色，外邊距上為10（與上面元素隔開），左為70，（下面幾個(gè)元素依次遞增20，為了有樓梯效果），左內(nèi)邊距3，紅背景色，字體顏色白色*/ .t3{width:100px;height:150px;border:dotted green;margin:10px 0px 0px 90px;background:#000;color:#fff;}/*設(shè)置大小，邊框點(diǎn)狀虛線，綠色，外邊距上10左90，背景色黑色，字體顏色：白*/ .t4{width:100px;height:150px;background:pink;border-left:3px solid green;border-bottom:3px solid green;margin:10px 0px 0px 110px;}/*設(shè)置大小，背景色：粉色，左邊框粗細(xì)3，實(shí)線，綠色，下邊框粗細(xì)3，實(shí)線，綠色，外邊距上10左110*/ .t5{width:100px;height:150px;margin:10px 0px 0px 130px;border:none;background:#ccc;box-shadow:6px 3px 3px blue;}/*設(shè)置大小，外邊距上10左130，邊框不顯示，背景色ccc，陰影：X軸6，Y軸3，陰影寬度3，陰影顏色：藍(lán)色*/ .t6{width:100px;height:150px;margin:10px 0px 30px 150px;background:#f75000;box-shadow:inset 0px 20px 80px yellow;}/*設(shè)置大小，外邊距上10，下30（由于下面沒有元素，為了完整顯示這個(gè)div，所以設(shè)置下30px）,左150，背景色#f75000，陰影：內(nèi)部，X軸0，Y軸20，陰影寬度80，陰影顏色：黃色*/ </style> </head> <body> <h3>下面是<span>邊框</span>練習(xí)的實(shí)例</h3><br> <div class="t1">圓角邊框</div> <div class="t2">虛線邊框</div> <div class="t3">點(diǎn)狀邊框</div> <div class="t4">只有左下邊框</div> <div class="t5">外部陰影</div> <div class="t6">內(nèi)部陰影</div> </body> </html>
2018-11-290個(gè)贊
Kursus dalam bahagian yang berkaitan：Tukar elemen peringkat blok kepada elemen sebaris dan belakang
<html> <head> <meta charset="utf-8"> <title>下拉菜單</title> <style type="text/css"> *{padding:0px;margin:0px;} body{background-color:#ccc;} .nav{width:150px;height:20px;background-color:green;line-height:20px;text-align:center;color:#fff} .main{width:150px;height:88px;background-color:green;line-height:21px;text-align:center;color:#fff;display:none;border-top:1px yellow solid;} .nav:hover .main{display:block;} ul li{list-style:none;border-bottom:solid 1px yellow;} a{color:#fff;text-decoration: none;} </style> </head> <body> <div class="nav">導(dǎo)航 <div class="main"> <ul> <li><a href="#">網(wǎng)站首頁</a></li> <li><a href="#">新聞動(dòng)態(tài)</a></li> <li><a href="#">留言板</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </div> </div> </body> </html>
2018-11-290個(gè)贊
Kursus dalam bahagian yang berkaitan：Kedudukan dalam CSS
<html> <head> <meta charset="utf-8"> <title>相對定位與絕對定位</title> <style type="text/css"> *{padding:0px;margin:0px;} body{color:#fff;} .a1{width:150px;height:150px;background:red;position:relative;left:300px;}/*設(shè)置寬高，背景紅色，相對定位：距離原始位置左側(cè)300，也就是右移300，下面直接說相對原位置右移*/ .a2{width:150px;height:150px;background:green;position:absolute;top:33px;left:330px;}/*設(shè)置寬高，背景綠色，絕對定位（由于沒有已經(jīng)定位的父元素，所以這個(gè)絕對定位是相對于body）：下移33，右移330，所以顯示覆蓋在第一個(gè)上面*/ .a3{width:150px;height:150px;background:blue;}/*設(shè)置寬高，背景藍(lán)色，無定位*/ .a4{width:150px;height:150px;background:black;position:relative;top:50px;left:50px;}/*設(shè)置寬高，背景黑色，相對定位：下移50，右移50*/ .a5{width:80px;height:80px;background:yellow;color:green;position:absolute;left:10px;top:10px;}/*設(shè)置寬高，比其他幾個(gè)都小，背景黃色，字體顏色綠色，絕對定位：（由于其父元素a4已經(jīng)相對定位，所以a5的絕對定位就成了相對于a4的定位）右移10，下移10*/ .a6{position:absolute;right:20px;color:black;width:80px;height:30px;background:#ccc;line-height:30px;text-align:center;}/*絕對定位：（由于沒有已經(jīng)定位的父元素，所以a6的絕對定位是相對于body）距離右邊20，字體顏色黑色，設(shè)置寬高（其本身是個(gè)span行內(nèi)元素，原本設(shè)置行高不起作用，但是它已經(jīng)絕對定位，所以就變成了塊級元素），背景色ccc，line-height與height一樣，即垂直居中，文字水平居中*/ </style> </head> <body> <div class="a1">第一個(gè)</div> <div class="a2">第二個(gè)</div> <div class="a3">第三個(gè)</div> <div class="a4"> <div class="a5">第五個(gè)</div> </div> <span class="a6">導(dǎo)航條</span> </body> </html>
2018-11-300個(gè)贊
