DEMO1
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> p:hover{ background-color: green; color: white; } p{ font-size: 16px; } </style> <title>比尔·盖茨（微软公司创始人之一）</title> </head> <body> <h1><marquee behavior="" direction="right" style="background-color: black;color: aliceblue;border-radius: 12px;">比尔·盖茨（微软公司创始人之一）</marquee></h1> <h1>比尔·盖茨（微软公司创始人之一）</h1> <div> <div style="float: left;"><img src="bill.jpg" alt="" height="200"></div> <div style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-size: 19px;"> <p>比尔·盖茨（Bill Gates），1955年10月28日出生于美国华盛顿州西雅图，企业家、软件工程师、慈善家，微软公司创始人。</p> <p>比尔·盖茨13岁开始计算机编程设计，18岁考入哈佛大学，一年后从哈佛退学，1975年比尔盖茨与好友保罗艾伦一起创办了微软公司，比尔盖茨担任微软公司董事长、CEO和首席软件设计师。</p> <p>比尔·盖茨1995-2007年连续13年成为《福布斯》全球富翁榜首富，连续20年成为《福布斯》美国富翁榜首富。</p> <p>2000年，比尔·盖茨成立比尔和梅琳达·盖茨基金会，2008年比尔盖茨宣布将580亿美元个人财产捐给慈善基金会，2014年比尔·盖茨辞去董事长一职。</p> </div> </div> </body> </html>
Day02
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>屈原(战国时期的思想家 政治家 军事家)</h1> <p> 屈原（约公元前340-前278），中国古代伟大的爱国诗人。汉族，出生于楚国丹阳（今湖北秭归），名平，字原。战国时期楚国贵族出身，任三闾大夫、左徒,兼管内政外交大事。他主张对内举贤能，修明法度，对外力主联齐抗秦。后因遭贵族排挤，被流放沅、湘流域。公元前278年秦将白起一举攻破楚国首都郢都。忧国忧民的屈原在长沙附近汩罗江怀石自杀，端午节据说就是他的忌日。他写下许多不朽诗篇，成为中国古代浪漫主义诗歌的奠基者，在楚国民歌 </p> <a href="02.html">返回首页</a> </body> </html>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ font-family: Arial, Helvetica, sans-serif; font-weight: 300; } span:hover{ background-color: green; color: aliceblue; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 800; } </style> </head> <body> <!-- <span>1</span> <br> <span>2</span> --> <!-- --> <marquee behavior="" direction="">离骚</marquee> <div style="text-align: center;"> <b><h1 style="font-weight: 900;">千古楚魂屈原骚韵</h1></b> <p>离骚(节选)</p> <br> <p>屈原</p> <br> <span>帝高阳之苗裔兮，朕皇考曰伯庸。</span> <br> <span>摄提贞于孟陬兮，惟庚寅吾以降。 </span> <br> <span>皇览揆余初度兮，肇锡余以嘉名。 </span> <br> <span>名余曰正则兮，字余曰灵均。 </span> <br> <span>纷吾既有此内美兮，又重之以修能。 </span> <br> <span>扈江离与辟芷兮，纫秋兰以为佩。 </span> <br> <span>汩余若将不及兮，恐年岁之不吾与。 </span> <br> <span>朝搴阰之木兰兮，夕揽洲之宿莽。 </span> <br> <span>日月忽其不淹兮，春与秋其代序。 </span> <br> <span>惟草木之零落兮，恐美人之迟暮。</span> <br> <span>不抚壮而弃秽兮，何不改乎此度？</span> <br> <span>乘骐骥以驰骋兮，来吾道夫先路！</span><br> <span>昔三后之纯粹兮，固众芳之所在。</span><br> <span>杂申椒与菌桂兮，岂惟纫夫蕙茝！</span><br> <span>彼尧、舜之耿介兮，既遵道而得路。</span><br> <span>何桀纣之昌披兮，夫唯捷径以窘步。</span><br> <span>惟夫党人之偷乐兮，路幽昧以险隘。</span><br> <span>岂余身之惮殃兮，恐皇舆之败绩。</span><br> <span>忽奔走以先后兮，及前王之踵武。</span><br> <span>荃不查余之中情兮，反信谗而齌怒。</span><br> <span>余固知謇謇之为患兮，忍而不能舍也。</span><br> <span>指九天以为正兮，夫唯灵修之故也。</span><br> <span>曰黄昏以为期兮，羌中道而改路。</span><br> <span>初既与余成言兮，后悔遁而有他。</span><br> <span>余既不难夫离别兮，伤灵修之数化。</span><br> </div> </body> </html>
Demo03
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>展示图片的信息</title> </head> <body> <marquee behavior="" direction="">展示图片的信息</marquee> <img src="e.jpg" alt=""> <img src="./a/a.jpg" alt=""> <img src="./bb/b/b.jpg" alt=""> <img src="./c_c/c.jpg" alt=""> <img src="./d/ddd/d.jpg" alt=""> </body> </html>
demo04
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ width: 100%; } div{ font-size: 23px; width: 1000px; height: 800px; border: 3px dotted red; } </style> </head> <body> <div> <a id="testA">1</a></div> <div><a id="testb">2</a></div> <div><a id="testc">3</a></div> <div><a id="testd">4</a></div> <div><a id="teste">5</a></div> <a href="#testA">回到1</a> <a href="#testb">回到2</a> <a href="#testc">回到3</a> <a href="#testd">回到4</a> <a href="#teste">回到5</a> </body> </html>
Demo5
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>名牌故事</title> </head> <body> <div align="center"><img src="banner.jpg" alt=""> <h1>阿玛尼<span style="opacity: 0.3;">（时尚设计大师乔治·阿玛尼创立品牌）</span></h1> </div> <br> <hr> <br> <p>阿玛尼是世界知名奢侈品牌，1975年由时尚设计大师乔治·阿玛尼（Giorgio Armani）创立于意大利米兰，乔治·阿玛尼是在美国销量最大的欧洲设计师品牌，他以使用新型面料及优良制作而闻名。 </p> <div style="float: left;"><img src="logo.jpg" alt=""></div> <div> <h2>品牌标志</h2> <p style="font-size: 30px;">阿玛尼品牌标志是由一只在往右看的雄鹰变形而成。鹰象征了品牌至高的品质，卓越和技艺，从此以它做为永久的象征。 giorgio armani阿玛尼的标志设计，在另外一方面，追求一种至高的简约，优雅的设计方向，它由圆圆的G和曲线的A构成一个圆，赋予了精炼和优雅的新style。</p> </div> <hr> <h1>历史传承</h1> <div style="float: left;font-size: 30px;"> <img src="glorgio.jpg" alt="" style="float: right;"> 创办人Giorgio Armani在1934年生于米兰市近郊。1957年，当他服完兵役后，便到当时得令的百货公司“La Rinascente”担当“橱窗设计师”（window dresser）。1961年，他转到Nino Cerruti当设计师。 1974年，他与朋友Sergio Galeotti合资，毅然成立以Giorgio Armani为名字的男装品牌。甫一出道，Giorgio Armani的首个男装系列，便深受时装买手和传媒的注视。西装上衣是其signature piece，剪裁秀丽，潇洒易穿。1975年，增设女装线。值得一提，其妹Rosanna Armani是意大利Top model她运用自己的影响力，令Giorgio Armani备受认识。 </div> <div style="font-size: 30px;"> Giorgio Armani名气日盛，生意兴隆，开设second line 似乎是自然不过的事。1981年，Emporio Armani正式成立，于米兰开设首间Emporio Armani专门店。“Emporio”是意大利文，意思是“百货公司”。从其名字可想像到Emporio Armani就是一间Armani百货公司，货品种类林林总总：有男装女装、鞋履、香水以至眼镜饰物等等。风格走年青路线，为爱Armani但不喜欢穿成熟的main line的年青人，提供了多一个不俗的选择，一间他们喜爱的生活百货。Emporio Armani挟着Giorgio Armani的威势，于八十年代大受欢迎，分店开得一间接一间，由米兰开到美洲亚洲。更于世界各地十二个不 同的城市诸如巴黎、大阪等开设Emporio Armani Caffe，将音乐、美食、室内设计美学等概念融汇在一起，为寻常百姓家展示了一代意大利名师的休闲生活哲学。作为大名鼎鼎的Armani旗下的副牌，设计上也更加前卫、大胆。这一季的Armani Exchange以“暗夜的性感”为主题，色彩用以黑色为主打，采用牛仔、针织等面料，营造年轻具有活力的诱惑风格。在性感诱惑的同时，也延续了Armani为人著称的优雅迷人，性感、野性却绝不媚俗。 </div> </body> </html>
DEMO06
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <img src="big.jpg" alt="" style="float: left;"> 介绍:虽然他们数量稀少,但剑圣一直都是兽族部落中的精英战士.这些<br>拥有精湛剑术的剑圣曾经是火刃氏族的成员,后来火刃氏族被自身邪<br>恶的力量摧毁了.在火刃氏族四分五裂之后,剑圣身背氏族的图腾,为了<br>拯救他们自己和氏族的兄弟们奋斗.在萨尔的领导下,这些剑圣又一次<br>加入兽族部落,担任他们年轻领导人的贴身侍卫.虽然剑圣是潜行和欺<br>诈的高手,但他们看重个人的容易胜过一切。 </div> <hr> <div> <img src="j1.jpg" alt="" style="float: left;"> 疾风步(Wind Walk) ： <br> 让剑圣隐身，并增加其移动速度．如果在隐身其间剑圣攻击目标的话，会造成额外伤害。 </div> <hr> <div> <img src="j2.jpg" alt="" style="float: left;"> 镜象(Mirror Image) ： <br> 制造出剑圣的幻影来迷惑对手,同时消除自身所有不利魔法效果。 </div> <hr> <div> <img src="j3.jpg" alt="" style="float: left;"> 致命一击(被动技能) ： <br> 有15%的机率可以让剑圣在攻击时造成更多的伤害 </div> <hr> <div> <img src="j4.jpg" alt="" style="float: left;"> 剑刃风暴(Bladestorm) ： <br> 快速的旋转剑刃重创附近的所有敌人地面部队.并让剑圣对魔法免疫,每秒造成110点伤害。 </div> </body> </html>
