盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*.class_list{*/ /*display: block;*/ /*width: 90%;*/ /*height: 300px;*/ /*margin: 200px auto;*/ /*background-color: aqua;*/ /*}*/ /*.class_fout{*/ /*font-size: 25px;*/ /*font: 25px "黑體";*/ /*line-height: 300px;*/ /*text-align: center;*/ /*}*/ .*{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; padding: 100px; /*border: 100px solid red;*/ border: 100px dotted red; background-color: #555555; } </style> </head> <body> <!--<div class="class_list class_fout">這是一個測試界面</div>--> <div class="box">jfdhsakjdfhaskjdfhsakjdhskj</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ height: 200px; width: 200px; background-color: green; /*設置上邊框的寬度*/ border-top-width: 20px; /*設置上邊框的顏色*/ border-top-color: red; /*設置上邊框的樣式*/ /*border-top-style: double;*/ /*border-top-style: solid;*/ border-top-style: dotted; /*設置下邊框*/ border-bottom-color: yellowgreen; border-bottom-width: 5px; border-bottom-style: solid; /*邊框的樣式可以合寫*/ /*border-left: 寬度,樣式,顏色;*/ border-left: 5px solid blue; 可以用一行設置上下左右的所有的樣式 } .box1{ background-color: #999999; height: 200px; width: 200px; border: 5px solid blue; } </style> </head> <body> <div class="box"></div> <div class="box1"></div> </body> </html>
