<!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>