大学简单html+css+js项目(古诗demo)

最新推荐文章于 2023-12-18 10:26:06 发布

VIP文章玫玖怎么办

最新推荐文章于 2023-12-18 10:26:06 发布

阅读量385

点赞数

文章标签： html5 css css3 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/qq_53203517/article/details/129533559

版权

走近李清照

介绍：

背景：

宣传中国传统文化。比较传统诗词网站，新增背诵功能，更有趣味性。

功能：

兼备诗人介绍、生平、精选诗词、背诵等功能。

代码：

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, -423px -20