After following, you can keep track of his dynamic information in a timely manner
Courses in the relevant section：Border styles in CSS
<html> <head> <meta charset="utf-8"> <title>邊框</title> <style type="text/css"> body{background:#66b3ff;}/*背景顏色：淺藍*/ *{padding:0px;margin:0px;}/*去除頁面邊距*/ h3{color:yellow;margin:20px 0px 0px 20px;}/*設置為黃色，內邊距上部和左邊都為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;}/*設置大小，邊框為2，圓角，背景色，上內邊距10（為了顯示文字），左內邊距5，左外邊距50，字體黑色*/ .t2{width:100px;height:150px;border:2px;border:dashed blue;margin:10px 0px 0px 70px;padding-left:3px;background:red;color:#fff;}/*設置大小，邊框為2，虛線邊框，藍色，外邊距上為10（與上面元素隔開），左為70，（下面幾個元素依次遞增20，為了有樓梯效果），左內邊距3，紅背景色，字體顏色白色*/ .t3{width:100px;height:150px;border:dotted green;margin:10px 0px 0px 90px;background:#000;color:#fff;}/*設置大小，邊框點狀虛線，綠色，外邊距上10左90，背景色黑色，字體顏色：白*/ .t4{width:100px;height:150px;background:pink;border-left:3px solid green;border-bottom:3px solid green;margin:10px 0px 0px 110px;}/*設置大小，背景色：粉色，左邊框粗細3，實線，綠色，下邊框粗細3，實線，綠色，外邊距上10左110*/ .t5{width:100px;height:150px;margin:10px 0px 0px 130px;border:none;background:#ccc;box-shadow:6px 3px 3px blue;}/*設置大小，外邊距上10左130，邊框不顯示，背景色ccc，陰影：X軸6，Y軸3，陰影寬度3，陰影顏色：藍色*/ .t6{width:100px;height:150px;margin:10px 0px 30px 150px;background:#f75000;box-shadow:inset 0px 20px 80px yellow;}/*設置大小，外邊距上10，下30（由于下面沒有元素，為了完整顯示這個div，所以設置下30px）,左150，背景色#f75000，陰影：內部，X軸0，Y軸20，陰影寬度80，陰影顏色：黃色*/ </style> </head> <body> <h3>下面是<span>邊框</span>練習的實例</h3><br> <div class="t1">圓角邊框</div> <div class="t2">虛線邊框</div> <div class="t3">點狀邊框</div> <div class="t4">只有左下邊框</div> <div class="t5">外部陰影</div> <div class="t6">內部陰影</div> </body> </html>
2018-11-290個贊
Courses in the relevant section：Convert block-level elements to inline elements and back
<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">導航 <div class="main"> <ul> <li><a href="#">網站首頁</a></li> <li><a href="#">新聞動態(tài)</a></li> <li><a href="#">留言板</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </div> </div> </body> </html>
2018-11-290個贊
Courses in the relevant section：Positioning in 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;}/*設置寬高，背景紅色，相對定位：距離原始位置左側300，也就是右移300，下面直接說相對原位置右移*/ .a2{width:150px;height:150px;background:green;position:absolute;top:33px;left:330px;}/*設置寬高，背景綠色，絕對定位（由于沒有已經定位的父元素，所以這個絕對定位是相對于body）：下移33，右移330，所以顯示覆蓋在第一個上面*/ .a3{width:150px;height:150px;background:blue;}/*設置寬高，背景藍色，無定位*/ .a4{width:150px;height:150px;background:black;position:relative;top:50px;left:50px;}/*設置寬高，背景黑色，相對定位：下移50，右移50*/ .a5{width:80px;height:80px;background:yellow;color:green;position:absolute;left:10px;top:10px;}/*設置寬高，比其他幾個都小，背景黃色，字體顏色綠色，絕對定位：（由于其父元素a4已經相對定位，所以a5的絕對定位就成了相對于a4的定位）右移10，下移10*/ .a6{position:absolute;right:20px;color:black;width:80px;height:30px;background:#ccc;line-height:30px;text-align:center;}/*絕對定位：（由于沒有已經定位的父元素，所以a6的絕對定位是相對于body）距離右邊20，字體顏色黑色，設置寬高（其本身是個span行內元素，原本設置行高不起作用，但是它已經絕對定位，所以就變成了塊級元素），背景色ccc，line-height與height一樣，即垂直居中，文字水平居中*/ </style> </head> <body> <div class="a1">第一個</div> <div class="a2">第二個</div> <div class="a3">第三個</div> <div class="a4"> <div class="a5">第五個</div> </div> <span class="a6">導航條</span> </body> </html>
2018-11-300個贊
