设置层（DIV左对齐、右对齐、居中对齐）的技巧
[ 录入者:91ctc | 时间:2012-02-03 08:02:59
| 作者: 91ctc| 来源:本站
| 浏览: 次 ]
DIV布局网页极其方便，但是其对齐方式的设置却没有表格（table）便捷，笔者总结了一些最为好用的方法：
1、设置当前DIV左对齐：
XML/HTML Code复制内容到剪贴板
- <!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=gb2312" />
- <title>网页设计技巧：DIV的对齐方式</title>
- <style type="text/css">
- <!--
- .contain { float:left; border:1px solid #FF6633; width:100px; height:20px;}
- -->
- </style>
- </head>
- <body>
- <div class="contain">
- </div>
- </body>
- </html>
这个时候我们即可将页面中的DIV块左对齐，如图：
2、设置当前DIV右对齐：
XML/HTML Code复制内容到剪贴板
- <!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=gb2312" />
- <title>网页设计技巧：DIV的对齐方式</title>
- <style type="text/css">
- <!--
- .contain { border:1px solid #FF6633; width:100px; height:20px;float:right;}
- -->
- </style>
- </head>
- <body>
- <div class="contain">
- </div>
- </body>
- </html>
这个时候我们即可将页面中的DIV块右对齐，如图：
3、设置当前DIV居中对齐：
XML/HTML Code复制内容到剪贴板
- <!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=gb2312" />
- <title>网页设计技巧：DIV的对齐方式</title>
- <style type="text/css">
- <!--
- .contain { border:1px solid #FF6633; width:100px; height:20px; margin:0px auto;}
- -->
- </style>
- </head>
- <body>
- <div class="contain">
- </div>
- </body>
- </html>
这个时候我们即可将页面中的DIV块居中对齐，如图：
{xiangguan_list}
推荐文章
热门文章