通过CSS进行布局
样例1:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>古诗词-人间词话七则</title> <style> #main_body { font-size: 20px; width: 800px; min-width: 800px; margin: 0 auto; border: black thin solid; background-clip: padding-box; background-color: #F4EBBE; } h1,h2 { text-align: center; } img { vertical-align: middle; } img#bg { margin: 20px 0 0 5px; width: 560px; opacity:0.4; } #header { background-color: #DED28C; word-spacing: 0.5em; } #right { margin-top: 30px; width: 210px; margin-left: 20px; float: right; word-spacing: 0.5em; } #title { position: relative; top: -150px; } #content { margin: 10px; position: relative; top: -120px; } p { margin: 20px; width: 550px; text-indent: 2em; } a:link { color: blue; } a:visited { color: blue; } a { white-space: nowrap; } </style> </head> <body> <div id="main_body"> <div> <img src="logo.jpg" alt="logo"> <input name="search" type="text" size="60"> <input name="submit" type="submit" value="搜索"> </div> <div id="header"> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%85%88%e7%a7%a6">先秦</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e4%b8%a4%e6%b1%89">两汉</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e9%ad%8f%e6%99%8b">魏晋</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%8d%97%e5%8c%97%e6%9c%9d">南北朝</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e9%9a%8b%e4%bb%a3">隋代</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%94%90%e4%bb%a3">唐代</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e4%ba%94%e4%bb%a3">五代</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%ae%8b%e4%bb%a3">宋代</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e9%87%91%e6%9c%9d">金朝</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%85%83%e4%bb%a3">元代</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e6%98%8e%e4%bb%a3">明代</a> <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e6%b8%85%e4%bb%a3">清代</a> </div> <div id="right"> <a href="http://so.gushiwen.org/guwen/book_2.aspx">论语</a> <a href="http://so.gushiwen.org/guwen/book_5.aspx">史记</a> <a href="http://so.gushiwen.org/guwen/book_6.aspx">周易</a> <a href="http://so.gushiwen.org/guwen/book_7.aspx">易传</a> <a href="http://so.gushiwen.org/guwen/book_11.aspx">孟子</a> <a href="http://so.gushiwen.org/guwen/book_19.aspx">左传</a> <a href="http://so.gushiwen.org/guwen/book_20.aspx">大学</a> <a href="http://so.gushiwen.org/guwen/book_21.aspx">中庸</a> <a href="http://so.gushiwen.org/guwen/book_22.aspx">尚书</a> <a href="http://so.gushiwen.org/guwen/book_23.aspx">礼记</a> <a href="http://so.gushiwen.org/guwen/book_24.aspx">周礼</a> <a href="http://so.gushiwen.org/guwen/book_25.aspx">仪礼</a> <a href="http://so.gushiwen.org/guwen/book_26.aspx">庄子</a> <a href="http://so.gushiwen.org/guwen/book_28.aspx">老子</a> <a href="http://so.gushiwen.org/guwen/book_11.aspx">孟子</a> <a href="http://so.gushiwen.org/guwen/book_29.aspx">墨子</a> <a href="http://so.gushiwen.org/guwen/book_30.aspx">荀子</a> <a href="http://so.gushiwen.org/guwen/book_32.aspx">列子</a> <a href="http://so.gushiwen.org/guwen/book_34.aspx">管子</a> <a href="http://so.gushiwen.org/guwen/book_36.aspx">吴子</a> <a href="http://so.gushiwen.org/guwen/book_39.aspx">素书</a> <a href="http://so.gushiwen.org/guwen/book_45.aspx">孝经</a> <a href="http://so.gushiwen.org/guwen/book_55.aspx">将苑</a> <a href="http://so.gushiwen.org/guwen/book_56.aspx">六韬</a> <a href="http://so.gushiwen.org/guwen/book_57.aspx">反经</a> <a href="http://so.gushiwen.org/guwen/book_71.aspx">冰鉴</a> <a href="http://so.gushiwen.org/guwen/book_74.aspx">论衡</a> <a href="http://so.gushiwen.org/guwen/book_78.aspx">智囊</a> <a href="http://so.gushiwen.org/guwen/book_40.aspx">汉书</a> <a href="http://so.gushiwen.org/guwen/book_41.aspx">后汉书</a> <a href="http://so.gushiwen.org/guwen/book_31.aspx">韩非子</a> <a href="http://so.gushiwen.org/guwen/book_33.aspx">淮南子</a> <a href="http://so.gushiwen.org/guwen/book_35.aspx">尉缭子</a> <a href="http://so.gushiwen.org/guwen/book_1.aspx">山海经</a> <a href="http://so.gushiwen.org/guwen/book_15.aspx">三字经</a> <a href="http://so.gushiwen.org/guwen/book_16.aspx">百家姓</a> <a href="http://so.gushiwen.org/guwen/book_17.aspx">千字文</a> <a href="http://so.gushiwen.org/guwen/book_27.aspx">鬼谷子</a> <a href="http://so.gushiwen.org/guwen/book_37.aspx">伤寒论</a> <a href="http://so.gushiwen.org/guwen/book_42.aspx">商君书</a> <a href="http://so.gushiwen.org/guwen/book_53.aspx">战国策</a> <a href="http://so.gushiwen.org/guwen/book_54.aspx">三国志</a> <a href="http://so.gushiwen.org/guwen/book_59.aspx">司马法</a> <a href="http://so.gushiwen.org/guwen/book_60.aspx">逸周书</a> <a href="http://so.gushiwen.org/guwen/book_49.aspx">搜神记</a> <a href="http://so.gushiwen.org/guwen/book_63.aspx">金刚经</a> <a href="http://so.gushiwen.org/guwen/book_66.aspx">地藏经</a> <a href="http://so.gushiwen.org/guwen/book_68.aspx">弟子规</a> <a href="http://so.gushiwen.org/guwen/book_75.aspx">菜根谭</a> <a href="http://so.gushiwen.org/guwen/book_77.aspx">水经注</a> <a href="http://so.gushiwen.org/guwen/book_3.aspx">孙子兵法</a> <a href="http://so.gushiwen.org/guwen/book_4.aspx">三十六计</a> <a href="http://so.gushiwen.org/guwen/book_8.aspx">资治通鉴</a> <a href="http://so.gushiwen.org/guwen/book_9.aspx">续资治通鉴</a> <a href="http://so.gushiwen.org/guwen/book_10.aspx">黄帝内经</a> <a href="http://so.gushiwen.org/guwen/book_12.aspx">本草纲目</a> <a href="http://so.gushiwen.org/guwen/book_13.aspx">了凡四训</a> <a href="http://so.gushiwen.org/guwen/book_14.aspx">梦溪笔谈</a> <a href="http://so.gushiwen.org/guwen/book_18.aspx">世说新语</a> <a href="http://so.gushiwen.org/guwen/book_38.aspx">天工开物</a> <a href="http://so.gushiwen.org/guwen/book_43.aspx">文心雕龙</a> <a href="http://so.gushiwen.org/guwen/book_44.aspx">吕氏春秋</a> <a href="http://so.gushiwen.org/guwen/book_46.aspx">孔子家语</a> <a href="http://so.gushiwen.org/guwen/book_47.aspx">颜氏家训</a> <a href="http://so.gushiwen.org/guwen/book_48.aspx">孙膑兵法</a> <a href="http://so.gushiwen.org/guwen/book_51.aspx">笑林广记</a> <a href="http://so.gushiwen.org/guwen/book_52.aspx">百战奇略</a> <a href="http://so.gushiwen.org/guwen/book_58.aspx">公孙龙子</a> <a href="http://so.gushiwen.org/guwen/book_61.aspx">黄帝四经</a> <a href="http://so.gushiwen.org/guwen/book_62.aspx">贞观政要</a> <a href="http://so.gushiwen.org/guwen/book_64.aspx">文昌孝经</a> <a href="http://so.gushiwen.org/guwen/book_65.aspx">六祖坛经</a> <a href="http://so.gushiwen.org/guwen/book_69.aspx">增广贤文</a> <a href="http://so.gushiwen.org/guwen/book_70.aspx">幼学琼林</a> <a href="http://so.gushiwen.org/guwen/book_50.aspx">搜神后记</a> <a href="http://so.gushiwen.org/guwen/book_72.aspx">容斋随笔</a> <a href="http://so.gushiwen.org/guwen/book_73.aspx">围炉夜话</a> <a href="http://so.gushiwen.org/guwen/book_79.aspx">农桑辑要</a> <a href="http://so.gushiwen.org/guwen/book_67.aspx">徐霞客游记</a> <a href="http://so.gushiwen.org/guwen/book_76.aspx">四十二章经</a> <a href="http://so.gushiwen.org/guwen/">更多>></a> </div> <img id="bg" src="main.jpg" alt="诗歌"> <div id="title"> <h1>人间词话七则</h1> <h2>王国维</h2> </div> <div id="content"> <p>有有我之境,有无我之境。“泪眼问花花不语,乱红飞过秋千去。”“可堪孤馆闭春寒,杜鹃声里斜阳暮。”有我之境也。“采菊东篱下,悠然见南山。”“寒波澹澹起,白鸟悠悠下。”无我之境也。有我之境,以我观物,故物我皆著我之色彩。无我之境,以物观物,故不知何者为我,何者为物。古人为词,写有我之境者为多,然未始不能写无我之境,此在豪杰之士能自树立耳。</p> <p>境非独谓景物也。喜怒哀乐,亦人心中之一境界。故能写真景物,真感情者,谓之有境界。否则谓之无境界。</p> <p>境界有大小,不以是而分优劣。“细雨鱼儿出,微风燕子斜”何遽不若“落日照大旗,马鸣风萧萧”。“宝帘闲挂小银钩”何遽不若“雾失楼台,月迷津渡”也。</p> <p>词至李后主而眼界始大,感慨遂深,遂变伶工之词而为士大夫之词。周介存置诸温韦之下,可为颠倒黑白矣。“自是人生长恨水长东”、“流水落花春去也,天上人间”,《金荃》《浣花》,能有此气象耶?</p> <p>古今之成大事业、大学问者,罔不经过三种之境界:“昨夜西风凋碧树。独上高楼,望尽天涯路。”此第一境界也。“衣带渐宽终不悔,为伊消得人憔悴。”此第二境界也。“众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。”此第三境界也。此等语皆非大词人不能道。然遽以此意解释诸词,恐为晏欧诸公所不许也。</p> <p>大家之作,其言情也必沁人心脾,其写景也必豁人耳目。其辞脱口而出,无矫揉妆束之态。以其所见者真,所知者深也。诗词皆然。持此以衡古今之作者,可无大误也。</p> <p>诗人对宇宙人生,须入乎其内,又须出乎其外。入乎其内,故能写之。出乎其外,故能观之。入乎其内,故有生气。出乎其外,故有高致。美成能入而不出。白石以降,于此二事皆未梦见。 </p> </div> </div> </body> </html>
样例2:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Layout1</title> <style> div#body { width: 800px; max-width: 800px; margin: 0 auto; border: blue solid thin; } p { border: blue solid thin; margin: 5px; padding: 5px; white-space: pre; overflow: hidden; } p#left { float: left; width: 210px; } p#main { float: left; width: 313px; } p#right { float: left; width: 210px; } p#footer { clear: both; } </style> </head> <body> <div id="body"> <p id="head">header header header header header header header header</p> <p id="left">left left left left left left left left left</p> <p id="main">main main main main main main main main main</p> <p id="right">right right right right right right right right right</p> <p id="footer">footer footer footer footer footer footer footer footer </p> </div> </body> </html>
样例3:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Layout2</title> <style> div#body { width: 800px; max-width: 800px; margin: 0 auto; border: blue solid thin; } p { border: blue solid thin; margin: 5px; padding: 5px; white-space: pre; overflow: hidden; } p#main { float: right; width: 540px; height: 100px; } p#left1 { width: 210px; } p#left2 { width: 210px; } p#footer { clear: both; } </style> </head> <body> <div id="body"> <p id="head">header header header header header header header header</p> <p id="main">main main main main main main main main main main main main main main main main main main</p> <p id="left1">left1 left1 left1 left1 left1 left1 left1 left1 left1</p> <p id="left2">left2 left2 left2 left2 left2 left2 left2 left2 left2</p> <p id="footer">footer footer footer footer footer footer footer footer </p> </div> </body> </html>
样例4:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Layout2</title> <style> div#body { width: 800px; max-width: 800px; margin: 0 auto; border: blue solid thin; } p { border: blue solid thin; margin: 5px; padding: 5px; white-space: pre; overflow: hidden; } p#main { float: right; width: 520px; height: 100px; } p#left1 { width: 105px; float: left; } p#left2 { width: 105px; float: left; } p#left3 { width: 230px; } p#footer { clear: both; } </style> </head> <body> <div id="body"> <p id="head">header header header header header header header header</p> <p id="main">main main main main main main main main main main main main main main main main main main</p> <div> <div> <p id="left1">left1 left1 left1 left1 left1 left1 left1 left1 left1</p> <p id="left2">left2 left2 left2 left2 left2 left2 left2 left2 left2</p> </div> <p id="left3">left3 left3 left3 left3 left3 left3 left3 left3 left3</p> </div> <p id="footer">footer footer footer footer footer footer footer footer </p> </div> </body> </html>