css常用布局样式

来源：互联网发布：北京金贵软件电话编辑：程序博客网时间：2024/05/20 18:41

1.一行三列

<!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" lang="gb2312"><head><title>css布局：一行三列</title><link rel="stylesheet" href="css/03_3columnplustopbox.css" mce_href="css/03_3columnplustopbox.css" type="text/css" media="all" /><meta http-equiv="content-type" content="text/html; charset=gb2312" /><meta name="robots" content="all" /><meta name="author" content="Owen Briggs:www.w3cn.org" /> </head><body> <div id="top"> <p>top</p> </div> <div id="left"> <p>left</p> </div> <div id="middle"> <pre>#top {margin: 20px 20px 0px 20px;padding: 10px;border: 5px solid #666;background: #FFF;height: 100px; /* ie5win fudge begins */voice-family: "/"}/"";voice-family:inherit;height: 70px;}html>body #top {height: 70px; /* ie5win fudge ends */}#left {position: absolute;top: 120px;left: 0px;margin: 20px;padding: 10px;border: 5px solid #666;background: #FFF;width: 150px; /* ie5win fudge begins */voice-family: "/"}/"";voice-family:inherit;width: 120px;}html>body #left {width: 120px; /* ie5win fudge ends */}#middle {margin: 20px 190px 20px 190px;padding: 10px;border: 5px solid #666;background: #FFF;}#right {position: absolute;top: 120px;right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */margin: 20px;padding: 10px;border: 5px solid #666;background: #FFF;width: 150px; /* ie5win fudge begins */voice-family: "/"}/"";voice-family:inherit;width: 120px;}html>body #right {width: 120px; /* ie5win fudge ends */}</pre> <div align="right"><p><a href="css/03_3columnplustopbox.css" mce_href="css/03_3columnplustopbox.css">[本页完整 css]</a></p></div> </div> <div id="right"> <p>right</p> </div></body></html>

2.单行单列

<!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" lang="gb2312"><head><title>css布局：单栏单列</title><link rel="stylesheet" href="css/01_centered_box.css" mce_href="css/01_centered_box.css" type="text/css" media="all" /><meta http-equiv="content-type" content="text/html; charset=gb2312" /><meta name="robots" content="all" /><meta name="author" content="Owen Briggs:www.w3cn.org" /> </head><body> <div id="content"> <pre>body {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;font-family: verdana, arial, helvetica, sans-serif;color: #c060;background-color: #CCC;text-align: center;/* part 1 of 2 centering hack */}#content {width: 400px; padding: 10px;margin-top: 20px;margin-bottom: 20px;margin-right: auto;margin-left: auto; /* opera does not like 'margin:20px auto' */background: #FFF;border: 5px solid #666;text-align:left; /* part 2 of 2 centering hack */width: 400px; /* ie5win fudge begins */voice-family: "/"}/"";voice-family:inherit;width: 370px;}html>body #content {width: 370px; /* ie5win fudge ends */}</pre><div align="right"><p><a href="css/01_centered_box.css" mce_href="css/01_centered_box.css">[本页完整css]</a></p></div> </div> </body></html>

3.单行三列

<!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" lang="gb2312"><head><title>css布局：三列2</title><link rel="stylesheet" href="css/03_3column4.css" mce_href="css/03_3column4.css" type="text/css" media="all" /><meta http-equiv="content-type" content="text/html; charset=gb2312" /><meta name="robots" content="all" /><meta name="author" content="Owen Briggs:www.w3cn.org" /> </head><body> <div id="left"> <p>left</p> </div> <div id="middle"> <pre>body {margin: 20px 0px 0px 0px; /* n6.01win-mac won't recognize top margin for middle box, so it goes here */padding: 0px 0px 0px 0px;font-family: verdana, arial, helvetica, sans-serif;color: #060;background-color: #CCC;}#left {position: absolute;top: 0px;left: 0px;margin: 20px;padding: 10px;border: 5px solid #666;background: #FFF;width: 150px; /* ie5win fudge begins */voice-family: "/"}/"";voice-family:inherit;width: 120px;}html>body #left {width: 120px; /* ie5win fudge ends */}#middle {margin: 0px 190px 20px 190px; /* n6.01win n6mac won't recognize top margin for middle box, so it goes in body */padding: 10px;border: 5px solid #666;background: #FFF;}#right {position: absolute;top: 0px;right: 0px; /* Opera5.02 will show a space at right swhen there is no scroll bar */margin: 20px;padding: 10px;border: 5px solid #666;background: #FFF;width: 150px; /* ie5win fudge begins */voice-family: "/"}/"";voice-family:inherit;width: 120px;}html>body #right {width: 120px; /* ie5win fudge ends */}</pre> <div align="right"><p><a href="css/03_3column4.css" mce_href="css/03_3column4.css">[本页完整 css]</a></p></div> </div> <div id="right"> <p>right</p> </div></body></html>

4.单行三列

<!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" lang="gb2312"><head><title>css布局：三列2</title><link rel="stylesheet" href="css/03_3column2.css" mce_href="css/03_3column2.css" type="text/css" media="all" /><meta http-equiv="content-type" content="text/html; charset=gb2312" /><meta name="robots" content="all" /><meta name="author" content="Owen Briggs:www.w3cn.org" /> </head><body> <div id="left"> <p>left</p> </div> <div id="middle"> <pre>#left {position: absolute;top: 0px;left: 0px;margin: 20px;padding: 10px;border: 5px solid #666;background: #FFF;width: 150px; /* ie5win fudge begins */voice-family: "/"}/"";voice-family:inherit;width: 120px;}html>body #left {width: 120px; /* ie5win fudge ends */}#middle {margin: 20px 190px 20px 190px;padding: 10px;border: 5px solid #666;background: #FFF;}body>#middle {float: left; /* required by N6.01Win, and must be hidden from IE5Win. */}#right {position: absolute;top: 0px;right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */margin: 20px;padding: 10px;border: 5px solid #666;background: #FFF;width: 150px; /* ie5win fudge begins */voice-family: "/"}/"";voice-family:inherit;width: 120px;}html>body #right {width: 120px; /* ie5win fudge ends */}</pre> <div align="right"><p><a href="css/03_3column2.css" mce_href="css/03_3column2.css">[本页完整 css]</a></p></div> </div> <div id="right"> <p>right</p> </div></body></html>