• html5&css&js代码 007 文章排版 颜真卿《述张长史笔法十二意》


    这段代码定义了一个古文展示页面的结构和样式,同时本文内容也是书法爱好者的珍贵资料。

    一、代码

    DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            /* 通用样式 */
            body {
                background-color: #666666;
                font-family: "宋体", sans-serif;
                line-height: 1.6;
                text-align: left;
                margin: 1px;
                padding: 2rem;
            }
    
            /* 文章标题样式 */
            .title {
                text-align: center;
                font-size: 3rem;
                font-weight: bold;
                margin-bottom: 1rem;
                color: #eeeeee;
            }
    
            /* 正文样式 */
            article.zw {
                font-family: "宋体", sans-serif;
                font-size: 1.2rem;
                text-align: left;
                text-indent: 2em; /* 首行缩进2个字符 */
                color: #dddddd;
                margin-left: 20%;
                margin-right: 20%;
            }
    
            /*作者样式*/
            article.zz {
                font-family: "仿宋", sans-serif;
                font-size: 1.1rem;
                text-align: left;
                text-indent: 2em; /* 首行缩进2个字符 */
                color: #00ff00;
                margin-left: 20%;
                margin-right: 20%;
            }
    
            /*译文样式*/
            article.yw {
                font-family: "楷体", sans-serif;
                font-size: 1.2rem;
                text-align: left;
                text-indent: 2em; /* 首行缩进2个字符 */
                color: #dddddd;
                margin-left: 20%;
                margin-right: 20%;
            }
    
            /* 正文段落样式 */
            p {
                text-indent: 2em;
            }
        style>
        <title>颜真卿《述张长史笔法十二意》title>
    head>
    <body>
    <div class="container">
        <h1 class="title">颜真卿《述张长史笔法十二意》h1>
        <article class="zw">
            <h2>原文h2>
            <p>
                予罢秩醴泉,特诣东洛,访金吾长史张公‍(‍旭),请师笔法。长史其时在裴儆宅憩止,已一年矣。众有师张公求笔法,或有得者,皆曰神妙。仆顷在长安师事张公,竟不蒙传授,使知是道也。人或问笔法者,张公皆大笑,而对之便草书,或三纸,或五纸,皆乘兴而散,竟不复有得其言者。予自再游洛下,相见眷然不替。仆因问裴儆:“足下师敬长史,有何所得?”曰:“但得书绢素屏数本,亦尝论请笔法,惟言倍加工学临写,书法当自悟耳。”
            p>
            <p>
                仆自停裴儆宅,月余,因与裴儆从长史言话散,却回长史前请曰:“仆既承九丈奖诱,日月滋深,夙夜工勤,耽溺翰墨,虽四远流扬,自未为稳,倘得闻笔法要诀,则终为师学,以冀至於能妙,岂任感戴之诚也!”长史良久不言,乃左右盼视,怫然而起。仆乃从行归於东竹林院小堂,张公乃当堂踞坐床,而命仆居乎小榻,乃曰:“笔法玄微,难妄传授。非志士高人,讵可言其要妙?书之求能,且攻真草。今以授子,可须思妙。”
            p>
            <p>
                乃曰:“夫平谓横,子知之乎?”仆思以对曰:“尝闻长史九丈令每为一平画,皆须纵横有象。此岂非其谓乎?”长史乃笑曰:“然。”
            p>
            <p>
                又曰:“夫直谓纵,子知之乎?”曰:“岂不谓直者必纵之不令邪曲之谓乎?”长史曰:“然。”
            p>
            <p>
                又曰:“均谓间,子知之乎?”曰:“尝蒙示以间不容光之谓乎?”长史曰:“然。”
            p>
            <p>
                又曰:“密谓际,子知之乎?”曰:“岂不谓筑锋下笔,皆令宛成,不令其疏之谓乎?”长史曰:“然。”
            p>
            <p>
                又曰:“锋谓末,子知之乎?”曰:“岂不谓末以成画,使其锋健之谓乎?”长史曰:“然。”
            p>
            <p>
                又曰:“力谓骨体,子知之乎?”曰:“岂不谓趯笔则点画皆有筋骨,字体自然雄媚之谓乎?”长史曰:“然。”
            p>
            <p>
                又曰:“转轻谓曲折,子知之乎?”曰:“岂不谓钩笔转角,折锋轻过,亦谓转角为暗过之谓乎?”长史曰:“然。”
            p>
            <p>
                又曰:“决谓牵掣,子知之乎?”曰:“岂不谓牵掣为撆,锐意挫锋,使不怯滞,令险峻而成,以谓之决乎?”长史曰:“然。”
            p>
            <p>
                又曰:“补谓不足,子知之乎?”曰:“尝闻於长史,岂不谓结构点画或有失趣者,则以别点画旁救之谓乎?”长史曰:“然。”
            p>
            <p>
                又曰:“损谓有余,子知之乎?”曰:“尝蒙所授,岂不谓趣长笔短,长使意气有余,画若不足之谓乎?”曰:“然。”
            p>
            <p>
                又曰:“巧谓布置,子知之乎?”曰:“岂不谓欲书先预想字形布置,令其平稳,或意外生体,令有異势,是之谓巧乎?”曰:“然。”
            p>
            <p>
                又曰:“称谓大小,子知之乎?”曰:“尝闻教授,岂不谓大字促之令小,小字展之使大,兼令茂密,所以为称乎?”长史曰:“然,子言颇皆近之矣,工若精勤,悉自当为妙笔。”
            p>
            <p>
                真卿前请曰:“幸蒙长史九丈传授用笔之法,敢问攻书之妙,何如得齐於古人?”
            p>
            <p>
                张公曰:“妙在执笔,令其圆畅,勿使拘挛。其次识法,谓口传手授之诀,勿使无度,所谓笔法也。其次在於布置,不慢不越,巧使合宜。其次纸笔精佳。其次变化适怀,纵舍掣夺,咸有规矩。五者备矣,然后能齐於古人。”
            p>
            <p>
                曰:“敢问长史神用执笔之理,可得闻乎?”
            p>
            <p>
                长史曰:“予传授笔法,得之於老舅彦远。”
            p>
            <p>
                曰:“吾昔日学书,虽功深,奈何迹不至殊妙。后问於褚河南。”
            p>
            <p>
                曰:“用笔当须如印印泥。”思而不悟,后於江岛,遇见沙平地静,令人意悦欲书。乃偶以利锋画而书之,其劲险之状,明利媚好。自兹乃悟用笔如锥画沙,使其藏锋,画乃沉着。当其用笔,常欲使其透过纸背,此功成之极矣。真草用笔,悉如画沙,点画净媚,则其道至矣。如此则其迹可久,自然齐於古人。但思此理,以专想功用,故其点画不得妄动。子其书绅。
            p>
            <p>
                予遂铭谢,逡巡再拜而退。自此得攻书之妙,於兹五年,真草自知可成矣。
            p>
    
        article>
        <article class="zz">
            <h2>作者介绍h2>
            <p>
                颜真卿(709—785)字清臣,琅邪临沂(山东临沂)人,终年77岁。是中唐时期的书法创新代表人物。楷书端庄雄伟,气势开张。行书劲朗舒和,神彩飞动。他的书法,既承继了以往书风的气韵法度,又不为古法所束缚,突破了唐初的墨守成规,书法自成一格,后世称其为“颜体”。宋·欧阳修评论说:“斯人忠义出于天性,故其字画刚劲独立,不袭前迹,挺然奇伟,有似其为人。”宋·朱长文《续书断》中列其书法为神品。并评说:“点如坠石,画如夏云,钩如屈金,戈如发弩,纵横有象,低昂有态,自羲、献以来,未有如公者也。”他的正书,以《颜氏家庙碑》为代表;摩崖大书,气势磅礴,以《大唐中兴颂》最著;表现冲和淡远之韵致者,则推《李玄靖碑》。行草遒劲秀挺,古意盎然,以《祭侄稿》为第一。书法史上唯一能与大书法家王羲之承先启后、交相辉映的,就是颜真卿了。他生于唐代楷书大成之际,因以楷书为多兼有行草。
            p>
            <p>
                《述张长史书法十二意》一文,首述请教张(旭)长史传授笔法经过,次述张长史以问答方式传授笔法,综述古今书法异同,颇有参考价值。
            p>
        article>
        <article class="yw">
            <h2>参考译文h2>
            <p>
                我罢官醴泉,特前往洛阳,拜访金吾长史张公旭、请求学习笔法。长史当时在裴儆家休息,已一年了。许多人师事张公询问笔法,或有得到的,都说神妙。我过去在长安二年,拜张公为师,竟未承蒙传授,使明白此道。人有问笔法的,张公皆大笑,而对他们便作草书,或者三纸或者五纸,皆乘兴致而分发,竟不复有得到他的言语的。我虽然再于洛阳相见,顾念不改变。我因而问裴儆:“足下师事张长史,有何所得?”回答说:“只得到书写的白绢屏风数本。也曾论辩请求笔法,只说加倍工夫学习摹写,书法理当自己理解了。”
            p>
            <p>
                我由于停留裴家一月余的日子,因同裴儆随从长史谈话分散后,就回去向长史请求说:“既已承蒙老丈劝勉诱导,日月加深,朝夕攻学勤奋,沉湎于翰墨,虽然四方流传播扬名声,自以为未为稳当。倘得闻听笔法要诀,就终久作为师从学习,以希望达到擅长书法的妙境,当以恩相亲信而感激爱戴之真诚。”长史很久不言语,乃左右顾盼,神情严肃而起。我就随行返回东竹林院小堂,张公乃当场盘屈床上而坐,叫我坐在小榻上,才说:“笔法深微玄妙,难以轻易传授。不是志士高人,岂可与谈精深微妙的义理呀!书法之求得擅长,应当攻学真书和草书。今天即传授给您,可要思考精妙。”
            p>
            <p>
                又道:“这平画意思指横,您知道它吗?”我思考后即应答道:“曾听长史老丈叫每作一平画,皆须多有形象。此岂不是这个意思吗?”长史又笑道:“像是这样。”
            p>
            <p>
                又道:“这直画意思指纵,您知道它吗?”应答道:“岂不是叫直画必须纵逸它不听从使令,不正直的意思吗?”一长史道:“像是这样。”
            p>
            <p>
                又道:“笔画安排停匀的意思指问隙,您知道它吗?”应答道:“曾承蒙教导使间不容发的意思吗?”长史道:“像是这样。”
            p>
            <p>
                又道:“紧密的意思指笔画出人之际,您知道它吗?”应答道:“岂不是叫筑锋下笔,皆使宛转完成,不使笔画出人疏松的意思吗?”长史道:“像是这样。”
            p>
            <p>
                又道:“用笔锋的意思指笔画的端尾,您知道它吗?”应答道:“岂不是叫笔画的端尾以完成笔画,使其笔锋雄健的意思吗?”长史道:“像是这样。”
            p>
            <p>
                又道:“笔力的意思指刚劲雄健的书风,您知道它吗?”应答道:“岂不是使超笔点画都有气势笔力,字体自然雄健媚好的意思吗?”长史道:“像是这样。”
            p>
            <p>
                又道:“转角轻过意思指屈折,您知道它吗?”应答道:“岂不是钩笔转角,折锋轻过,也叫转角为暗过的意思吗?”长史道:“像是这样。”
            p>
            <p>
                又道:“决的意思指牵掣,您知道它吗?”应答道:“岂不是为牵引为控制,决意用挫锋,使不要动作迟缓,令险峻而成,因而叫它决吗?”长史道:“像是这样。”
            p>
            <p>
                又道:“弥补因为不足,您知道它吗?”应答道:“岂不是安排点画或有失去意趣的,就用别的点画从旁补救的意思吗?”长史道:“像是这样。”
            p>
            <p>
                又道:“减损因为有多徐,您知道它吗?”应答道:“岂不是情趣长笔画短,常使笔意气势有访,点画似若不足的意思吗?”道:“像是这样。”
            p>
            <p>
                又道:“巧的意思作书先预想字形布置指布置,您知道它吗?”应答道:“岂不是要,令其平稳,有愈外字体,令有不同的形势,这称之巧吗?应答道:“像是这样。”
            p>
            <p>
                又道:“均称因为字有大小,您知道它吗?”应答道:“岂不是大字缩短令它小,小字舒展使它大,兼使茂密,所以为匀称吗?”长使道:“像是这样。”
            p>
            <p>
                您说的颇都接近它的意思。这书艺道理的妙处,鲜明呀它有旨趣,字外的奇妙,语言所不能穷尽。世上学书的,推尊与效法二王,元常高超的书迹,看都未曾看一眼,书法的妙趣,于是乎就完全相同。献之称他“古肥”,张旭亦称之“今瘦”。但今既然不同,肥瘦的标准颇相反,如果亲自观着阅览,有不同众人的说法。张芝、钟繇的技艺情趣,精微细致几乎相同,本源本来机微玄妙,肥瘦古今,岂易使人明理达意!真迹虽然很少,可得而推断。逸少到了学习钟繇,笔势巧字形密;到他自己立意作书,笔意疏朗字形舒缓。譬如讲楚语的人学习中原话,不能没有楚音。讲过头话不稳妥,不能作为确论。又子敬之不及逸少,犹如逸少之不及元常;学子敬如画虎,又议论学元常如画龙。我虽不熟习,久懂得它的道理,不熟习,心里爱慕它呀。您倘有同样的认识,认识就长了一大片。你要自勉,攻学专精,勤奋了解,自然应当能妙了。”
            p>
            <p>
                真卿前去询问道:“幸蒙长史传授笔法,冒昧问擅长书法之妙,怎样得以取齐于古人?”张公道:“妙在执笔,令得以旋转流畅,不使拘泥.其次了解法则,说的是口传手授的诀窍,不使不依法度,所说的作书的技法了。其次在于安排,不要无节制、无次序超越,巧妙使合宜.其次纸笔精美佳丽。其次变通适合心意,纵放控制,都有规矩。五者具备了,然后才能取齐于古人。”
                “冒味问执笔的道理,可得以传告吗?”。
            p>
            <p>
                长史道:“我传授的笔法,得之于老舅父彦远。”又道:“我过去学书法,虽然功夫深厚,奈何书迹不能达到特妙。后来听到褚河南说:用笔必须如印印泥。思考而未领悟,后在江岛碰到沙平地净,令人意悦想写字,就偶然用利锋画而书写它、那强劲险峻的形状,明利媚好。从此乃领悟用笔如锥画沙,使其藏锋,笔画才沉厚而不轻浮。当用笔时,常欲使笔透过纸背,此功业成就达到最高程度了。真草书用笔,都如画沙,点画明媚,那用笔之道达到了。如此那书迹可以久存,自然取齐于古人。只是思考此道理,在专一想象技艺和使用,所以那点画不得随便书写。您应当牢记这些话!”
            p>
            <p>
                我于是深切感谢,恭顺的一再叩拜而退出。从此获得攻学书法的妙道,到此五年,真草书自知应当成功了。
            p>
        article>
    div>
    body>
    <footer style="
                text-align: right;
                font-size: 1.5rem;
                font-weight: bold;
                margin-right: 22%;
                margin-bottom: 5rem;
                color: #ffcc00;
            ">
        HTML+CSS+JavaScript编程配套代码 作者:明月看潮生
    footer>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215

    二、解释

    这段HTML代码定义了一个古文展示页面的结构和样式,具体内容如下:

    文档声明:

    指定这是遵循 HTML5 标准的文档。
    HTML根元素: 表明网页使用的语言是简体中文。

    头部(head)部分:

    定义了网页的字符编码为 UTF-8。
    设置视口以适应移动设备,初始缩放比例为 1:1。