建议在Firefox或Chrome中测试,在模拟器中预览。
【示例】
-
CSS
body { background: #fff; color: #000; font-size: 0.875em; font-family: "新宋体", Arial, Helvetica, sans-serif; } article { position: relative; } h1, h2 { text-align: center; margin-bottom: 1em; } h2 { color: #666; text-decoration: underline; } h3 { font-family: "华文行楷"; font-size: 2.5em; float: right; writing-mode: tb-rl; /*上-下,右-左*/ } p { text-indent: 2em; line-height: 1.8em; margin-right: 3em; } p:first-of-type { text-indent: 0; } p:first-of-type:first-letter { font-size: 60px; font-family: "黑体"; float: left; margin-right: 6px; padding: 6px; font-weight: bold; line-height: 1em; background: #000; color: #fff; }
-
HTML
<article> <h1>《人间词话》</h1> <h2>王国维</h2> <h3>人生三境界</h3> <p>古今之成大事业、大学问者,必经过三种之境界:"昨夜西风凋碧树。独上高楼,望断天涯路。"此第一境也。"衣带渐宽终不悔,为伊消得人憔悴。"此第二境也。"众里寻他千百度,蓦然回首,那人却在灯火阑珊处。"此第三境也。此等语皆非大词人不能道。然遽以此意解释诸词,恐为晏欧诸公所不许也。</p> <p>笔者认为,凡人都可以从容地做到第二境界,但要想逾越它却不是那么简单。成功人士果敢坚忍,不屈不挠,造就了他们不同于凡人的成功。他们逾越的不仅仅是人生的境界,更是他们自我的极限。成功后回望来路的人,才会明白另解这三重境界的话:看山是山,看水是水;看山不是山,看水不是水;看山还是山,看水还是水。</p> </article>