盒子模型及練習
阿新 • • 發佈：2017-05-28
user inpu input org ng- 成了 posit ans log
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* 盒子模型: 盒子模型就是把一個html邊框比作成了一個盒子的邊框，盒子模型要做用於操作數據與邊框之間的距離或者 是邊框與邊框之間的距離。 盒子模型主要是用於操作內邊距(padding)與外邊距（margin）*/ div{ border-style:solid; width:100px; height:100px; /* 內邊距 */ padding-left:10px; padding-top:20px; } .one{ margin-bottom:30px; } .two{ margin-left:700px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <body> <div class="one"> 這個是一個div </div> <div class="two"> 這個是二個div </div> </body> </html>
盒子練習 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .outer{ border-style:solid; width:370px; height:200px; margin-top:250px; margin-left:420px; background-image:url(../1.jpg); background-repeat:no-repeat; background-position:center; } .userName{ margin-top:60px; margin-left:80px; } .password{ margin-left:80px; margin-top:20px; } input{ border-color:#000; border-width:3px; } #button{ margin-left:120px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <body> <div class="outer" > <div class="userName"> 用戶名 <input type="text"/> </div> <div class="password"> 密 碼 <input type="password"/> </div> <input id="button" type="submit" value="登陸"/> </div> </body> </html>
盒子模型及練習