JDBC及開源連線池Druid和C3P0的使用
阿新 • • 發佈：2020-08-02
盒子模型
目錄
1. 什麼是盒子模型
margin：外邊距
padding：內邊距
border：邊框
2. 邊框
- 邊框的樣式
- 邊框的粗細
- 邊框的顏色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*常見操作，初始化0*/ h1, ul, li, a, body{ /*body總有一個預設的外邊距，這裡使之為0*/ margin: 0; padding: 0; text-decoration: none; } /*border: 粗細 樣式 顏色*/ #box{ width: 300px; border: 1px solid red; } h2{ font-size: 16px; background-color: rosybrown; line-height: 30px; margin: 0; } form{ background: greenyellow; } /*solid實線*/ div:nth-of-type(1) input{ border: 3px solid black; } /*dashed虛線*/ div:nth-of-type(2) input{ border: 3px dashed yellow; } div:nth-of-type(3) input{ border: 2px dashed violet; } </style> </head> <body> <div id="box"> <h2>會員登入</h2> <form action="#"> <div> <span>使用者名稱：</span> <input type="text"> </div> <div> <span>密碼：</span> <input type="password"> </div> <div> <span>郵箱：</span> <input type="text"> </div> </form> </div> </body> </html>
3. 內外邊距
外邊距的妙用：居中元素
margin: 0 auto;
利用margin居中的要求
- 塊元素（div）
- 塊元素有固定的寬度
- 寫在style的div中
margin順時針旋轉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 外邊距的妙用：居中元素 margin: 0 auto; margin順時針旋轉 --> <style> #box{ width: 300px; border: 1px solid red; margin: 0 auto; } h2{ font-size: 16px; background-color: rosybrown; line-height: 30px; margin: 0; } form{ background: greenyellow; } input{ border: 1px solid black; } </style> </head> <body> <div id="box"> <h2>會員登入</h2> <form action="#"> <div> <span>使用者名稱：</span> <input type="text"> </div> <div> <span>密碼：</span> <input type="password"> </div> <div> <span>郵箱：</span> <input type="text"> </div> </form> </div> </body> </html>
盒子的計算方式：當前元素到底多大？
margin+border+padding+內容寬度
4. 圓角邊框
4個角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 50px; border: 10px solid red; border-radius: 50px 50px 0px 0px; margin: 0 auto; } /*圖片削圓角*/ img{ border-radius: 200px; } </style> </head> <body> <div></div> <img src="images/book_cover.jpg" alt=""> </body> </html>
5. 盒子陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 1000px;
margin: 0 auto;
}
img{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 200px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div>
<img src="images/book_cover.jpg" alt="">
</div>
</body>
</html>