時(shí)隔三年我把之前給我妹寫的畢業(yè)論文的網(wǎng)站頁(yè)面寫出來(lái)一下哈 供各位小伙伴參考參考哈 不接受批評(píng)反駁哈哈哈哈哈哈哈 都是我自己胡亂搭的圖片和文字 可自行更改，按照自己的審美喜好來(lái)哈！
先看頁(yè)面的圖片哈
首頁(yè)：
<body>
<div class="home">
<div class="content">
<div class="stars"></div>
<img class="bgc" src="./img/imgs38.jpg" width="100%" alt="">
<h3 class="title">任何東西只要學(xué)了，就是積累，在你感受不到的任何細(xì)節(jié)里。 </h3>
<h3 class="titles">今天也要加油鴨</h3>
<img class="icon" src="./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='./daily.html'><span>Daily</span></a>
<a href='./form.html'><span>Form</span></a>
</div>
</div>
<div class="icons">
<div class="icons_items">
<img class="icons_items_imgs" src="./img/lvtu.png" alt="">
<span>教學(xué)樓是我們每天必去取經(jīng)之地</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="./img/ms.png" alt="">
<span>每天一到飯點(diǎn)都要在食堂里面糾結(jié)到底吃什么</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="./img/zp.png" alt="">
<span>午飯后躺在草坪上曬曬太陽(yáng)欣賞學(xué)校的美景</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="./img/yinlehe.png" alt="">
<span>忙碌又充實(shí)的一天結(jié)束爬上心愛的小床和室友聊聊天</span>
</div>
</div>
<div class="introduce">
<div class="introduce_item">
<img class="introduce_item_img" src="./img/s24.jpg" alt="">
<span class="introduce_item_title">天空還是一片淺藍(lán),轉(zhuǎn)眼間東方出現(xiàn)了一道紅霞,紅霞慢慢地在擴(kuò)大，不大一會(huì)就染紅了小半邊天。顏色紅得可愛， 又 過(guò)了一會(huì)兒,在那個(gè)地方出現(xiàn)了太陽(yáng)的小半邊臉。美好的一天開始了</span>
</div>
<div class="introduce_item">
<span class="introduce_item_titles">當(dāng)清晨的陽(yáng)光灑進(jìn)我們宿舍，鬧鐘開始響起，忙碌的一天又開始了，每個(gè)人睡眼惺忪，從床上爬起，忙忙碌碌的穿梭在食堂與教室之間，充滿了青春的氣息</span>
<img class="introduce_item_img" src="./img/s8.jpg" alt="">
</div>
<div class="introduce_item">
<img class="introduce_item_img" src="./img/s10.png" alt="">
<span class="introduce_item_title">每當(dāng)放學(xué)鈴聲響起，男同學(xué)們瞬間以百米沖刺的速度奔向食堂，當(dāng)我們拖著咕咕叫的肚子到食堂的時(shí)候已經(jīng)人山人海了，從每個(gè)瀏覽一遍，默默的排起了長(zhǎng)隊(duì)加入吃飯大軍。</span>
</div>
<div class="introduce_item">
<span class="introduce_item_titles">溫暖的陽(yáng)光照耀著大地，遠(yuǎn)處的小山都金燦燦的美輪美奐，它穿梭于微隙的氣息。舒倘，漫長(zhǎng)。紫檀的香味，彌漫在春日，把天地間一切空虛盈滿，陽(yáng)光下，是一道纖絕的塵陌，呢喃著天真，充盈著那抹曾經(jīng)深不可測(cè)的孤清而飄逸的影。</span>
<img class="introduce_item_img" src="./img/s6.jpg" alt="">
</div>
<div class="introduce_item">
<img class="introduce_item_img" src="./img/s4.jpg" alt="">
<span class="introduce_item_title">當(dāng)晚自習(xí)結(jié)束后，抬頭望向天空，幾顆大而亮的星星掛在夜空，仿佛是天上的人兒提著燈籠在巡視那浩瀚的太空。美麗極了，裹緊衣裳，在這優(yōu)美的夜色中慢慢的走回宿舍。</span>
</div>
<div class="introduce_item">
<span class="introduce_item_titles">夜空掛滿了星星一閃一閃，銀白色的月光灑在地上，到處都有蟋蟀的叫聲。夜的香氣彌漫在空中，織成了一個(gè)柔軟的網(wǎng)，把所有的景物都罩在里面。眼睛接觸到的都是罩上這個(gè)柔軟的網(wǎng)的東西，任是一草一木，都不像在白天里那樣現(xiàn)實(shí)了，它們都有著模糊、空幻的色彩，每一樣都隱藏了它的細(xì)致之點(diǎn)，都保守著它的秘密，如夢(mèng)如幻。</span>
<img class="introduce_item_img" src="./img/s35.jpg" alt="">
</div>
</div>
<audio autoplay="autoplay" loop="loop" id="audio" loop="loop">
<source src="./music.mp3" type="audio/MP3">
</audio>
<img class="music_img" src="./img/music_img.png" alt="">
</div>
</body>
<script>
let mucics = document.getElementById('audio')
document.body.addEventListener('mousemove', function() {
setTimeout(() => {
mucics.play();
}, 2000);
}, false);
</script>
</html>
樣式：
* {
margin: 0;
padding: 0
}
.home {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
padding-bottom: 60px;
}
.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;
left: 49%;
bottom: 80px;
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: 800px;
height: 600px;
border-radius: 10px;
}
.introduce_item_title {
width: 300px;
font-size: 18px;
line-height: 36px;
align-self: center;
padding-left: 100px;
}
.introduce_item_titles {
width: 300px;
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 {
width: 100%;
display: flex;
justify-content: space-around;
box-sizing: border-box;
overflow: hidden;
}
.icons_items {
display: flex;
flex-direction: column;
font-size: 20px;
margin-top: 80px;
width: 200px;
}
.icons_items_imgs {
width: 200px;
margin-bottom: 30px;
}
關(guān)于我頁(yè)面圖片
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>關(guān)于我們</title>
<link rel="stylesheet" href="./css/about.css">
</head>
<body>
<div class="about">
<h3 class="about_tit">要不斷的努力，才能成為更好的自己</h3>
<img class="about_bgc" src="./img/s36.jpg" alt="">
<div class='ribbon'>
<a href='./index.html'><span>Home</span></a>
<a href='./about.html'><span>About</span></a>
<a href='./daily.html'><span>Daily</span></a>
<a href='./form.html'><span>Form</span></a>
</div>
<div class="iconlist">
<div class="iconitem">
<img src="./img/xigua.png" class="iconimg" alt="">
<p>美食在手天下我有</p>
</div>
<div class="iconitem">
<img src="./img/bjl.png" class="iconimg" alt="">
<p>日常心愿早日暴富</p>
</div>
<div class="iconitem">
<img src="./img/zhaoxiangji.png" class="iconimg" alt="">
<p>開開心心過(guò)每一天</p>
</div>
<div class="iconitem">
<img src="./img/xuegao.png" class="iconimg" alt="">
<p>唯有美食不可辜負(fù)</p>
</div>
</div>
<div class="me">
<img class="me_img" src="./img/imgs19.jpg" alt="">
<span class="me_tit animate ">上大學(xué)前，
做著在圖書館抱一堆書灑落一地
然后邂逅一個(gè)人的夢(mèng)；
上了大學(xué)才發(fā)現(xiàn)，
那種事情一般不會(huì)發(fā)生。
<p>
上大學(xué)前，
那時(shí)候純真可愛，
那時(shí)候努力認(rèn)真，
那時(shí)候有目標(biāo)有信仰，
那時(shí)候有多少美麗的期盼。
上大學(xué)后，夢(mèng)想是夢(mèng)想，現(xiàn)實(shí)是現(xiàn)實(shí)。
</p>
<p>
當(dāng)你跨入大學(xué)校園之后，你是不是發(fā)現(xiàn)其實(shí)考上大學(xué)的你并沒(méi)有實(shí)現(xiàn)所謂真正意義上的解放。
你需要面對(duì)繁重的學(xué)業(yè)壓力；
你需要平衡學(xué)習(xí)、工作、生活；
你需要思考未來(lái)四年如何度過(guò)；
......
學(xué)習(xí)、交友、社團(tuán)活動(dòng)、旅游、戀愛、培養(yǎng)興趣，處理人際關(guān)系，適應(yīng)大學(xué)生活等等，甚至是一張回家的火車票也會(huì)讓遠(yuǎn)離家的你費(fèi)勁周折。
大學(xué)那些事兒看起來(lái)似乎瑣碎無(wú)比，但細(xì)心品味后也會(huì)帶給你會(huì)心地一笑。無(wú)論眼前的大學(xué)生活多么“茍且”，也要向著詩(shī)和遠(yuǎn)方。
夢(mèng)想一定要有的，任何人都應(yīng)該有，也應(yīng)該被人們所尊重。正因?yàn)榭释?，所以想要擁有，才?huì)想辦法慢慢走向那個(gè)方向。在前進(jìn)的道路上都會(huì)有坑坑洼洼，但要學(xué)會(huì)左手安慰右手，不斷成長(zhǎng)自己！
</p>
</span>
</div>
<div class="aboutinfo">
<div class="info_item">
<img src="./img/imgs15.jpg" class="infoimg" alt="">
<div class="infos">
<h3>關(guān)于學(xué)習(xí)</h3>
<span>
當(dāng)你滿心歡喜的走進(jìn)大學(xué)校園，你會(huì)發(fā)現(xiàn)，這里的一切都跟你所想的不一樣。
逃課了，你的輔導(dǎo)員老師會(huì)找你談心談話；不交作業(yè)，你的輔導(dǎo)員老師會(huì)找你談心談話；掛科了，你的輔導(dǎo)員老師會(huì)找你談心談話；
你會(huì)發(fā)現(xiàn)不論是專業(yè)核心課程，還是公共選修課程，確實(shí)有那么幾位童鞋每次上課都坐在第一排那個(gè)離老師最近的位置，每堂課都認(rèn)真地跟著老師的思路在記筆記。
你會(huì)發(fā)現(xiàn)一個(gè)寢室里總有早出晚歸的同學(xué)，他們整天把自己泡在圖書館，總有學(xué)不完的東西要學(xué)，做不完的事情要做。
你會(huì)發(fā)現(xiàn)圖書館里，自習(xí)室里總有一些固定的位子固定的人，無(wú)論刮風(fēng)下雨他們從未缺席。</span>
</div>
</div>
<div class="info_item">
<img src="./img/imgs16.jpg" class="infoimg" alt="">
<div class="infos">
<h3>關(guān)于能力提升</h3>
<span> 首先可以通過(guò)考證或是參加各種學(xué)科競(jìng)賽拿獎(jiǎng)來(lái)證實(shí)自己的硬實(shí)力，但也千萬(wàn)不要忘了提升自己的軟實(shí)力，比如社會(huì)交際能力，自我管理能力，環(huán)境適應(yīng)能力，語(yǔ)言表達(dá)能力等等。還要學(xué)會(huì)兩種能力：一是獨(dú)立思考的思維能力；二是不斷學(xué)習(xí)的學(xué)習(xí)力。學(xué)會(huì)用自己的思想做判斷，學(xué)會(huì)對(duì)別人的一些思想進(jìn)行思考，學(xué)會(huì)用自己的邏輯思維處理問(wèn)題，學(xué)會(huì)從多角度考慮問(wèn)題，你就會(huì)知道自己究竟需要些什么，也就知道自己的目標(biāo)，自己的方向的在哪里。社會(huì)進(jìn)步很快，即使是博士碩士，如果不持續(xù)的學(xué)習(xí)下去，遲早會(huì)被別人超越，畢竟知識(shí)是與時(shí)俱進(jìn)的。
路漫漫其修遠(yuǎn)兮，上下求索才能成就更好的自己。</span>
</div>
</div>
<div class="info_item">
<img src="./img/imgs36.jpg" class="infoimg" alt="">
<div class="infos">
<h3>關(guān)于學(xué)生活動(dòng)</h3>
<span> 剛進(jìn)入大學(xué)，你還會(huì)發(fā)現(xiàn)自己變得很糾結(jié)。因?yàn)橹車泻芏嘣谀阊劾锖軆?yōu)秀的或是很一般的童鞋忙到飛，他們有各種社團(tuán)活動(dòng)，學(xué)生會(huì)工作要參加，而你卻還在糾結(jié)是不是自己也該加入一個(gè)社團(tuán)，在團(tuán)委學(xué)生會(huì)謀個(gè)“位子”～如果你想要做的，別猶豫，去嘗試！跨出一小步，就是進(jìn)步一大步。有得必有失，最關(guān)鍵的要平衡好學(xué)習(xí)、工作、生活。忙碌著，充實(shí)著，快樂(lè)著，這也是一種最好的狀態(tài)！</span>
</div>
</div>
<div class="info_item">
<img src="./img/imgs20.jpg" class="infoimg" alt="">
<div class="infos">
<h3>關(guān)于生活趣事兒</h3>
<span> 相信每一個(gè)讀過(guò)大學(xué)的人，都會(huì)感嘆大學(xué)生活的豐富多彩。不同的人，不同的大學(xué)也都會(huì)有著不同的生活。幾年大學(xué)讀下來(lái)，都會(huì)經(jīng)歷各種忍俊不禁的趣事。
進(jìn)入大學(xué)，你就要慢慢生活的學(xué)會(huì)獨(dú)立自主，入學(xué)后你才會(huì)發(fā)現(xiàn)離開媽媽以后需要自己裝被套，可是洗完被套之后你竟然發(fā)現(xiàn)自己壓根兒不會(huì)。
你的室友來(lái)自天南地北，你會(huì)發(fā)現(xiàn)南方的同學(xué)或是少數(shù)民族的同學(xué)和家人打電話時(shí)竟然說(shuō)的是一門“外國(guó)語(yǔ)”，你能聽懂的就只是對(duì)話的一頭一尾，“爸爸/媽媽......拜拜~”。大學(xué)那些事兒看起來(lái)似乎瑣碎無(wú)比，但細(xì)心品味后也會(huì)帶給你會(huì)心地一笑。無(wú)論眼前的大學(xué)生活多么“茍且”，也要向著詩(shī)和遠(yuǎn)方。</span>
</div>
</div>
</div>
</div>
</body>
</html>
樣式：
* {
margin: 0;
padding: 0;
}
.about {
width: 100%;
height: 100%;
overflow: hidden;
padding-bottom: 60px;
}
.about_bgc {
width: 100%;
height: 500px;
}
@keyframes fadeIn {
0% {
opacity: 0;
/*初始狀態(tài) 透明度為0*/
}
50% {
opacity: 0;
/*中間狀態(tài) 透明度為0*/
}
100% {
opacity: 1;
/*結(jié)尾狀態(tài) 透明度為1*/
}
}
.about_tit {
position: absolute;
top: 280px;
left: 0;
right: 0;
font-size: 28px;
font-weight: 550;
padding-bottom: 40px;
bottom: 0;
width: 800px;
margin: auto;
text-align: center;
-webkit-animation-name: fadeIn;
/*動(dòng)畫名稱*/
-webkit-animation-duration: 3s;
/*動(dòng)畫持續(xù)時(shí)間*/
-webkit-animation-iteration-count: 1;
/*動(dòng)畫次數(shù)*/
-webkit-animation-delay: 0s;
}
.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;
padding: 0 50px;
}
.me_tit {
width: 600px;
line-height: 36px;
font-size: 18px;
margin-left: 40px;
margin-top: 50px;
font-weight: 550;
}
.me_img {
width: 700px;
height: 500px;
}
.animate {
padding-left: 20px;
width: 500px;
font-size: 16px;
color: #9B8651;
animation: 15s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateY(100px);
-webkit-transform: translateY(100px);
}
100% {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}
}
.iconlist {
width: 100%;
display: flex;
justify-content: space-around;
padding: 60px 50px;
}
.iconimg {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid #ccc;
}
.iconitem p {
padding-top: 20px;
color: #666;
}
.aboutinfo {
padding: 60px 200px;
}
.info_item {
display: flex;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 45px;
border-radius: 5px;
justify-content: space-between;
}
.infoimg {
width: 200px;
height: 180px;
margin-right: 15px;
flex-shrink: 0;
}
.info_item h3 {
margin-bottom: 5px;
}
.info_item span {
font-size: 16px;
color: #666;
}
日常頁(yè)面：
代碼
css樣式和form共用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>日常</title>
<link rel="stylesheet" href="./css/from.css">
</head>
<body>
<div class="daily">
<h3 class="about_tit">生活需要熱情 更需要自律</h3>
<h4 class="about_tits">積極和勤奮 否則</h4>
<h4 class="about_titl">生活只是日歷上的天數(shù)</h4>
<h4 class="about_titt">希望我們每一個(gè)人 都可以被命運(yùn)厚待 </h4>
<img class="about_bgc" src="./img/from2.png" alt="">
<div class='ribbon'>
<a href='./index.html'><span>Home</span></a>
<a href='./about.html'><span>About</span></a>
<a href='./daily.html'><span>Daily</span></a>
<a href='./form.html'><span>Form</span></a>
</div>
<div class="dailylist">
<h3 class="list_titls">上了大學(xué)后才知道的事</h3>
<div class="item_info">
<span class="line">1</span>
<img src="./img/s9.jpg" class="imgsinfo" alt="">
<div class="rights">
<span class="right_tit">大學(xué)的學(xué)生生活有多好？</span>
<p>我們學(xué)校是一個(gè)好學(xué)校!我們雖然下課晚，但是我們上課早啊!我們雖然休息少，但是我們加課多啊!我們雖然冬天冷，但是我們夏天熱啊!我們雖然放假晚，但是我們開學(xué)早啊!我們雖然活動(dòng)少，但是我們作業(yè)多啊!找學(xué)校，就該選這樣的!上更多的學(xué)，放更少的假!</p>
</div>
</div>
<div class="item_info">
<span class="line">2</span>
<img src="./img/s7.jpg" class="imgsinfo" alt="">
<div class="rights">
<span class="right_tit">上了大學(xué)就輕松了？</span>
<p> 當(dāng)然，特別輕松 跟當(dāng)年老師說(shuō)的一模一樣 每天可以睡到自然醒 根本沒(méi)有人管你 中午餓了就可以叫外賣 吃完就可以睡午覺(jué)了 睡醒繼續(xù)玩游戲 連宿舍都不用自己收拾 每個(gè)宿舍都有空調(diào) 冬暖夏涼 戀愛自由，隨心就好 平時(shí)上課根本不用學(xué)習(xí) 考試輕輕松松就能過(guò) 等等諸如此類童話雞湯。是時(shí)候告訴你們真相了的，大學(xué)一天最多四節(jié)課，但這四節(jié)課一.上就是一天;大學(xué)沒(méi)有畢自習(xí)，但是依然要畢起占座，不然只能接受坐最后一排的凄慘命運(yùn)了;如果比較幸運(yùn)的話，你還會(huì)參加晚自習(xí)的洗禮
</p>
</div>
</div>
<div class="item_info">
<span class="line">3</span>
<img src="./img/from3.jpg" class="imgsinfo" alt="">
<div class="rights">
<span class="right_tit">大學(xué)是所“整容院”</span>
<p>大學(xué)是所“整容院” 看過(guò)無(wú)數(shù)個(gè)大學(xué)逆襲了的段子， 上來(lái)大學(xué)之后都成為了男神女神， 然而我， 體重卻和年級(jí)成正比。 正所謂， 師傅領(lǐng)進(jìn)門， 修行靠個(gè)人。 能不能“整容”成功， 就要看你是否具有堅(jiān)定意志啦~無(wú)論什么專業(yè)， 他都會(huì)有好或不好的地方， 你羨慕別人的同時(shí)， 別人可能也在羨慕著你， 既然選擇了就要去學(xué)好它， 因?yàn)槟阋呀?jīng)在這條路上了。后來(lái)我才想明白，與其擔(dān)心未來(lái)，不如現(xiàn)在好好努力。這條路上，只有奮斗才能給你安全感。
</p>
</div>
</div>
<div class="item_info">
<span class="line">4</span>
<img src="./img/s13.jpg" class="imgsinfo" alt="">
<div class="rights">
<span class="right_tit"> 我為什么會(huì)有這樣的奇葩舍友？</span>
<p>''永遠(yuǎn)是她的鬧鐘叫醒了我 '' 相遇很難， 相處更難， </p>
<p>''她定的8個(gè)鬧鐘永遠(yuǎn)叫不醒自己, 卻能叫醒其他所有人''</p>
<p>''凌晨看到他在打游戲, 睡醒看到他還是保持原來(lái)的狀態(tài)''</p>
<p> ''最認(rèn)真的樣子 就是在打王者''從陌生到熟悉 ，</p>
<p>請(qǐng)好好珍惜這段舍友情。因?yàn)楫厴I(yè)之后大家各奔東西，很難能重新聚在一起了</p>
</div>
</div>
<div class="item_info">
<span class="line">5</span>
<img src="./img/s2.jpg" class="imgsinfo" alt="">
<div class="rights">
<span class="right_tit">說(shuō)好的考試范圍？</span>
<p>
我永遠(yuǎn)都不會(huì)忘記大二那年的考試， 課本超級(jí)厚， 老師給我們劃了大半本書書的重點(diǎn)， 最后考的是沒(méi)畫的那小半本！
</p>
<p>你以為上課不聽考試也不會(huì)掛科？ 剛進(jìn)校門的時(shí)候， 學(xué)長(zhǎng)學(xué)姐都是這么說(shuō)的， 高數(shù)幾乎沒(méi)聽過(guò)都考了80多分， 不用慌， 然后…… 信了他們的話我大概是個(gè)傻子。
</p>
<p>盡管我們總是吐槽她的大學(xué)有多不好， 但人往往在快要失去一件東西的時(shí)候， 才會(huì)認(rèn)清自己對(duì)它真正的感覺(jué)。
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
表單頁(yè)面：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>提交</title>
</head>
<style>
* {
margin: 0;
padding: 0
}
.from {
overflow: hidden;
position: relative;
}
.bgc {
width: 100%;
}
.submit {
position: absolute;
z-index: 9;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
margin-top: 150px;
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
}
.form_title {
text-align: center;
margin-top: 40px;
font-size: 18px;
}
.form_input {
padding: 0 30px;
box-sizing: border-box;
display: flex;
margin-top: 20px;
}
.inputs {
height: 40px;
width: 300px;
border-radius: 5px;
border: none;
background-color: #eee;
color: #666;
padding-left: 20px;
}
.form_input span {
width: 85px;
align-self: center;
}
.btn_submit {
align-self: center;
}
.btn {
border: none;
width: 80px;
height: 40px;
color: #fff;
border-radius: 5px;
background: #999;
margin-top: 40px;
}
.btn:hover {
background: #666;
}
.back {
margin-left: 10px;
}
.home_href {
border: none;
width: 80px;
height: 40px;
color: #fff;
border-radius: 5px;
background: #FFD204;
}
</style>
<body>
<div class="from">
<img class="bgc" src="./img/imgs42.jpg" alt="">
<div class="submit">
<span class="form_title">個(gè)人信息提交</span>
<div class="form_input">
<span>姓名：</span>
<input class="inputs" type="text" value="xxx">
</div>
<div class="form_input">
<span>班級(jí):</span>
<input class="inputs" type="text" value="移動(dòng)交互應(yīng)用技術(shù)一班">
</div>
<div class="form_input">
<span>學(xué)號(hào)：</span>
<input class="inputs" type="text" value="20202020202002202020">
</div>
<div class="form_input">
<span>系部：</span>
<input class="inputs" type="text" value="信息工程系">
</div>
<div class="form_input">
<span>課程名稱：</span>
<input class="inputs" type="text" value="網(wǎng)頁(yè)設(shè)計(jì)與制作">
</div>
<div class="btn_submit">
<a href="./finish.html">
<button class="btn">提交</button></a>
<a href="./index.html" class="back"><button class="home_href">首頁(yè)</button></a>
</div>
</div>
</div>
</body>
</html>
樣式：
* {
margin: 0;
padding: 0
}
.from {
overflow: hidden;
position: relative;
}
.bgc {
width: 100%;
}
.submit {
position: absolute;
z-index: 9;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
margin-top: 150px;
width: 600px;
height: 600px;
padding: 0 30px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
}
.form_title {
text-align: center;
margin-top: 40px;
font-size: 18px;
margin-bottom: 40px;
}
.form_input span {
align-self: center;
line-height: 36px;
}
.btn_submit {
align-self: center;
margin-top: 40px;
}
.btn {
border: none;
width: 80px;
height: 40px;
color: #fff;
border-radius: 5px;
background: #999;
margin-top: 40px;
}
.btn:hover {
background: #666;
}
.back {
margin-left: 10px;
}
.home_href {
border: none;
width: 80px;
height: 40px;
color: #fff;
border-radius: 5px;
background: #FFD204;
}
.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;
}
.daily {
width: 100%;
height: 100%;
overflow: hidden;
padding-bottom: 60px;
}
.about_bgc {
width: 100%;
height: 500px;
}
.about_tit,
.about_titt,
.about_tits,
.about_titl {
position: absolute;
top: 200px;
left: 0;
right: 0;
font-size: 28px;
font-weight: 550;
bottom: 0;
width: 800px;
margin: auto;
text-align: center;
}
.about_tits {
top: 250px;
}
.about_titl {
top: 300px;
}
.about_titt {
top: 350px;
}
.dailylist {
padding: 30px 200px;
}
.line {
color: #fff;
background-color: #FFD204;
border-radius: 50%;
display: block;
font-size: 20px;
font-weight: 550;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
position: relative;
}
.line::after {
position: absolute;
top: 60px;
content: '';
width: 4px;
background-color: #FFD204;
height: 400px;
left: 30px;
}
.list_titls {
padding: 30px;
text-align: center;
}
.item_info {
display: flex;
margin-bottom: 60px;
}
.imgsinfo {
width: 400px;
height: 250px;
border-radius: 10px;
margin-left: 30px;
margin-right: 20px;
}
.item_info p {
width: 400px;
line-height: 24px;
font-size: 14px;
}
.right_tit {
font-size: 18px;
padding-bottom: 10px;
display: block;
color: #FFD204;
font-weight: 550;
}
提交完成頁(yè)面
代碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-777671.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>提交</title>
</head>
<style>
* {
margin: 0;
padding: 0
}
.finsh {
text-align: center;
font-size: 24px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.finshimg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 800px;
}
.finishword{
position: absolute;
top:300px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: #fff;
}
</style>
<body>
<div class="finsh">
<img class="finshimg" src="./img/finish.jpg" alt="">
<span class="finishword">提交完成</span>
</div>
</body>
</html>
以上就是全部代碼啦！直接復(fù)制代碼 然后替換一下圖片就好啦！??！
下方是全部代碼和圖片的鏈接（付費(fèi)的哈）可根據(jù)需要自行下載
https://download.csdn.net/download/qq_42523321/85601395文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-777671.html
到了這里，關(guān)于用HTML+CSS做一個(gè)漂亮簡(jiǎn)單的個(gè)人網(wǎng)頁(yè)（第二篇）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
