目錄
- 純HTML+CSS網頁設計期末作業（個人網站）
- 原始碼鏈接
- 效果展示
- index 頁面
- about 頁面
- hobbies 頁面
- 書籍介紹頁面
- 元曲介紹頁面
- 原始碼
- index.html
- index.css
- about.html
- hobbies.html
- hobbies.css
- me.html
- me.css
- book1.html
- book.css
- yuanqu.html
- yuanqu.css
- 缺陷
純HTML+CSS網頁設計期末作業（個人網站）
原始碼鏈接
https://github.com/1075461847/pagedemo
效果展示
index 頁面
about 頁面
hobbies 頁面
書籍介紹頁面
其他介紹類似
元曲介紹頁面
其他介紹類似
原始碼
index.html
<!DOCTYPE html>
<head>
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="home">
<div class="content">
<div class="stars"></div>
<img class="bgc" src="https://img.lccyj.ltd/img/tongnian.JPG" width="100%" alt="">
<h3 class="title">歡迎來到我的個人網站</h3>
<h3 class="titles">我時常回到童年，用一片童心思考問題，很多煩惱的問題就變得易解，</h3>
<img class="icon" src="https://img.lccyj.ltd/img/down.png" alt="">
<div class='ribbon'>
<a href='./index.html'><span>Home</span></a>
<a href='./about.html'><span>About</span></a>
<a href='./hobbies.html'><span>Hobbies</span></a>
</div>
</div>
<div class="icons">
<div class="icons_items">
<img class="icons_items_imgs" src="https://img.lccyj.ltd/img/tongxin (2).png" alt="">
<span>守住童心</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="https://img.lccyj.ltd/img/huli (2).png" alt="">
<span>那些小王子教會我的</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="https://img.lccyj.ltd/img/xiaowangzi (2).png" alt="">
<span>狐貍---溫暖了一生</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="https://img.lccyj.ltd/img/meigui (2).png" alt="">
<span>玫瑰---驚艷了時光</span>
</div>
</div>
<div class="introduce">
<div class="introduce_item">
<img class="introduce_item_img" src="https://img.lccyj.ltd/img/tongxin (2).png" alt="">
<span class="introduce_item_title">
我們整天忙忙碌碌，像一群群沒有靈魂的蒼蠅，喧鬧著，躁動著，聽不到靈魂深處的聲音，時光流逝，童年遠去，我們漸漸長大，歲月帶走了許許多多的回憶，也消蝕了心底曾今擁有的那份童稚的純真，我們不顧心靈桎梏，沉溺于人世浮華，專注于利益法則，我們把自己弄丟了，<br><br>
所有的大人都曾經是小孩，雖然，只有少數的人記得，<br><br>
只有用心靈才能看得清事物本質，真正重要的東西是肉眼無法看見的
</span>
</div>
<div class="introduce_item">
<span class="introduce_item_titles">小王子在離開了玫瑰后才明白愛的道理：“我那時什么也不懂！我應該根據她的行為，而不是她的話來判斷她，她使我的生活芬芳多彩，我真不該離開她跑出來，我本應該猜出在她那笨拙的假話背后所隱藏的情愛，玫瑰花是多么的自相矛盾！可是我當時太年輕，還不懂得去愛她，”
<br><br>我的花生命是短暫的，她只有四根刺可以保護自己，抵御世界，我卻將她獨自留在我的星球上了！
</span>
<img class="introduce_item_img" src="https://img.lccyj.ltd/img/huli (2).png" alt="">
</div>
<div class="introduce_item">
<img class="introduce_item_img" src="https://img.lccyj.ltd/img/xiaowangzi (2).png" alt="">
<span class="introduce_item_title">狐貍說：“對我來說，你只是一個小男孩，就像其他成千上萬個小男孩一樣沒有什么兩樣，我不需要你，你也不需要我，對你來說，我也只是一只狐貍，和其他成千上萬的狐貍沒有什么不同，但是，如果你馴養了我，我們就會彼此需要，對我來說，你就是我的世界里獨一無二的了；我對你來說，也是你的世界里的唯一了，”</span>
</div>
<div class="introduce_item">
<span class="introduce_item_titles">玫瑰花：＂我并非如此的弱不禁風...夜晚的涼風對我倒有好處，我是一朵花啊，＂<br><br>
她天真地顯露出她那四根刺，隨后又說道： “別這么磨蹭了，真煩人！你既然決定離開這兒，那么，快走吧！” 她其實是不愿意讓小王子看到自己哭泣，她曾經是多么高傲的一朵花……<br><br>
玫瑰在小王子離開時這樣說，我當然愛你，沒有讓你感覺到，是我的不對，
</span>
<img class="introduce_item_img" src="https://img.lccyj.ltd/img/meigui (2).png" alt="">
</div>
</div>
<!-- <audio autoplay="autoplay" id="audio" loop="loop">
<source src="./video/music.mp3" type="audio/MP3">
</audio>
<img class="music_img" src="./img/music.png" alt=""> -->
</div>
</body>
<!-- <script>
let mucics = document.getElementById('audio')
document.body.addEventListener('mousemove', function() {
setTimeout(() => {
mucics.play();
}, 2000);
}, false);
</script> -->
</html>
index.css
* {
margin: 0;
padding: 0
}
.home {
height: 100%;
overflow: hidden;
}
.content {
perspective: 340px;
width: 100%;
position: relative;
}
h1 {
color: white;
text-align: center;
}
span {
display: block;
text-align: center;
}
.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 -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
animation: fly 15s linear infinite;
transform-style: preserve-3d;
}
.stars:before,
.stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.stars:before {
transform: translateZ(-300px);
opacity: .6;
}
.stars:after {
transform: translateZ(-600px);
opacity: .4;
}
@keyframes fly {
from {
transform: translateZ(0px);
opacity: .6;
}
to {
transform: translateZ(200px);
opacity: .8;
}
}
.title {
position: absolute;
display: flex;
justify-content: center;
left: 0;
right: 0;
top: 300px;
margin: auto;
bottom: 0;
color: #fff;
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: #fff;
font-size: 20px;
font-weight: 500;
}
.icon {
width: 15px;
height: 15px;
padding: 5px;
border: 2px solid #fff;
border-radius: 100%;
position: absolute;
bottom: 50px;
animation: downs 2s linear infinite;
}
@keyframes downs {
from {
transform: translatey(0px);
opacity: .6;
}
to {
transform: translatey(30px);
opacity: .8;
}
}
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 300px;
top: 50px;
margin: auto;
}
.ribbon:after,
.ribbon:before {
margin-top: 0.5em;
content: "";
display: flex;
;
border: 1.5em solid #fff;
}
.ribbon:after {
border-right-color: transparent;
}
.ribbon:before {
border-left-color: transparent;
}
.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;
}
.introduce {
display: flex;
flex-direction: column;
}
.introduce_item {
display: flex;
justify-content: center;
margin-top: 60px;
}
.introduce_item_img {
width: 500px;
height: 600px;
border-radius: 10px;
}
.introduce_item_title {
color: rgb(5, 39, 20);
width: 450px;
font-size: 18px;
line-height: 36px;
align-self: center;
padding-left: 100px;
}
.introduce_item_titles {
width: 400px;
font-size: 18px;
line-height: 36px;
align-self: center;
padding-right: 100px;
}
audio {
position: fixed;
bottom: 50px;
right: 0;
}
.music_img {
position: fixed;
bottom: 50px;
right: 50px;
width: 40px;
height: 30px;
animation: muscis 5s linear infinite;
}
@keyframes muscis {
from {
transform: rotate (0deg);
opacity: .6;
}
to {
transform: rotate(360deg);
opacity: .8;
}
}
.icons {
display: flex;
justify-content: space-between;
padding: 10px 400px;
box-sizing: border-box;
overflow: hidden;
}
.icons_items {
display: flex;
flex-direction: column;
font-size: 20px;
margin-top: 80px;
margin-left: 5px;
margin-right: 5px;
width: 200px;
height: 220px;
}
.icons_items_imgs {
border-radius: 10%;
width: 200px;
height: 120px;
margin-bottom: 30px;
}
about.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/about.css">
</head>
<body>
<div class="about">
<div class="stars"></div>
<h3 class="about_tit">About me? About you!</h3>
<img class="about_bgc" src="https://img.lccyj.ltd/img/8.JPG" alt="">
<div class='ribbon'>
<a href='./index.html'><span>Home</span></a>
<a href='./about.html'><span>About</span></a>
<a href='./hobbies.html'><span>Hobbies</span></a>
</div>
<div class="me">
<!-- <img class="me_img" src="./img/7.JPG" alt=""> -->
<iframe src="./me.html" scrolling="no" frameborder="0" width="800px" height="700px"></iframe>
<span class="me_tit animate ">
真要開始寫寫自己，發現卻無從寫起，我了解自己嗎？我想是不了解的，像現在這樣與自己獨處的時間，很少很少，大部分的時間都在忙碌，我也會反復逃避這樣的狀態，以試圖擁有休閑時光，可是不久就要再度投入到忙碌的生活當中去，在生活和學習當中，我總是平衡不了，我想，這可能是要花一輩子的時間去抗衡，
資訊大爆炸的時代，想知道想了解的東西太多了，可是理解的東西卻更少了，海量的資訊下，每個人都變得渺小了起來，我想我的焦慮也來源于此，我經常處于自我堵塞的狀態下，我想我需要改變自己的思維了，我不再需要記憶的能力，相反，我需要的是洗掉的能力，我有不知情權，
其實，最近，我的狀態也挺好的，我并沒有焦慮，每一天起來也是輕快的，多了寫思考，而不是做一個記憶機器，記憶的事情就交給互聯網吧，也不知道過段時間再看現在寫的東西，是什么感覺，希望可以起個警醒的作用吧，
</span>
</div>
<div class="videos">
<span>
關于你，我總是有很多話想說，可是又怕這些話不能完全表達出我的真心，你只需要知道，倘若你感知到了七分，那我必然有八分真意，關于你，我腦海里自然浮現出來的便是“幸運”和“信任”，
是你讓我知道，哪怕我再渺小，我們在對方心中都是唯一的，跟你在一起，總能驅散我的焦慮，我只想珍惜當下的時光，識訓了一份安心，這是怎樣的幸運啊，至于信任，我可以毫不夸張得說，我從未如此信任過一個非親緣關系的人，
哪怕之前吵架的時候，我很難受，也沒有絲毫動搖我只想和你在一起的心，<br>
近來又讀懂了“青青子衿，悠悠我心，縱我不往，子寧不嗣音？”我若不去尋你，你大可以來找我嘛，婉約是我的基調，卻帶來了很多不必要的誤會和錯過，我看犬夜叉的時候，非常心疼戈薇就是這樣的，她太勇敢了，她性格太好了，簡直就是天使嘛，
可是事實上很多人，都是桔梗和犬夜叉，會因為自我保護而誤會對方，哪怕深愛對方，<br>
所以，哪怕結局并不美好，我也不希望最后我會怪自己，玫瑰在小王子離開的時候才意識到沒有讓對方感覺到自己愛他，而小王子在成長后，才明白玫瑰花是他的唯一，而我不愿我們會是這樣的結局，
</span>
<!-- <video width="800" controls id="video" preload="auto" height="100%" autoplay="autoplay" loop="loop" type="video/mp4" src="./video/videos.mp4"></video> -->
<img class="me_img" src="https://img.lccyj.ltd/img/7.JPG" alt="" width="100%" height="100%">
</div>
</div>
</body>
about.css
* {
margin: 0;
padding: 0;
}
.about {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
perspective: 340px;
}
.about_bgc {
height: 800px;
width: 100%;
}
.stars {
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 3px;
z-index: 999;
border-radius: 50%;
box-shadow: -447px 387px #d1abab, -401px 118px #fcdfdf, -109px 217px #d6bbbb, -680px -436px #dfc2c2, 514px 360px #c29a9a, -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 #dabfbf, 327px -398px #ddc0c0, -602px -38px #c0a3a3, 128px 398px #e4b4b4, 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 -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e2bbbb, -179px -372px #f1c8c8, 143px -317px #d4c3c3, -449px -149px #ffd5d5, -544px 250px #ddbcbc, -220px -323px rgb(250, 228, 228), 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
animation: fly 15s linear infinite;
transform-style: preserve-3d;
}
.stars:before,
.stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.stars:before {
transform: translateZ(-300px);
opacity: .6;
}
.stars:after {
transform: translateZ(-600px);
opacity: .4;
}
@keyframes fly {
from {
transform: translateZ(0px);
opacity: .6;
}
to {
transform: translateZ(180px);
opacity: .8;
}
}
.about_tit {
position: absolute;
color:white;
top: 280px;
left: 0;
right: 0;
font-size: 28px;
font-weight: 550;
bottom: 0;
width: 800px;
margin: auto;
text-align: center;
}
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 300px;
top: 50px;
margin: auto;
}
.ribbon:after,
.ribbon:before {
margin-top: 0.5em;
content: "";
display: flex;
;
border: 1.5em solid #fff;
}
.ribbon:after {
border-right-color: transparent;
}
.ribbon:before {
border-left-color: transparent;
}
.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;
}
.me {
display: flex;
justify-content: center;
margin-top: 60px;
overflow: hidden;
}
.me_tit {
width: 600px;
line-height: 36px;
font-size: 18px;
margin-left: 100px;
margin-top: 50px;
}
.me_img {
width: 800px;
height: 700px;
}
.animate {
margin-top: 100px;
padding-left: 20px;
width: 500px;
font-size: 16px;
color: #5c1d06;
/* animation: 10s wordsLoop linear infinite normal; */
}
/*
@keyframes wordsLoop {
0% {
transform: translateY(100px);
-webkit-transform: translateY(100px);
}
100% {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}
} */
@keyframes fly {
from {
transform: translateZ(0px);
opacity: .6;
}
to {
transform: translateZ(200px);
opacity: .8;
}
}
.videos {
display: flex;
margin-top: 60px;
padding-bottom: 80px;
}
.videos span {
/* width: 400px; */
margin-top: 50px;
margin-right: 100px;
margin-left: 100px;
/* color: #5c1d06 */
/* padding-left: 20px; */
width: 600px;
font-size: 16px;
color: #5c1d06;
line-height: 36px;
}
hobbies.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/hobbies.css">
</head>
<body>
<div class="hobbies">
<div class="stars"></div>
<h3 class="hobbies_tit">衣帶漸寬終不悔，為伊消得人憔悴，</h3>
<h3 class="titles">生活啊，盡情舞蹈吧</h3>
<img class="hobbies_bgc" src="https://img.lccyj.ltd/img/1.JPG" alt="">
<div class='ribbon'>
<a href='./index.html'><span>Home</span></a>
<a href='./about.html'><span>About</span></a>
<a href='./hobbies.html'><span>Hobbies</span></a>
</div>
<!-- / -->
<div class="book">
<div class="conBigTitle">
<h2>圖書</h2>
<p>
<a href="#" target="_blank">書中自有黃金屋</a>|
<a href="#" target="_blank">書中自有顏如玉</a>
</p>
</div>
<div class="show">
<s class="sign"></s>
<div class="showLeft">
<h3><a href="./book1.html" title="殺死一只知更鳥" target="_blank">殺死一只知更鳥</a></h3>
<p class="author">作者：哈珀·李</p>
<p class="introduce">《殺死一只知更鳥》二十世紀三十年代，大蕭條時期美國南部的一個小鎮，三個孩子平靜的生活被兩樁冤案徹底打破，傳聞與事實，堅強與軟弱，正義與邪惡，忠誠與背叛，他們在痛苦與矛盾中艱難地撥開生活的重重迷霧，見證了人性的污穢與光輝，理解了真相的殘忍與無奈，也感受了人間的溫暖與真情，</p>
<span>
<a href="./book1.html" target="_blank" title="殺死一只知更鳥">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/8eddae71/group6/M00/C9/29/CmQUNliwAvqEd43OAAAAAEKQN1s737631726.jpg?v=5pw9ExG9&t=CmQUNl6Itpo." title="殺死一只知更鳥" alt="殺死一只知更鳥" class="bookCover lazy">
</a>
<img src="//pweb.d.ireader.com/static/images/index/shadow.gif" alt="殺死一只知更鳥" class="shadow">
</span>
</div>
<ul class="showMid">
<li>
<a href="./book2.html" target="_blank" title="三體">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/08c0f360/group61/M00/9C/7A/CmQUOVycjHiEHEavAAAAAAqB0h8765287492.jpg?v=zzHQJdFa&t=CmQUOV6IxR4." title="三體" alt="三體" class="lazy">
</a>
<p class="bookName">
<a href="./book2.html" title="三體" target="_blank">三體</a>
</p>
<p>劉慈欣</p>
</li>
<li>
<a href="#" target="_blank" title="東方快車謀殺案">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/df3739e2/group6/M00/5E/7E/CmRaIVso1IiEXmfBAAAAACIOS7I167274228.jpg?v=nYLsetif&t=CmQUN2ERWkg." title="東方快車謀殺案" alt="東方快車謀殺案" class="lazy">
</a>
<p class="bookName">
<a href="#" title="東方快車謀殺案" target="_blank">東方快車謀殺案</a>
</p>
<p>阿加莎</p>
</li>
<li class="tb">
<a href="#" target="_blank" title="活著">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/5dd12d3b/group6/M00/2B/41/CmQUOFcMj9CEBj_gAAAAAI1eU64427806210.jpg?v=pM2Jvx9M&t=CmQUN16Is6s." title="活著" alt="活著" class="lazy">
</a>
<p class="bookName">
<a href="#" title="活著" target="_blank">活著</a>
</p>
<p>余華</p>
</li>
<li class="tb">
<a href="./book3.html" target="_blank" title="月亮和六便士">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/a664a4b6/group6/M00/BB/58/CmQUN1oVRnKEBKybAAAAANegkxw978046032.jpg?v=aZusShmL&t=CmQUN16IuYQ." title="月亮和六便士" alt="月亮和六便士" class="lazy">
</a>
<p class="bookName">
<a href="./book3.html" title="月亮和六便士" target="_blank">月亮和六便士</a>
</p>
<p>毛姆</p>
</li>
</ul>
<div class="showRight">
<h3><s class="crown"></s><a href="#" target="_blank">書單</a></h3>
<ul>
<li class="onShow">
<dl class="open">
<dt>1</dt>
<dd>
<div>
<span class="bookPic">
<a href="#" target="_blank" title="百年孤獨">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/da3637c4/group6/M00/E7/EC/CmQUNlsLwkaECSEsAAAAAJOpcg0715902694.jpg?v=oMXJSqI4&t=CmQUNl6Iu9M." class="lazy"/> </a>
</span>
<div class="bookCon">
<p>
<a href="#" title="百年孤獨" target="_blank">百年孤獨</a><br>
<span class="num">馬爾克斯</span>
</p>
</div>
</div>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>2</dt>
<dd>
<span class="bookName">
<a href="#" title="悲慘世界" target="_blank">悲慘世界 維克多·雨果 </a>
</span>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>3</dt>
<dd>
<span class="bookName">
<a href="#" title="百年孤獨" target="_blank">白夜行 東野圭吾</a>
</span>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>4</dt>
<dd>
<span class="bookName">
<a href="#" title="百年孤獨" target="_blank">不能承受的生命之輕</a>
</span>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>5</dt>
<dd>
<span class="bookName">
<a href="#" title="百年孤獨" target="_blank">霍亂時期的愛情</a>
</span>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>6</dt>
<dd>
<span class="bookName">
<a href="#" title="百年孤獨" target="_blank">柑橘與檸檬</a>
</span>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>7</dt>
<dd>
<span class="bookName">
<a href="#" title="百年孤獨" target="_blank">萬歷十五年</a>
</span>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>8</dt>
<dd>
<span class="bookName">
<a href="#" title="百年孤獨" target="_blank">尼羅河謀殺案</a>
</span>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>9</dt>
<dd>
<span class="bookName">
<a href="#" title="百年孤獨" target="_blank">鄉村教師 大劉</a>
</span>
</dd>
</dl>
</li>
<li>
<dl class="close">
<dt>10</dt>
<dd>
<span class="bookName">
<a href="#" title="三生三世：步生蓮（壹）化繭" target="_blank">蘇菲的世界</a>
</span>
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
<div class="sel_Cir">
<div class="conBigTitle">
<h2>野獸回來了</h2>
</div>
<div class="cirShow">
<ul class="cirBig">
<li>
<span class="cirHead">
<a href="./tangshi.html" target="_blank">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/ce16384b/group6/M00/EF/08/CmQUNlswWuGEI-P_AAAAAGcokYo470353353.jpg?v=zCb05qFg&t=CmQUNlswWuE." title="唐詩" alt="唐詩" class="lazy"/>
</a>
<s class="fire"></s>
</span>
<h3><a href="./tangshi.html" title="唐詩" target="_blank">唐詩</a></h3>
<p class="little">有時只是一首詩,我們就找回對世界的初戀.</p>
<span class="attent">
<s class="fans"></s>
<i>今夕何夕,見此良人</i>
<s class="cards"></s>
<i></i>
</span>
</li>
<li class="middle">
<span class="cirHead">
<a href="./songci.html" target="_blank">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/b1fb4c32/group6/M00/EF/08/CmQUNlswW06Ec5WmAAAAACImj3c976890971.jpg?v=pEoO4QEx&t=CmQUNlswW04." title="宋詞" alt="宋詞" class="lazy"/>
</a>
<s class="fire"></s>
</span>
<h3><a title="宋詞" href="./songci.html" target="_blank">宋詞</a></h3>
<p class="little">詩情畫意,人間絕美</p>
<span class="attent">
<s class="fans"></s>
<i>相思本是無憑語,莫向花箋費淚行</i>
<s class="cards"></s>
<i></i>
</span>
</li>
<li>
<span class="cirHead">
<a target="_blank" href="./yuanqu.html">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/bfadaf77/group6/M00/EF/11/CmQUN1swh_mEfkV0AAAAANKnaaU020118518.jpg?v=Q1NQqWqL&t=CmQUN1swh_k." alt="元曲" class="lazy"/>
</a>
<s class="fire"></s>
</span>
<h3><a href="/.yuanqu.html" target="_blank">元曲</a></h3>
<p class="little">街市小令”或“村坊小調"</p>
<span class="attent">
<s class="fans"></s>
<i></i>新秋至，人乍別，順長江水流殘月，悠悠畫船東去也，這思量起頭兒一夜，
<s class="cards"></s>
<i></i>
</span>
</li>
</ul>
<div class="zwtit"><img src="" alt=""></div>
<ul class="cirLittle zwqz">
<li>
<span class="litHead">
<a href="#" target="_blank">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/71fee514/group6/M00/1C/74/CmRablswwt2EKu2UAAAAAOQZ58o026610528.jpg?v=w64zJDdg&t=CmRablswwt0." alt="博客">
</a>
</span>
<div class="bookCon">
<h3><a target="_blank">博客</a></h3>
<p>0部作品</p>
</div>
</li>
<li>
<span class="litHead">
<a target="_blank">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/2ab99546/group6/M00/EF/16/CmQUNlswbOaEQwe_AAAAAIWAkFQ186283339.jpg?v=8N8Z8LMS&t=CmQUNlswbOY." alt="繪畫">
</a>
</span>
<div class="bookCon">
<h3><a target="_blank">繪畫</a></h3>
<p>0部作品</p>
</div>
</li>
<li>
<span class="litHead">
<a target="_blank">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/467cba7c/group6/M00/1C/2F/CmRae1swXU6EKGW2AAAAAJBPyUs060526757.jpg?v=j5BKgYCC&t=CmRae1swXU4." alt="散文">
</a>
</span>
<div class="bookCon">
<h3><a target="_blank">散文</a></h3>
<p>0部作品</p>
</div>
</li>
<li>
<span class="litHead">
<a target="_blank">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/8c743f75/group6/M00/1D/00/CmRaelszMT-EDFwHAAAAAKqS8cs181978067.jpg?v=48satnrL&t=CmRaelszMT4." alt="小說">
</a>
</span>
<div class="bookCon">
<h3><a target="_blank">小說</a></h3>
<p>0部作品</p>
</div>
</li>
<li>
<span class="litHead">
<a target="_blank">
<img src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/4c61e2a0/group6/M00/EF/09/CmQUNlswW6iEAzRwAAAAANMnZTE319229773.jpg?v=ewnsQJEf&t=CmQUNlswW6g." alt="信件">
</a>
</span>
<div class="bookCon">
<h3><a target="_blank">信件</a></h3>
<p>0部作品</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
hobbies.css
* {margin: 0;padding: 0;list-style: none;}
body{ color: #220a05; background: #313A25; font-weight: normal; }
img{border: none;}
a{text-decoration: none; outline:none; color: #4d1d12;}
a:hover{color: #ee8040;}
input{outline: none; border: none; background: none;font-family:"Microsoft Yahei", arial,sans-serif;}
h1,h2,h3,h4,h5,p{font-family:"Microsoft Yahei", arial,sans-serif; }
em,h2,h1,h3,i{font-style: normal; font-weight: normal;}
em,span{display: inline-block;}
.hobbies {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
perspective: 340px;
}
.hobbies_bgc {
height: 800px;
width: 100%;
}
.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 -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
animation: fly 15s linear infinite;
transform-style: preserve-3d;
}
.stars:before,
.stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.stars:before {
transform: translateZ(-300px);
opacity: .6;
}
.stars:after {
transform: translateZ(-600px);
opacity: .4;
}
@keyframes fly {
from {
transform: translateZ(0px);
opacity: .6;
}
to {
transform: translateZ(180px);
opacity: .8;
}
}
.hobbies_tit {
position: absolute;
color:white;
top: 280px;
left: 0;
right: 0;
font-size: 28px;
font-weight: 550;
bottom: 0;
width: 800px;
margin: auto;
text-align: center;
}
.titles {
position: absolute;
color:white;
top: 350px;
left: 0;
right: 0;
font-size: 28px;
font-weight: 550;
bottom: 0;
width: 800px;
margin: auto;
text-align: center;
}
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 300px;
top: 50px;
margin: auto;
}
.ribbon:after,
.ribbon:before {
margin-top: 0.5em;
content: "";
display: flex;
;
border: 1.5em solid #fff;
}
.ribbon:after {
border-right-color: transparent;
}
.ribbon:before {
border-left-color: transparent;
}
.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;
}
.book{
margin-left: 250px;
margin-right: 250px;
font:12px/20px "Microsoft Yahei", arial,sans-serif;
animation: downs 2s linear infinite;
}
.pubBook{overflow: hidden;}
.conBigTitle{width: 1000px; text-align: center; padding: 44px 0 30px 0; }
.conBigTitle h2{font-size: 26px; color: white; height: 36px;}
.conBigTitle p{color: white;}
.conBigTitle p a{ margin: 0 4px;color: white;}
.show{width:1000px; height: 526px; background: rgb(252, 252, 241); position: relative; }
.show .sign{width: 63px; height: 63px; background-position: -26px 0; position: absolute; left: 0; top: 0;}
.show .showLeft{width: 246px; height: 481px; padding: 45px 56px 0; float: left;}
.show .showLeft h3{width: 246px; height: 22px; font-size: 20px; font-weight: 300; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #7c4639;}
.show .showLeft .author{margin: 10px 0 20px 0;}
.show .showLeft .introduce{ width: 246px; height: 64px; overflow: hidden; margin-bottom: 94px; line-height: 16px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; position:relative;}
.show .showLeft span{width: 158px; height: 190px; float: right; position: relative;}
.show .showLeft img{position: absolute; z-index: 1;}
.show .showLeft .bookCover{width: 156px; height: 208px; }
.show .showLeft .shadow{position: absolute; right: -20px; bottom:-20px; z-index: 0}
.show .showMid{float: left; width: 358px; border-left: 1px solid #2b0505; box-sizing: border-box;}
.show .showMid li{float: left; width: 101px; padding: 40px 38px 42px; border-right: 1px solid #2b0505;}
.show .showMid li img{width: 102px; height: 136px;}
.show .showMid li p{width: 104px; height: 20px; overflow: hidden;}
.pubBook .showMid li p{width: 104px; height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.pubBook .showMid li .bookName{color: #212121;}
.show .showMid li p a{color: #4d1d12;}
.show .showMid li p a:hover{color: #f26552;}
.show .showMid .tb{border-top: 1px solid #2b0505;}
.show .showRight{float: left; width: 253px; padding: 28px 0 0 30px;}
.show .showRight h3{width: 228px; height: 30px; font-size: 20px; color: #f26552; position: relative; padding-left: 28px; font-weight: 300;}
.show .showRight .crown{width: 21px; height: 18px; background-position: 0px -68px; float: left; position: absolute; left: 0; top:2px;}
.show .showRight li,.show .showRight dl{overflow: hidden;}
.show .showRight .open{padding-top: 16px;}
.show .showRight dl dt{float: left; text-align: right; width: 10px; margin-right: 18px;}
.show .showRight dl dd{float: left; border-bottom: 1px solid #dfdfdf; width: 200px;}
.show .showRight .open dd .bookPic{width: 63px; height: 84px; display: block; border: 1px solid #2b0505; float: left; margin: 0 16px 16px 0;}
.show .showRight li .bookPic img{width: 63px; height: 84px;}
.show .showRight .open dd .bookCon{float: left; }
.show .showRight .open dd .bookCon .num{font-size: 12px; font-family: arial;}
.show .showRight .open dd .bookCon p{color: #7c4639; width: 100px; max-height: 32px; line-height: 16px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.show .showRight .open dd .bookCon p a{color: #7c4639;}
.show .showRight .open dd .bookCon p a:hover{color: #f26552;}
.show .showRight dl dd s{float: left; width: 14px; height: 9px; background-position: -86px -73px; margin: 6px 6px 0 0;}
.show .showRight .close dd{width: 200px; height: 35px; line-height: 35px;}
.show .showRight .close dt{line-height: 35px;}
.show .showRight .close dd .bookName{width: 130px; height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; float: left;}
.show .showRight .close dd .num{float: right; font-size: 12px; font-family: arial; float: left; margin-left: 10px}
.show .showRight .close dd s{margin-top: 12px;}
.show .showRight li .open{display: none;}
.show .showRight .onShow .open{display: block;}
.show .showRight .onShow .close{display: none;}
/* */
.sel_Cir{
margin-left: 250px;
margin-right: 265px;
font:12px/20px "Microsoft Yahei", arial,sans-serif;
}
.cirShow{/*height: 420px;*/ background: rgb(252, 252, 241); overflow: hidden;}
.cirBig{ width: 1000px; height: 292px; border-bottom: 1px solid #313A25;}
.cirBig .middle{ border-left: 1px solid #313A25; border-right: 1px solid #313A25; width: 331px;}
.cirBig li{width: 333px; height: 242px; float: left; text-align: center; padding-top: 50px;}
.cirBig .cirHead{width: 80px; height: 80px; border-radius: 50%; position: relative;}
.cirBig .cirHead .fire{width: 24px; height: 24px; position: absolute; right: 0; top: 0; background-position: -23px -66px;}
.cirBig .cirHead img{width: 100%; height: 100%; border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%;}
.cirBig li h3{font-size: 18px; width: 242px; height: 20px; overflow: hidden; margin: 16px auto 8px; color: #212121; white-space: nowrap; text-overflow: ellipsis;}
.cirBig li h3 a:hover{color: #f26552;}
.cirBig li .little{ width:226px; height: 32px; line-height: 16px; overflow: hidden; margin: 0 auto; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.cirBig li .attent{margin-top: 20px;}
.cirBig li .attent s{float: left; width: 17px; height: 18px; background-position: -49px -68px; margin: 0 8px 0 10px;}
.cirBig li .attent i{float: left; font-size: 14px;}
.cirBig li .attent .cards{background-position: -68px -68px; }
.cirLittle{padding: 0 40px; height: 129px;}
.cirLittle li{width: 162px; padding: 30px 0 0 22px; overflow: hidden; float: left;}
.cirLittle li .litHead{width: 60px; height: 60px; border-radius: 50%; float: left;}
.cirLittle li h3{color: #212121; width: 64px; height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cirLittle li .litHead img{width: 100%; height: 100%; border-radius: 50%;}
.cirLittle li .bookCon{float: left; padding-left: 10px;}
.cirLittle li h3{font-size: 16px; margin-bottom: 2px;}
.cirLittle li .bookCon .fans{float: left; width: 14px; height: 14px; background-position: -50px -99px; margin: 3px 4px 0 0;}
.cirLittle li .bookCon p{ height: 18px; font-size: 12px;}
.cirLittle li .bookCon .cards{float: left; width: 14px; height: 15px; background-position: -70px -99px; margin: 4px 4px 0 0;}
me.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/me.css">
<title>個人介紹</title>
</head>
<body>
<div class="jianli">
<div class="left">
<div class="head"></div>
<div class="container">
<image class="ima" src="https://img.lccyj.ltd/img/me.JPG">
<span>XXX</span>
</image>
</div>
<div class="bottom"></div>
</div>
<div class="right">
<div class="first">
<span></span>
<span>教育背景/Eudcation</span>
</div>
<div class="second">
<div class="edu">
<span>XX大學軟體學院</span>
<span>XX專業/本科</span>
</div>
<span>畢業時間：2019.09-2023.06</span>
</div>
<div class="first">
<span></span>
<span>個人介紹/Introduction</span>
</div>
<ul class="third">
<li class="title">愛好:</li>
<li class="other">看電影、閱讀、打乒乓球、畫畫、玩游戲</li>
<li class="title">性格:</li>
<li class="other">性格因心情而定，偏內向，傾向于和少數人交流</li>
<li class="title">其他:</li>
<li class="other">喜歡植物，喜歡動物，除了狗和蛇</li>
<li class="other">喜歡純理論，喜歡機械和爆炸</li>
<li class="other">喜歡詩經和漢樂府，因為美好，喜歡魏晉時，不精細，但有力</li>
<li class="other">喜歡唐詩，唐詩豁達，略喜歡宋詞，宋詞哀婉，不喜歡元曲，元曲幽怨，</li>
<li class="other">喜歡安靜，但也不介意喧囂</li>
<li class="other">終極矛盾患者</li>
</ul>
<div class="four">
<!-- #BeginDate format:Ch1 -->21/9/30 <!-- #EndDate -->
</div>
</div>
</div>
</div>
</body>
</html>
<hr />
me.css
/* body{
max-width: 1000px;
margin: 50px auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei";
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color:transparent;
height: 2000px;
} */
div{
box-sizing: border-box;
}
.jianli{
display: flex;
height: 640px;
}
.left{
border: #501804 1px solid;
display: flex;
flex-direction: column;
flex: 3;
/* background-color: aquamarine; */
}
.left .head{
flex: 1;
/* background-color: #0071C1; */
background-color: #ffede6;
height: 100px;
}
.left .container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 8;
/* background-color:#ece4e4; */
}
.container .ima{
height: 400px;
width: 240px;
}
.container span{
margin-top: 15px;
font-size: 30px;
color: #CC9E8D;
}
.left .bottom{
flex: 1;
background-color: #ffede6;
height: 100px;
}
.right{
display: flex;
flex-direction: column;
flex: 7;
}
.right .first{
display: flex;
flex: 1;
font-size: 25px;
color: #CC9E8D;
margin-left: 50px;
border-bottom: solid 1px #413f3f;
align-items: flex-end;
}
.first span{
margin-bottom: 10px;
}
.right .second{
margin-left: 50px;
font-size: 18px;
color: #CC9E8D;
display: flex;
flex: 0.8;
flex-direction: column;
}
.second .edu{
display: flex;
margin:10px 0;
}
.edu span{
flex: 1;
}
.edu span:nth-child(2){
margin-left: 330px;
}
.right .third{
flex: 4;
display: flex;
flex-direction: column;
}
.third span{
flex: 1;
}
.title{
margin-left: 10px;
font-size: 18px;
color: #CC9E8D;
list-style: none;
}
.other{
margin-left: 40px;
font-size: 15px;
color: #5c1d06;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
}
.four{
display: flex;
justify-content: flex-end;
}
book1.html
<!DOCTYPE html>
<head>
<title></title>
<link rel="stylesheet" href="css/book.css">
</head>
<body>
<div class="home">
<div class="content">
<div class="stars"></div>
<img class="bgc" src="https://img.lccyj.ltd/img/book_bgc.JPG" width="100%" alt="">
<h3 class="title">《殺死一只知更鳥》</h3>
<h3 class="titles">
①寧可欺騙一個大人,也不要欺騙一個孩子，<br><br>
當一個孩子問你問題時,你要正兒八經地回答,不要東-拉西扯,顧左右而言他，<br>雖說孩子畢竟只是孩子,但他們會比成人更敏銳地察覺到你在回避問題,回避只會讓他們糊里糊涂，<br><br>
②我們一路奮戰,不是為了改變世界,而-是為了不讓世界改變我們，<br><br>
我想讓你見識一下什么是真正的勇敢,而不要錯-誤地認為一個人手拿鋼槍就是勇敢.<br>勇敢是,當你還未開始,便知道自己會輸,可你依然要去做,而-且無論如何都要把它堅持到底,你很少能贏，但有-時也會，<br><br>
③像尊重自己一樣去尊重他人,像尊-重天使一樣去尊重懌物，<br><br>
除非你穿上一個人的鞋子,像他那樣走來走去,否-則你永遠不會真正了解一個人，<br><br><br><br>
內容簡介:<br>
20世紀30年代，大蕭條時期美國南部的一個小鎮，孤兒男孩迪兒來到梅康鎮找他的姨姨過暑假，杰姆和斯庫特與他成為朋友，三個孩子被他們的隱居鄰居所深深吸引，那個鄰居叫做阿瑟·拉德利，令人生畏，梅科姆鎮的人們不愿談及拉德利，在許多年后也沒有人見過他，孩子們則利用謠言編造了各種故事，推測背后隱藏的玄機，并設計一個計劃引他出門，在之后的兩個暑假中，三個孩子發現，有人在拉德利家外的樹上常給他們留小禮物，有時，這個神秘的布向孩子們示好，但令人遺憾的是，布從來沒有親自出現過，
阿蒂克斯被法院指定為湯姆·魯濱遜辯護，后者是一位黑人，他被控強奸一位白人少女馬耶拉·尤厄爾，雖然許多梅科姆鎮人表示反對，但阿蒂克斯同意為湯姆辯護，有的孩子因阿蒂克斯而嘲笑杰姆和斯庫特，稱他們的父親是“愛黑鬼的家伙”，斯庫特甚至被挑釁為她父親的榮譽而打架，而父親告訴他別這么做，而阿蒂克斯面對一群想要將湯姆處以私刑的人，由于斯庫特、杰姆和迪兒的突然出現，使得暴徒們不得不被迫從阿蒂克斯與湯姆的角度來考慮問題，因此倍感羞愧，四散離去，危機得到了化解，
因為阿蒂克斯不想讓孩子們出席湯姆·魯濱遜的審判，斯庫特、杰姆和迪兒只能從有色人種觀禮臺上悄悄旁聽，阿蒂克斯假設原告馬耶拉和她嗜酒的父親鮑伯·尤厄爾撒謊，并不友好的馬耶拉主動向湯姆施加傭訓，而她父親為此對她大打出手，雖然湯姆的無辜顯而易見，但陪審團依然判他有罪，當絕望的湯姆越獄被殺時，杰姆與阿蒂克斯對司法公正的信念受到了極大的打擊，雖然鮑伯·尤厄爾勝訴，但他的名聲掃地，他氣急敗壞的誓言報復，鮑伯當街啐了阿蒂克斯的臉，試圖闖入審判法官的家騷擾湯姆·魯濱遜的遺孀，最后，一天晚上，當杰姆和斯庫特從學校的萬圣節盛會回家的時候，鮑伯突然對他們痛下毒手，杰姆的胳膊在打斗中折斷，但在混亂中，一位陌生人救出了孩子們，這位神秘人將杰姆扛回家，斯庫特認出他就是阿瑟·拉德利，梅科姆鎮的警長來到并發現鮑伯·尤厄爾死于纏斗，警長與阿蒂克斯進行辯論，試圖確認杰姆和鮑伯倆人誰該負責，阿蒂克斯最終接受了警長的觀點：尤厄爾摔到了自己的刀上，拉德利請斯庫特送他回家，在道別之后，他再度消失，站在拉德利的門外，斯庫特為他們無法償還之前的禮物而深表遺憾，<br><br>
<br>
作者簡介 · · · · · ·
哈珀?李（1926— ）：<br>
生于美國阿拉巴馬州， 曾被授予普利策小說獎及其他眾多文學獎項，她與杜魯門?卡坡蒂是幼年的鄰居和一生的朋友，《殺死一只知更鳥》據說是以卡坡蒂為原型之一創作的，現已成為公認的美國文學經典，此后，她一直隱居在家鄉亞拉巴馬的小鎮上 ，拒絕各種采訪，過著平靜的生活，有人問她為什么不在盛名之下接著寫作，她回答：“有過這樣一次，還有什么可寫的？”
<br><br><br>
書評：<br>
一直以來我都在琢磨到底什么是教養，是不是穿阿瑪尼比穿班尼路有教養？后來我明白，穿阿瑪尼確實比穿班尼路更體面，教養卻談不上，那教養究竟是個什么玩意兒？看完《殺死一只反舌鳥》我明白：教養太復雜，但首先應是正義，正義是一種教養，
<br><br>
20世紀30年代美國南方，律師帶著一雙兒女，他們生活平淡，孩子的童年沒什么不幸，玩鬧著長大，一次，他們邀請家境貧困的同學來家中吃飯，這同學吃飯的方式奇怪，幾乎將一升糖漿倒在食物上，小女孩不解地問他在做什么，仆人將女孩帶到廚房說：他是你的客人，就算他要吃桌布，你也不能說什么，有一年，兩個孩子從親戚那收到兩支氣槍作為圣誕禮物，他們的父親對這份禮物并不滿意，認為氣槍是上帝給了他們一個對其他動物不公平的優勢，
<br><br>
平靜的日子被一件事打亂，父親為一位被指控強奸白人女孩的黑人辯護，縣里的人覺得他發了瘋，麻煩紛至沓來，孩子在學校受到辱罵，認為他們的父親“為黑鬼幫腔”丟盡了臉，同學的辱罵激怒了小女孩，她對同學拳腳相向，回到家里，父親知道她打架的原因后對她說：“愚昧低賤的人每當覺得有人關愛黑人勝過關愛他們時，就會拿它來罵人……如果別人認為那是個下賤的說法并用來稱呼你，對你來說永遠構不成侮辱，他只能顯示那個人有多可憐”，父親讓他們做的是：昂起頭，走過去，作一位紳士，
<br><br>
在法庭上，律師盡力為黑人辯護，事實的真相是白人女孩勾引了黑人，被其父撞破，黑人慌亂中逃走，白人女孩謊稱被強奸，但陪審團判他有罪，他黑色的皮膚就是罪惡，女兒望著失望的父親走出法庭，周圍的黑人全部站了起來，她身邊的人輕輕地提醒她：“瓊·露易絲小姐，起立，你的父親要經過這里了，”
<br><br>
故事沒有結束，失望的一家人被周圍人責難，但痛苦更多來源于對正義的追問：這不公平，在打官司的時候，大家知道真相，但總有一部分人會贏，因為既定的無知偏見和獨斷的權力，父親說，這個時候仿佛只有孩子才會哭，在他們玩弄起那兩支氣槍之時，父親說：“你射多少藍鳥都沒有關系，但是記住，殺死一只知更鳥就是一樁罪惡，”因為它們只唱歌給人聽，什么壞事也不做，
<br><br>
看到這，我徒然增添了自信，若我以后要當誰的母親，我也要告訴他：孩子，殺死一只知更鳥是一樁罪惡，在很多年前，有一些跟媽媽年紀相仿的叔叔阿姨，他們用心地唱歌給這個國家聽，但是他們永遠就停留在媽媽這個年紀，那是這個國家最沒有教養的時刻，
<br><br>
我還會對他說，孩子，你要保持敬畏，那種男人對女人的敬畏，文明對自然的敬畏，有權力的人對沒有權力的人的敬畏，你不要以為手中拿著槍就是勇敢，真正的勇敢是你知道什么是正義，并堅持不做不義的事，走過去，作紳士，
</h3>
</div>
</body>
</html>
book.css
* {
margin: 0;
padding: 0
}
.home {
height: 100%;
overflow: hidden;
}
.content {
perspective: 340px;
width: 100%;
position: relative;
}
h1 {
color: white;
text-align: center;
}
span {
display: block;
text-align: center;
}
.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 -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
animation: fly 15s linear infinite;
transform-style: preserve-3d;
}
.stars:before,
.stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.stars:before {
transform: translateZ(-300px);
opacity: .6;
}
.stars:after {
transform: translateZ(-600px);
opacity: .4;
}
@keyframes fly {
from {
transform: translateZ(0px);
opacity: .6;
}
to {
transform: translateZ(200px);
opacity: .8;
}
}
.title {
position: absolute;
display: flex;
justify-content: center;
left: 0;
right: 0;
top: 80px;
margin: auto;
bottom: 0;
color: #fff;
font-size: 24px;
font-weight: 500;
}
.titles {
position: absolute;
display: flex;
justify-content: center;
left: 200px;
right: 200px;
top: 230px;
line-height: 40px;
margin: auto;
bottom: 0;
color: rgb(218, 206, 206);
font-size: 20px;
font-weight: 500;
}
yuanqu.html
<!DOCTYPE html>
<head>
<title></title>
<link rel="stylesheet" href="css/book3.css">
</head>
<body>
<div class="home">
<div class="content">
<div class="stars"></div>
<img class="bgc" src="https://img.lccyj.ltd/img/yunqu.JPG" width="100%" alt="" >
<h3 class="title">張養浩《山坡羊·潼關懷古》翻譯賞析</h3>
<h3 class="titles">
山坡羊·潼關懷古<br><br>
元·張養浩<br><br>
峰巒如聚，波濤如怒，山河表里潼關路，<br><br>
望西都，意躊躕，<br><br>
傷心秦漢經行處，宮闕萬間都做了土，<br><br>
興，百姓苦；亡，百姓苦，<br><br>
譯文及注釋<br><br>
譯文<br>
華山四周群山聚集，黃河之水波濤洶涌，潼關內外地勢險要，前有黃河，后有華山，可謂“一夫當關，萬夫莫開”之地，<br><br>
遙望長安，惆悵彷徨，在這樣有利之地建都立朝又有什么用呢？<br><br>
傷心啊！秦代漢朝曾經做過行宮的地方，如今萬間宮殿都化作了塵與土，<br><br>
朝廷興盛不息，百姓受苦，<br><br>
朝廷衰亡破敗，百姓更受苦，<br><br>
注釋<br>
山坡羊：曲牌名，<br><br>
潼關懷古：曲的題目，<br><br>
潼關：在今陜西潼關縣內，雄踞陜西、山西、河南三省的要沖，為進入長安的門戶，<br><br>
峰巒如聚：形容華山四周群山密集，地勢險要，<br><br>
波濤如怒：形容黃河水勢浩蕩，波濤洶涌，<br><br>
山河表里潼關路：潼頭地理形勢險要，<br><br>
山河：華山和黃河，<br><br>
表里：內外，表為外，一說指潼關以東為關外，潼關以西為關內，互為表里，<br><br>
西都：指長安，古稱長安為西都，洛陽為東都，長安在潼關以西，今天的西安市舊址，<br><br>
躊躕（chóu chú）：猶豫，彷徨，<br><br>
秦漢：指曾在西都（長安）營建宮闕的秦、漢王朝，<br><br>
經行處：曾經做過行宮的地方，<br><br>
經：曾經，<br><br>
行：行宮，行事，<br><br>
宮闕：泛指皇家宮殿，<br><br>
興：興盛，興與亡為互文，<br><br>
亡：衰亡，滅亡，<br><br><br>
賞析:<br>
這首小令，篇幅笑，容量大，從結構上看，全曲可分為三層，開頭三句是第一層，寫潼關的地勢；中間四句是第二層，寫潼關懷古；末兩句是第三層，寫潼關懷古所得出的結論，三層意思，象是一條鎖鏈上的三個環節，環環相扣，緊密相連，從寫法上看，全曲有描寫，有抒情，有議論，三者緊密結合，而其中又以議史為中心，描寫生動，抒情沉郁，議論深刻，作者寫潼關懷古，起筆在潼關的景象上，落筆卻在懷古上，收筆更在由懷古引出的歷史結論上，作者寫山、河、關、路、西都、秦宮漢闕，最后才點出“興，百姓苦；亡，百姓苦”這個主題，這是一種層層深入、篇末點題的描寫方法，這種描寫方法的好處在于：它的主題不是外加的，架空的，而是從寫景抒情中自然得出的，是真實可信的，前面的描寫為后面的主題提供了堅實的基礎，主題則是從前面的描寫中得出的必然結論，<br><br>
總之，全曲以“峰巒如聚，波濤如怒”的詩句開頭，感情有如千尺瀑布，飛流而下，匯成一股洪流，順著這股感情的洪流，作者一筆掀起一個浪頭，一浪緊接一浪，一浪高過一浪，直至最后以飽含激情的警句結束，感情的大波雖然過去了，但其余波仍然在人們的心海中久久不能平息，全去自始至終，感情深沉、強烈，捧而讀之，令人聲淚俱下，感慨無限！
</h3>
</h3>
</div>
</body>
</html>
yuanqu.css
* {
margin: 0;
padding: 0
}
.home {
height: 100%;
overflow: hidden;
}
.content {
perspective: 340px;
width: 100%;
position: relative;
}
h1 {
color: white;
text-align: center;
}
span {
display: block;
text-align: center;
}
.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 -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
animation: fly 15s linear infinite;
transform-style: preserve-3d;
}
.stars:before,
.stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.stars:before {
transform: translateZ(-300px);
opacity: .6;
}
.stars:after {
transform: translateZ(-600px);
opacity: .4;
}
@keyframes fly {
from {
transform: translateZ(0px);
opacity: .6;
}
to {
transform: translateZ(200px);
opacity: .8;
}
}
.title {
position: absolute;
display: flex;
justify-content: center;
left: 0;
right: 0;
top: 50px;
margin: auto;
bottom: 0;
color: rgb(0, 0, 0);
font-size: 24px;
font-weight: 500;
}
.titles {
position: absolute;
display: flex;
justify-content: center;
left: 200px;
right: 200px;
top: 150px;
line-height: 40px;
margin: auto;
bottom: 0;
color: rgb(0, 0, 0);
font-size: 20px;
font-weight: 500;
}
缺陷
整體風格不統一
頁面布局不靈活（問題很大，有時間修改）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/384292.html
標籤：其他
上一篇：Vue開發 常用方法總結