【项目目标】
• 灵活运用弹性容器进行页面布局。
【项目内容】
- 利用flex 标签完成杜甫页面的弹性布局。
- 练习CSS 常用属性的使用。
【项目步骤】
本部分素材文件是项目六的结果文件，目的是利用 flex 布局完成杜甫个人成就页面的弹
性布局。
1.添加图片
Html部分中存在4个空的类名为"textBox"的div，在它们内部添加 img 标签。从上到下依次添加"images"文件夹中的“textBoxlmgl.jpg"textBoxlmg2.jpg"textBoxlmg3jpg”和
"textBoxlmg4.jpg".
2. guidance 部分
（1） ＜guidance>中的div 部分：添加新内容，外边距设置为 30px 属性值为 “auto”；
（2） nav2 中的ul部分：
1.display 设置为 “flex"；
2.宽度设置为450px；
3。外边距属性值为 “auto”；
4.1.justify-content 设置为：space-between；
背景颜色设置为：#c7d2d4
（3） nav2 中的ul li 部分：
- 宽度设置为：150px；
- 2高度设置为：50px；
- 3行高设置为：50px；
- list-style-position 设置为：inside
（4） nav2 中的ul li 部分在鼠标指针放上后：
1.背景颜色设置为：#134857；
2.前景色颜色
以上部分完成后，效果如项目图10-1所示：
项目图10-1guidance部分效果图
3. main 部分的初步设置
（1） maln 部分的编写：
1.display 设置为：flex；
2.flex-direction 设置为：column；
3.justify-content 设置为：space-around；
（2） 对section 中的h2进行进一步编写：
1.宽度设置为：110px；高度设置为：110px；
2.外边距设置为0属性值为 “auto”
3.背景图片设置內 “images” 文件夹中的 “h2BG.png”图片设置为不重复
4.background-size 设置为“110px”
5.文字对齐方式设置为：居中对齐、行高设置为：100px；
（3） 同时对类为 “text”与类为 “textBox”的样式进行设置：
1.display 设置为：flex；
2.flex-direction 设置为：row；
3.flex-wrap 设置为：wrap；
4.justify-content 设置为：space-between；
（4） 对类为 “textBox” 样式进行设置：
- 边框样式设置为：10px solid；
- 边框背景设置为："images” 文件夹中的“10-border.png” 文件
- 边框向内偏移设置为：10%10%10%10%；
- 外边距设置为：10px0；
（5） 对类为 “textBox” 样式中的 “p”标签进行进一步设置：align-self设置为"center"以上部分完成后，效果如项目图10-2所示：
项目图10-2main初步设置效果图
4.main部分的弹性设置
将此处设计为弹性布局。
- section:nth-of-type（1）.text.textBox:nth-of-type（1）的宽度设置为：60%。
- section:nth-of-type（1）.text.textBox:nth-of-type（2）的宽度设置为：35%
- section:nth-of-type（1）.text.textBox:nth-of-type（3） img 的宽度没置：360px
- section:nth-of-type(1) text .textBox:nth-of-type(4) 的宽度设置为: 65%.
- section:nth-of-type(2) text .textBox:nth-of-type(1) 的宽度设置为: 35%.
- section:nth-of-type(2) text .textBox:nth-of-type(2) 的宽度设置为: 35%.
- section:nth-of-type(2) text textBoxinth-of-type(3) img 的宽度设置为: 250px.
- section:nth-of-type(3) .text .textBox:nth-of-type(1) 的宽度设置为: 60%
- section:nth-of-type(3) text .textBoxinth-of-type(2) img 的宽度设置为: 420px.
- section:nth-of-type（3）.text.textBox:nth-of-type（3） img 的宽度设置为：420px
- section:nth-of-type（3）.text .textBox:nth-of-type（4）的宽度设置为：60%。
以上部分完成后，效果如项目图10-3所示：
项目图10-3页面整体效果图
未修改的网页源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>杜甫-个人成就</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/dufu-achievement.css">
</head>
<style>
body{
background-image: url(./images/boat.png);
background-position: 95% 95%;
background-repeat: no-repeat;
}
#top{
width: 100%;
height: 50px;
background: url("./images/repeatBG.png") repeat-x;
}
#mount{
width: 100%;
}
h3{
color: #254E2D;
}
.text{
overflow-wrap:break-word;
text-indent: 2em;
}
</style>
<body>
<header>
<nav id="nav1">
<img src="./images/logo.png">
<ul>
<li><a href="#">首页</a></li>
<li>李白</li>
<li>杜甫</li>
<li>白居易</li>
<li><a href="#">调查问卷</a></li>
</ul>
</nav>
</header>
<div id="top"></div>
<div id="guidance">
<img id="mount" src="./images/mount.png" >
<div>
<h1>诗圣杜甫</h1>
<h3 style="color: #254E2D;">古今诗人众吴,而子美独为首者,岂非以其流落饥寒,终身不用,而一饭未尝忘君也欤!</h3>
</div>
<nav id="nav2">
<ul>
<li><a href="#review">生平</a></li>
<li><a href="#works">作品</a></li>
<li><a href="#achievement">成就</a></li>
</ul>
</nav>
</div>
<main>
<section id="review"><h2>生平</h2>
<div class="text">
<div class="textBox">
<p> 祖籍襄阳，生于巩县(今河南巩义)。因居长安时期，曾一度住在城南少陵附近，自称少陵野老。肃宗至德(756~758)间,曾任左拾遗;在成都时被荐为节度参谋、检校工部员外郎，故后世又称他为杜少陵、杜拾遗、杜工部。</p>
<p>杜甫出生于“奉儒守官”的家庭，先祖世代为官，祖父杜审言是武后时著名诗人，官至膳部员外郎。父亲杜闲，曾任兖州司马、奉天县令。杜甫早慧，7岁能作诗，十四五岁时，即与文坛名士交往，受到他们的称许。19岁出游郇瑕（今山西临猗西南)。20岁，漫游吴越，历时数年。玄宗开元二十三年 (735)，在洛阳参加进士考试，未及第。其父杜闲时任兖州司马，遂赴兖州省亲，开始齐赵之游。玄宗天宝三载(744)四月，在洛阳与李白相遇。天宝五载，杜甫西去长安，结束了“放荡齐赵间，裘马颇清狂”（《壮游》）的漫游生活。</p>
</div>
<div class="textBox">
<p>天宝六载，玄宗诏天下通一艺者到长安应试，杜甫也参加了考试。但由于李林甫阴谋弄权，设置障碍，应试者全部落选。天宝十四载，才被任命为河西尉，杜甫无意就任，改任右卫率府兵曹参军。同年十一月，安史之乱爆发。翌年七月，杜甫已搬家到鄜州羌村（今陕西富县南）避难，不幸为叛军所俘，解送长安。至德二载(757)四月，杜甫冒险逃出长安，奔赴肃宗临时驻地凤翔，受任为左拾遗。闰八月，回鄜州省家。乾元元年（758）六月，贬华州司功参军，从此永远离开朝廷。</p>
</div>
<div class="textBox">
</div>
<div class="textBox">
<p>同年冬，杜甫由华州赴洛阳，七月，弃官去秦州，开始了“漂泊西南天地间”的人生苦旅。十月，赴同谷。年底，由同谷抵成都。上元元年(760）春，在成都西郊浣花溪畔筑草堂居住。代宗宝应元年(762)七月，杜甫辗转于绵州、梓州、阆州、射洪一带，靠当地官员资助为生。永泰元年 (765)四月，杜甫于五月离开成都乘舟南下，经嘉州、戎州、渝州、忠州至云安，因病不能前进，直到次年暮春病势减轻，才迁往夔州。居夔州近两年，写诗400余首。杜甫在大历三年(768)正月起程出三峡，经江陵、公安，暮冬抵岳阳。之后两年，杜甫居无定所，往来于岳阳、长沙、衡州、未阳之间。五年冬，卒于湘江舟中，时年五十九。杜甫死后，灵柩停厝在岳阳，43年后，即宪宗元和八年(813)，才由他的孙子杜嗣业移葬于河南首阳山下。</p>
</div>
</div>
</section>
<section id="works"><h2>作品</h2>
<div class="text">
<div class="textBox">
<p>杜甫作品流传下来的，有诗1400余首，文、赋近30篇。杜甫是中国古典诗歌成就的集大成者。在杜甫那里，诗是其情感抒发的最好载体，其表现功能得到了淋漓尽致的发挥。</p>
<p>杜甫生当唐王朝由盛而衰的历史转折时期，他的作品广泛而深刻地反映了安史之乱前后唐王朝社会生活的巨大变化，是那个时代的忠实记录，故而他的诗被誉为“诗史”。杜诗大部分涉及玄宗、肃宗、代宗三朝有关政治、经济、军事以及人民生活的重大问题。杜甫中年时期的两篇杰作，《自京赴奉先县咏怀五百字》和《北征》，向被誉为“古今绝唱”。诗里有抒情，有叙事，有说理，有对自然的观察，有对社会矛盾的揭露，有内心的冲突，有政治的抱负和主张，有个人的遭遇和家庭的不幸，有国家与人民的灾难，以及对于未来的瞻望。这两首长诗内容包孕丰富，感情波澜起伏，语言纵横驰骋，反映了作者对自然和社会现象的敏锐观察和感应，是诗人生活和内心的自述，也是时代和社会的写真。</p>
</div>
<div class="textBox">
<p>杜甫写了大量的时事政治诗，或陈述政见，如《洗兵马》;或揭发统治者的荒淫残暴，如《丽人行》;或寓言讽兴，如《凤凰台》;或对穷苦人民表示同情关怀，如《茅屋为秋风所破歌》。他歌咏自然的诗，往往既联系自己，也联系时事。在写景和抒情时，很少离开现实，随时随地都想到他所处的干戈扰攘、国困民疲的时代。如困居沦陷的长安时写的《春望》、入蜀时写的《剑门》，最具代表性。杜甫也写了一些歌咏绘画、音乐、建筑、舞蹈、用具和农业生产的诗，反映了唐代文化的各个方面。杜甫怀念家人、朋友的诗，大都缠绵排恻，一往情深。还有另一类作品，如《客至》《燕子来舟中作》《小寒食舟中作》等，诗歌意境雍容闲澹，情致委婉，不迫不露，与他后期寓居成都草堂期间所写的《屏迹》《田舍》《徐步》《水槛遣心》《后游》《春夜喜雨》等诗合观，可以看出其体物之细微，描写之生动，显示出作者善于表达日常生活中某种体察入微的独特感受。</p>
</div>
<div class="textBox">
</div>
</div>
</section>
<section id="achievement"><h2>成就</h2>
<div class="text">
<div class="textBox">
<p>杜甫被尊为“诗圣”。他认为“诗是吾家事”（《宗武生日》)，对诗有着一种超人的执着精神，“为人性僻耽佳句，语不惊人死不休”(《江上值水如海势聊短述》)。杜甫不仅空前扩大了诗的题材和体裁范围，达到了无事不可言、无意不可入的程度，而且使诗歌艺术达到了出神入化、登峰造极的境地。中国诗歌到杜甫为一大变，清代陈廷焯评论说:“诗至杜陵而圣，亦诗至杜陵而变。…...普人谓杜陵为诗中之秦始皇，亦是快论。”(《白雨斋词话》卷七)“与古为化，化而能新”，可以概括杜甫对中国古典诗歌的贡献。宋初王禹俑《日长简仲咸》诗云，“子美集开诗世界”，表达出杜甫作为继往开来的伟大诗人的地位。</p>
</div>
<div class="textBox">
</div>
<div class="textBox">
</div>
<div class="textBox">
<p>杜甫的遗文，今存辞赋、赞、序、表、状、记、述、碑、志、祭文等共20多篇，成就虽不及其诗，但像《雕赋》《祭故相国清河房公文》以及《八哀》《剑器行》等诗的序言，兼具学问与文采，亦颇可观。</p>
<p>杜甫对后世文学产生了广泛而深远的影响。可以说，杜甫之后，中国诗坛上的杰出诗人，几乎无不受到他的沾溉和影响。唐元镇、白居易、张籍、王建、刘禹锡、韩愈、李贺、李商隐、杜牧、韩屋、韦庄，宋王安石、苏轼、黄庭坚、陆游，金元好问,明李东阳，清钱谦益等，都极为推尊杜甫，学习杜甫。他的诗歌，堪称中国古典诗歌的范本;他的人格，堪称中华民族文人品格的楷模。</p>
</div>
</div>
</section>
</main>
<footer>
<nav id="nav3">
<ul>
<li><a href="#"> 帮助中心 |</li>
<li> <a href="mailto:#"> 联系我们 </a>|</li>
<li><a href="#"> 关于我们 </a>|</li>
<li><a href="#"> 隐私声明 </a>|</li>
<li><a href="#"> 意见反馈 </a></li>
</ul>
</nav>
<address><a href="https://blog.csdn.net/Chinatown666?spm=1000.2115.3001.5343">Copyright © 书剑风雪的CSDN</a></address>
</footer>
</body>
</html>