样例1：
<!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：
<!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：
<!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：
<!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>
时间： 2024-12-21 04:20:27