css常用布局样式

最新推荐文章于 2024-10-01 15:25:46 发布

yichijianfang

最新推荐文章于 2024-10-01 15:25:46 发布

阅读量671

点赞数

分类专栏： CSS 文章标签： css stylesheet xhtml div ie html

本文链接：https://blog.csdn.net/yichijianfang/article/details/4899620

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>