“21天好习惯”第一期-11

（用CSS写个人物介绍网页一）

今天就发个HTML的部分明天发CSS。 

<!-- 分成两个板块 -->


		<!-- 第一个板块   左侧 放导航栏 -->
		<div id="left">
			<div>
				<div class="touxiang">
					<!-- 类名  头像（touxiang）的拼音 -->
					
					
					<!-- 头像旋转 -->
					<img src="./img/touxiang.jpg">
				</div>
				<h2>曹操</h2>		<!-- 曹操两个字会一直发光 -->
				<div class="audio">
					<audio src="img/beijingyinyue.mp3" controls="controls" autoplay="autoplay">			<!-- 音频  置于右下角 （为了方便视频，音频，图片都放在img文件夹里） -->
						当前浏览器不支持audio
					</audio>
				</div>
			</div>



			<!-- 导航栏 -->
			<div id="nav">
				<ul>
					<li><a href="#huanyi">			<!-- 描点链接---欢迎界面 -->
							<div><span
									class="iconfont">&#xe7b9;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎
							</div>
						</a>
					</li>
					<li><a href="#guanyuta">		<!-- 描点链接---关于他界面 -->
							<div><span
									class="iconfont">&#xe678;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关于他
							</div>
						</a>
					</li>
					<li><a href="#tadetuji">		<!-- 描点链接---他的图集界面 -->
							<div><span
									class="iconfont">&#xe7f6;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;他的图集
							</div>
						</a>
					</li>
					<li><a href="#lianxita">		<!-- 描点链接---联系他界面 -->
							<div><span
									class="iconfont">&#xe617;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系他
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div id="tubiao">
				<!-- 运用了字体图标  链接了部分常用浏览器为用户了解更多提供方便
				不过这里没有添加链接只是用  #  代替 -->
				<ul>
					<li><span class="iconfont"><a href="#">&#xe63f;</a></span></li>
					<li><span class="iconfont"><a href="#">&#xe6cb;</a></span></li>
					<li><span class="iconfont"><a href="#">&#xe72e;</a></span></li>
					<li><span class="iconfont"><a href="#">&#xe64a;</a></span></li>
					<li><span class="iconfont"><a href="#">&#xe616;</a></span></li>
				</ul>
			</div>
		</div>

		<!-- 第二个板块   右侧  写网页的主要内容------介绍曹操 -->
		<div id="right">
			<div id="huanyi"></div> <!-- id名 欢迎的拼音[但是打的时候漏打了]（huanyi） -->
			<div id="guanyuta">
				<!-- id名   关于他的拼音（guanyuta） -->
				<h3>他的生平</h3>
				<div class="zaonian">
					<!-- 类名 早年 的拼音 -->
					<h4>早年经历</h4>
					<!-- 类名 介绍 的拼音 -->
					<div class="jieshao jieshao1">
						<p>曹操出生在宦官世家，《三国志》称其为汉相曹参之后，曹操的父亲曹嵩是宦官曹腾的养子，曹腾历侍四代皇帝，颇有名望。汉桓帝时，封为费亭侯，曹嵩继承了曹腾的侯爵，在汉灵帝时官至太尉。</p>
						<p>年轻时期曹操机智警敏，有随机权衡应变的能力，而且任性好侠、放荡不羁，不修品行，不研究学业，所以当时的人不认为他有什么特别的才能，只有梁国的桥玄和南阳的何颙认为他不平凡，桥玄对曹操说：“天下将乱，非命世之才不能济也，能安之者，其在君乎？”
							南阳何颙对他说：“汉室将亡，安天下者，必此人也！” 南阳的许劭以知人著称，他也曾对曹操说过：“君清平之奸贼，乱世之英雄”。</p>
						<p>曹操早年就表现出对武艺的爱好与才能，博览群书，尤其喜欢兵法，曾抄录古代诸家兵法韬略，还有注释《孙子兵法》的《魏武注孙子》著作传世。这些为他后来的军事生涯打下了稳健的基础。</p>
					</div>
					<div class="jieshao jieshao2">
						<img src="img/jieshao.jpg">
					</div>
				</div>
				<!-- 类名 暂露头角 的拼音 -->
				<div class="zanlutoujiao">
					<h4>崭露头角</h4>
					<div>
						<img src="img/zanlutoujiao.jpg">
						<p>熹平三年（174年），曹操被举为孝廉，入京都洛阳为郎。不久，被任命为洛阳北部尉。洛阳为东汉都城，是皇亲贵戚聚居之地，很难治理。曹操一到职，就申明禁令、严肃法纪，造五色大棒十余根，悬于衙门左右，“有犯禁者，皆棒杀之”。皇帝宠幸的宦官蹇硕的叔父违禁夜行，曹操毫不留情，将蹇硕的叔父用五色棒处死。于是，“京师敛迹，无敢犯者”。曹操也因此得罪了一些当朝权贵，碍于其父曹嵩的关系，明升暗降，曹操被调任顿丘（今清丰县）令。
						</p>
						<p>光和元年（178年），曹操因堂妹夫濦强侯宋奇被宦官诛杀，受到牵连，被免去官职。其后，在洛阳无事可做，回到家乡谯县闲居。</p>
						<p>光和三年（180年），曹操又被朝廷征召，任命为议郎。此前，大将军窦武、太傅陈蕃谋划诛杀宦官，不料其事未济反为宦官所害。曹操上书陈述窦武等人为官正直而遭陷害，致使奸邪之徒满朝，而忠良之人却得不到重用的情形，言辞恳切，但没有被汉灵帝采纳。尔后，曹操又多次上书进谏，虽偶有成效，但东汉朝政日益腐败，曹操知道无法匡正。
						</p>
						<p>中平元年（184年），黄巾起义爆发，曹操被拜为骑都尉，受命与皇甫嵩等人合军进攻颍川的黄巾军，结果大破黄巾军，斩首数万级。随之迁为济南相。济南相任内，曹操治事如初。济南国（今山东省济南市）有县十余个，各县长吏多依附贵势，贪赃枉法，无所顾忌。曹操之前历任国相皆置之不问。曹操到职，大力整饬，一下奏免十分之八的长吏，济南震动，贪官污吏纷纷逃窜。“政教大行，一郡清平”。
						</p>
						<p>当时正是东汉政治极度黑暗之时，甚至有了买官制度。朝廷徵还其为东郡太守，拜为议郎，曹操不肯迎合权贵，遂托病回归乡里，春夏读书，秋冬弋猎，暂时隐居了。</p>
						<p>当时天下纷乱，先是发生了冀州刺史王芬联合南阳许攸、沛国周旌等地方豪强，谋划废黜灵帝立合肥侯的事件。王芬等人曾希望曹操加入他们，但被曹操拒绝，后来王芬事败自杀。接着，又有西北金城郡（今兰州市）的边章、韩遂杀死刺史和太守，率兵十余万反叛朝廷。
						</p>
						<p>中平五年（188年），汉灵帝为巩固统治，设置西园八校尉，曹操因其家世被任命为八校尉中的典军校尉。</p>
					</div>
				</div>
				<!-- 类名 位极人臣 的拼音 -->
				<div class="weijirenchen">
					<h4>位极人臣</h4>
					<p>建安十七年（212年），汉献帝准许曹操“参拜不名、剑履上殿”，如汉丞相萧何故事。</p>
					<p>建安十八年（213年），曹操起兵号称四十万，亲自南征孙权。次年正月，曹军进至濡须口（今安徽巢县东南），攻破孙权设在江北的营寨，生擒其将公孙阳。孙权亲率军七万，前至濡须口抵御曹军。两军相持月余，曹操的水军作战失利。由于春雨瓢泼、江水上涨，曹操见难以取胜，遂撤军北还。
					</p>
					<p>同年五月，复《禹贡》九州。汉献帝册封曹操为魏公，加九锡、建魏国，定国都于邺城。魏国拥有冀州十郡之地，置丞相、太尉、大将军等百官。</p>
					<p>建安二十一年（216年）四月，汉献帝册封曹操为魏王，邑三万户，位在诸侯王上，奏事不称臣，受诏不拜，以天子旒冕、车服、旌旗、礼乐郊祀天地，出入得称警跸，宗庙、祖、腊皆如汉制，国都邺城。王子皆为列侯。曹操名义虽非天子，但实际已经有天子之实。
					</p>
					<p>建安二十二年（217年）冬十月，汉献帝又赐予曹操王冕十有二旒，乘金根车，驾六马，设五时副车，曹操以五官中郎将曹丕为魏王世子。</p>
				</div>
				<!-- 类名 文学 的拼音 -->
				<div class="wenxue">
					<h4>文学</h4>
					<p>曹操对文学、书法、音乐等都有深湛的修养。著有《孙子略解》、《兵书接要》《孟德新书》等书。</p>
					<p>曹操的文学成就，主要表当今诗歌上，散文也很有特点。曹操的诗歌，今存20多篇，全部是乐府诗体。内容大体上可分三类。一类是关涉时事的，一类是以表述理想为主的，一类是游仙诗。</p>
					<p>与时事有某种关联的作品有《薤露行》《蒿里行》《苦寒行》《步出夏门行》等，抒发自己的政治抱负，并反映汉末人民苦难生活，气魄雄伟，慷慨悲凉。《薤露行》《蒿里行》二诗，作于建安初年。前一篇反映何进谋诛宦官事败，董卓入洛阳作乱；后一篇写关东各州郡兴兵讨卓，又各怀野心，互相杀伐，在内容上紧相承接。诗篇以简练的语言，高度概括地写出了这一段历史过程，因此被誉为“汉末实录，真诗史也”
						。《苦寒行》作于建安十一年，诗篇描写冬日太行山区的酷寒、荒芜、险峻，形象生动，同时也写出了诗人内心的复杂感受。《步出夏门行》作于建安十二年征三郡乌桓时。该诗包括“艳”（前奏）及四解。“艳”着重写了诗人出征时的复杂心情。一解“观沧海”，写进军途经碣石时的观感；二解“冬十月”、三解“土不同”，写归途中见闻；四解“龟虽寿”，写取得了这场重要战役胜利后的思想活动。以表述理想为主的诗歌有《度关山》《对酒》《短歌行》等。前两篇写政治理想。他设想的太平盛世是儒法兼采、恩威并用的贤君良臣政治。这在汉末社会大破坏的现实背景下，无疑是具有进步意义的。《短歌行》的主题是求贤，以“山不厌高，海不厌深，周公吐哺，天下归心”等诗句，抒发求贤若渴，广纳人才，以冀成其大业心情。
					</p>
					<p>在艺术风格上，曹操诗歌朴实无华、不尚藻饰。它们以感情深挚、气韵沉雄取胜。在诗歌情调上，则以慷慨悲凉为其特色。慷慨悲凉，这本来是建安文学的共同基调，不过在曹操的诗中，它表现得最为典型，最为突出。在诗歌体裁上，曹操的乐府诗并不照搬汉乐府成规，而是有所发展。如《薤露行》《蒿里行》，在汉乐府中都是挽歌，他却运用旧题抒写了全新的内容。曹操开创了以乐府写时事的传统，影响深远。
					</p>
					<p>曹操在文学上的功绩，还表现在他对建安文学（见建安七子）所起的建设性作用上，建安文学能够在长期战乱、社会残破的背景下得以勃兴，同他的重视和推动是分不开的。刘勰在论述建安文学繁荣原因时，就曾指出“魏武以相王之尊，雅爱诗章”
						。事实上，建安时期的主要作家，无不同他有密切关系。曹丕、曹植是他的儿子，“七子”及蔡琰等，也都托庇于他的荫护。可以说，“邺下文人集团”就是在他提供的物质条件基础上形成的；而他们的创作，也是在他的倡导影响下进行的。
					</p>
					<p>此外，曹操还有不少其他文章传世，例如《请追增郭嘉封邑表》、《让县自明本志令》、《与王修书》、《祀故太尉桥玄文》等，文字质朴，感情流露，流畅率真。</p>
					<p>曹操著述，据清姚振宗《三国艺文志》考证，有《魏武帝集》30卷录1卷、《兵书》13卷等十余种，然多已亡佚，今存者唯《孙子注》。明代张溥辑散见诗、文等145篇为《魏武帝集》，收入《汉魏六朝百三家集》中。丁福保《汉魏六朝名家集》中也有《魏武帝集》，所收作品略多于张溥辑本。1959年，中华书局据丁福保本，稍加整理补充，增入《孙子注》，又附入《魏志·武帝纪》、《曹操年表》等，重新排印为《曹操集》。
					</p>
				</div>
			</div>
			<div id="tadetuji">
				<!-- id名   他的图集   的拼音 -->
				<h3>他的图集</h3>
				<p>魏武帝曹操（155年 —220年3月15日 ），字孟德，小名阿瞒、吉利，沛国谯县（今安徽省亳州市）人 。中国古代杰出的政治家、军事家、文学家、书法家、诗人
					。东汉末年权相，太尉曹嵩之子，曹魏的奠基者。</p>
				<div>
					<!-- 类名 图集 的拼音 -->
					
					
					<!-- 反映曹操为人，事迹的一些图片及文字简介和视频 -->
					<div class="tuji1">
						<div class="tuji11"><img src="img/tuji1.jpg"></div>
						<div class="tuji12">
							<p>掌控朝局的曹操以酒宴试探刘<br>备是否有称霸天下的野心，最终被<br>刘备巧言瞒过</p>
						</div>
					</div>
					<div class="tuji2">
						<div class="tuji21"><img src="img/tuji2.jpg"></div>
						<div class="tuji22">
							<p>“三曹”是指汉魏时期曹操与其<br>子曹丕、曹植的合称。因他们父子兄<br>弟间在政治上的地位和文学上的成就<br>，都对当时的文坛有剧烈的影响，是<br>建安文学的代表。
							</p>
						</div>
					</div>
					<div class="tuji3">
						<div class="tuji31"><img src="img/tuji3.jpg"></div>
						<div class="tuji32">
							<p>南朝宋刘义庆《世说新语·假<br>谲》：“ 魏武行役，失汲道，军<br>皆渴，乃令曰：‘前有大梅林，饶<br>子，甘酸可以解渴。’士卒闻之，<br>口皆出水，乘此得及前源。”
							</p>
						</div>
					</div>
					<div class="tuji4">
						<div class="tuji41">
							<video controls="controls">
								<source src="img/tuji4.mp4" type="video/mp4">
								</source>
								当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
							</video>
						</div>
					</div>
					<div class="tuji5">
						<div class="tuji51">
							<video controls="controls">
								<source src="img/tuji5.mp4" type="video/mp4">
								</source>
								当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
							</video>
						</div>
					</div>
					<div class="tuji6">
						<div class="tuji61">
							<video controls="controls">
								<source src="img/tuji6.mp4" type="video/mp4">
								</source>
								当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
							</video>
						</div>
					</div>
				</div>
			</div>
			<div id="lianxita">
				<!-- id名  联系他   的拼音 -->
				<h3>给他留言的地方</h3>
				<p>世人都说我是奸雄，可都又拿我这个奸雄无可奈何，你们这些自诩为君子的人，也都败在了我这个奸雄手里，如果当君子的代价就是被凌辱，被践踏，被消灭，甚至被
					杀的话，我宁愿当一个能够实现自己报负的奸雄，自古以来大奸似忠，大伪似真，忠义和奸恶，都不是能从表面就能看出来的，也许你们从前看错了我曹操，现在又 看错了我，我从来都不怕别人错看我。
				</p>
				<form action="" method="">
					<input type="text" name="" id="" value="" placeholder="你的名字..." class="xinxi" />
					<input type="email" name="" id="" value="" placeholder="你的邮箱..." class="xinxi" />
					<input type="text" name="" id="" value="" placeholder="主题..." class="xinxi" />
					<textarea rows="" cols="" class="wenbenyu" placeholder="写下你的留言..."></textarea>
					<input type="submit" name="" id="" value="提交你的信息" class="tijiao" />
				</form>
			</div>
			<div id="footer">
				<p>谢谢浏览，网页到此结束&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://baike.baidu.com/item/%E6%9B%B9%E6%93%8D/6772?fr=aladdin" target="_blank">网页所有资料均来自秒懂百科&nbsp;&nbsp;(点击进入)</a></p>
			</div>
		</div>