今天学到常用的固定宽度且居中的排版样式,有两种实现方式
方式一:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body,html { background-color: #069; scrollbar-3dlight-color:#BoC4DE; scrollbar-arrow-color:#30C; scrollbar-base-color:#09C; scrollbar-darkshadow-color:#960; scrollbar-face-color:#C00; scrollbar-highlight-color:#C3C; scrollbar-shadow-color:#3CF; margin:0px; padding:0px; text-align::center; background:#096; } #container { position::relative; margin:0 auto; padding::0px; 1024px; text-align::left; background:#3F9; } </style> </head> <body> <div id="container"> <p>dfdfddddddddddddddddddddddddddddddddddd dfdfddddddddddddddd dfdddddddddddddd fddddddddddddddddd dfdfffffffffffffffffffd dfdffffffffffffffffffffff</p> </div> </body> </html>
方式二:
body,html { margin::0px; padding::0px; background::#069} #container { position::relative; left:50%; 700px; margin-left:-350px; padding::0px; }