走近李清照
介绍:
背景:
宣传中国传统文化。比较传统诗词网站,新增背诵功能,更有趣味性。
功能:
兼备诗人介绍、生平、精选诗词、背诵等功能。
代码:
css:
古代名人.css:
body {
background-color: #EAE4D7;
font-size: 16px;
letter-spacing: 10px;
line-height: 30px;
}
.box1 {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
background-color: #EAE4D7;
}
.box2 {
margin-top: 100px;
margin-right: 250px;
margin-left: 250px;
background-color: #F6F1E7
}
.bigtitle {
margin: 1px auto;
margin-top: 10px;
margin-left: 70px;
}
.begin {
margin-top: 10px;
margin-left: 70px;
}
.life {
margin-top: 10px;
margin-left: 70px;
}
.work {
margin-top: 70px;
margin-right: 70px;
margin-left: 50px;
}
.fonts {
font-style: oblique;
font-size: 26px;
letter-spacing: 10px;
line-height: 30px;
color: #19537D;
}
.fanyi {
font-style: oblique;
font-size: 24px;
letter-spacing: 10px;
line-height: 30px;
color: #00FF00;
}
.yiwen {
color: #AF9100;
}
.shangxi {
color: #6495ED;
}
.goodline {
font-style: oblique;
font-size: 24px;
letter-spacing: 10px;
line-height: 30px;
color: #FF1493
}
.peoplename {
font-size: 26px;
letter-spacing: 10px;
line-height: 30px;
color: #FF1493
}
.head {
position: fixed;
left: 30px;
top: 80px;
}
.daohang ul {
/*设置导航栏的框框*/
margin: 30px auto;
width: 600px;
height: 350px;
padding: 0px;
}
.daohang li {
list-style-type: none;
}
.daohang a {
display: block;
width: 150px;
height: 50px;
line-height: 50px;
background-color: #FFC0CB;
margin: 0px 0px;
color: black;
text-align: center;
text-decoration: none;
font-size: 15px;
}
.daohang a:hover {
background-color: #FFB6C1;
}
.daohang {}
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 250px;
top: 50px;
margin: auto;
}
.ribbon:after,
.ribbon:before {
margin-top: 0.5em;
content: "";
display: flex;
border: 1.5em solid #fff;
}
/* 导航加角 */
.ribbon a:link,
.ribbon a:visited {
color: #000;
text-decoration: none;
height: 3.5em;
overflow: hidden;
}
.ribbon span {
background: #fff;
display: inline-block;
line-height: 3em;
padding: 0 1.5em;
margin-top: 0.5em;
position: relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
/* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s;
/* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;
/* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s;
/* Opera 10.5+ */ /* 以上是兼容浏览器 */
transition: background-color 0.2s, margin-top 0.2s; /* 设置动画变换时间 */
}
.ribbon a:hover span {
background: #FFD204;
margin-top: 0;
}
.ribbon span:before {
content: "";
position: absolute;
top: 3em;
left: 0;
border-right: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff; /* 动画后特效 (左)*/
}
.ribbon span:after {
content: "";
position: absolute;
top: 3em;
right: 0;
border-left: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;/* 动画后特效(右)*/
}
h1 {
text-align: center;
}
ul {
/*设置导航栏的框框*/
margin: 30px auto;
width: 600px;
height: 350px;
padding: 0px;
}
li {
list-style-type: none;
}
.lasst {
position: fixed;
left:900px;
top: 80px;
}
.lasst a{
display: block;
width: 150px;
height: 50px;
line-height: 50px;
background-color: #F6F1E7;
margin: 0px 0px;
color: black;
text-align: center;
text-decoration: none;
font-size: 15px;
}
.lasst a:hover {
background-color: #FFA07A;
}
.lasst ul {
/*设置导航栏的框框*/
margin: 30px auto;
width: 600px;
height: 350px;
padding: 0px;
}
主页.css:
* {
margin: 0;
padding: 0
}
.home {
height: 100%;
overflow: hidden;
}
.content {
perspective: 340px;
width: 100%;
position: relative;
}
body {
background-color: #EAE4D7;
font-size: 16px;
letter-spacing: 10px;
line-height: 30px;
}
.title {
position: absolute;
display: flex;
/* 这里用于对齐 */
justify-content: center;
/* 居中对齐 */
left: 0;
right: 0;
top: 300px;
margin: auto;
bottom: 0;
color: #053B12;
font-size: 24px;
font-weight: 500;
}
.titles {
position: absolute;
display: flex;
justify-content: center;
left: 0;
right: 0;
top: 350px;
margin: auto;
bottom: 0;
color: #053B12;
font-size: 20px;
font-weight: 500;
}
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 250px;
top: 50px;
margin: auto;
}
.ribbon:after,
.ribbon:before {
margin-top: 0.5em;
content: "";
display: flex;
border: 1.5em solid #fff;
}
/* 导航加角 */
.ribbon a:link,
.ribbon a:visited {
color: #000;
text-decoration: none;
height: 3.5em;
overflow: hidden;
}
.ribbon span {
background: #fff;
display: inline-block;
line-height: 3em;
padding: 0 1.5em;
margin-top: 0.5em;
position: relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
/* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s;
/* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;
/* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s;
/* Opera 10.5+ */ /* 以上是兼容浏览器 */
transition: background-color 0.2s, margin-top 0.2s; /* 设置动画变换时间 */
}
.ribbon a:hover span {
background: #FFD204;
margin-top: 0;
}
.ribbon span:before {
content: "";
position: absolute;
top: 3em;
left: 0;
border-right: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff; /* 动画后特效 (左)*/
}
.ribbon span:after {
content: "";
position: absolute;
top: 3em;
right: 0;
border-left: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;/* 动画后特效(右)*/
}
.stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
z-index: 999;
border-radius: 50%;
box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -4