用HTML+CSS做一个漂亮简单的个人网页（第二篇）
时隔三年我把之前给我妹写的毕业论文的网站页面写出来一下哈 供各位小伙伴参考参考哈 不接受批评反驳哈哈哈哈哈哈哈 都是我自己胡乱搭的图片和文字 可自行更改，按照自己的审美喜好来哈！
先看页面的图片哈
首页：
<body>
<div class="home">
<div class="content">
<div class="stars"></div>
<img class="bgc" src="./img/imgs38.jpg" width="100%" alt="">
<h3 class="title">任何东西只要学了，就是积累，在你感受不到的任何细节里。 </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>教学楼是我们每天必去取经之地</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="./img/ms.png" alt="">
<span>每天一到饭点都要在食堂里面纠结到底吃什么</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="./img/zp.png" alt="">
<span>午饭后躺在草坪上晒晒太阳欣赏学校的美景</span>
</div>
<div class="icons_items">
<img class="icons_items_imgs" src="./img/yinlehe.png" alt="">
<span>忙碌又充实的一天结束爬上心爱的小床和室友聊聊天</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">天空还是一片浅蓝,转眼间东方出现了一道红霞,红霞慢慢地在扩大，不大一会就染红了小半边天。颜色红得可爱， 又 过了一会儿,在那个地方出现了太阳的小半边脸。美好的一天开始了</span>
</div>
<div class="introduce_item">
<span class="introduce_item_titles">当清晨的阳光洒进我们宿舍，闹钟开始响起，忙碌的一天又开始了，每个人睡眼惺忪，从床上爬起，忙忙碌碌的穿梭在食堂与教室之间，充满了青春的气息</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">每当放学铃声响起，男同学们瞬间以百米冲刺的速度奔向食堂，当我们拖着咕咕叫的肚子到食堂的时候已经人山人海了，从每个浏览一遍，默默的排起了长队加入吃饭大军。</span>
</div>
<div class="introduce_item">
<span class="introduce_item_titles">温暖的阳光照耀着大地，远处的小山都金灿灿的美轮美奂，它穿梭于微隙的气息。舒倘，漫长。紫檀的香味，弥漫在春日，把天地间一切空虚盈满，阳光下，是一道纤绝的尘陌，呢喃着天真，充盈着那抹曾经深不可测的孤清而飘逸的影。</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">当晚自习结束后，抬头望向天空，几颗大而亮的星星挂在夜空，仿佛是天上的人儿提着灯笼在巡视那浩瀚的太空。美丽极了，裹紧衣裳，在这优美的夜色中慢慢的走回宿舍。</span>
</div>
<div class="introduce_item">
<span class="introduce_item_titles">夜空挂满了星星一闪一闪，银白色的月光洒在地上，到处都有蟋蟀的叫声。夜的香气弥漫在空中，织成了一个柔软的网，把所有的景物都罩在里面。眼睛接触到的都是罩上这个柔软的网的东西，任是一草一木，都不像在白天里那样现实了，它们都有着模糊、空幻的色彩，每一样都隐藏了它的细致之点，都保守着它的秘密，如梦如幻。</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;
}
关于我页面图片
代码：
<!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/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>开开心心过每一天</p>
</div>
<div class="iconitem">
<img src="./img/xuegao.png" class="iconimg" alt="">
<p>唯有美食不可辜负</p>
</div>
</div>
<div class="me">
<img class="me_img" src="./img/imgs19.jpg" alt="">
<span class="me_tit animate ">上大学前，
做着在图书馆抱一堆书洒落一地
然后邂逅一个人的梦；
上了大学才发现，
那种事情一般不会发生。
<p>
上大学前，
那时候纯真可爱，
那时候努力认真，
那时候有目标有信仰，
那时候有多少美丽的期盼。
上大学后，梦想是梦想，现实是现实。
</p>
<p>
当你跨入大学校园之后，你是不是发现其实考上大学的你并没有实现所谓真正意义上的解放。
你需要面对繁重的学业压力；
你需要平衡学习、工作、生活；
你需要思考未来四年如何度过；
......
学习、交友、社团活动、旅游、恋爱、培养兴趣，处理人际关系，适应大学生活等等，甚至是一张回家的火车票也会让远离家的你费劲周折。
大学那些事儿看起来似乎琐碎无比，但细心品味后也会带给你会心地一笑。无论眼前的大学生活多么“苟且”，也要向着诗和远方。
梦想一定要有的，任何人都应该有，也应该被人们所尊重。正因为渴望，所以想要拥有，才会想办法慢慢走向那个方向。在前进的道路上都会有坑坑洼洼，但要学会左手安慰右手，不断成长自己！
</p>
</span>
</div>
<div class="aboutinfo">
<div class="info_item">
<img src="./img/imgs15.jpg" class="infoimg" alt="">
<div class="infos">
<h3>关于学习</h3>
<span>
当你满心欢喜的走进大学校园，你会发现，这里的一切都跟你所想的不一样。
逃课了，你的辅导员老师会找你谈心谈话；不交作业，你的辅导员老师会找你谈心谈话；挂科了，你的辅导员老师会找你谈心谈话；
你会发现不论是专业核心课程，还是公共选修课程，确实有那么几位童鞋每次上课都坐在第一排那个离老师最近的位置，每堂课都认真地跟着老师的思路在记笔记。
你会发现一个寝室里总有早出晚归的同学，他们整天把自己泡在图书馆，总有学不完的东西要学，做不完的事情要做。
你会发现图书馆里，自习室里总有一些固定的位子固定的人，无论刮风下雨他们从未缺席。</span>
</div>
</div>
<div class="info_item">
<img src="./img/imgs16.jpg" class="infoimg" alt="">
<div class="infos">
<h3>关于能力提升</h3>
<span> 首先可以通过考证或是参加各种学科竞赛拿奖来证实自己的硬实力，但也千万不要忘了提升自己的软实力，比如社会交际能力，自我管理能力，环境适应能力，语言表达能力等等。还要学会两种能力：一是独立思考的思维能力；二是不断学习的学习力。学会用自己的思想做判断，学会对别人的一些思想进行思考，学会用自己的逻辑思维处理问题，学会从多角度考虑问题，你就会知道自己究竟需要些什么，也就知道自己的目标，自己的方向的在哪里。社会进步很快，即使是博士硕士，如果不持续的学习下去，迟早会被别人超越，毕竟知识是与时俱进的。
路漫漫其修远兮，上下求索才能成就更好的自己。</span>
</div>
</div>
<div class="info_item">
<img src="./img/imgs36.jpg" class="infoimg" alt="">
<div class="infos">
<h3>关于学生活动</h3>
<span> 刚进入大学，你还会发现自己变得很纠结。因为周围有很多在你眼里很优秀的或是很一般的童鞋忙到飞，他们有各种社团活动，学生会工作要参加，而你却还在纠结是不是自己也该加入一个社团，在团委学生会谋个“位子”～如果你想要做的，别犹豫，去尝试！跨出一小步，就是进步一大步。有得必有失，最关键的要平衡好学习、工作、生活。忙碌着，充实着，快乐着，这也是一种最好的状态！</span>
</div>
</div>
<div class="info_item">
<img src="./img/imgs20.jpg" class="infoimg" alt="">
<div class="infos">
<h3>关于生活趣事儿</h3>
<span> 相信每一个读过大学的人，都会感叹大学生活的丰富多彩。不同的人，不同的大学也都会有着不同的生活。几年大学读下来，都会经历各种忍俊不禁的趣事。
进入大学，你就要慢慢生活的学会独立自主，入学后你才会发现离开妈妈以后需要自己装被套，可是洗完被套之后你竟然发现自己压根儿不会。
你的室友来自天南地北，你会发现南方的同学或是少数民族的同学和家人打电话时竟然说的是一门“外国语”，你能听懂的就只是对话的一头一尾，“爸爸/妈妈......拜拜~”。大学那些事儿看起来似乎琐碎无比，但细心品味后也会带给你会心地一笑。无论眼前的大学生活多么“苟且”，也要向着诗和远方。</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;
/*初始状态 透明度为0*/
}
50% {
opacity: 0;
/*中间状态 透明度为0*/
}
100% {
opacity: 1;
/*结尾状态 透明度为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;
/*动画名称*/
-webkit-animation-duration: 3s;
/*动画持续时间*/
-webkit-animation-iteration-count: 1;
/*动画次数*/
-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;
}
日常页面：
代码
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">生活只是日历上的天数</h4>
<h4 class="about_titt">希望我们每一个人 都可以被命运厚待 </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">上了大学后才知道的事</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">大学的学生生活有多好？</span>
<p>我们学校是一个好学校!我们虽然下课晚，但是我们上课早啊!我们虽然休息少，但是我们加课多啊!我们虽然冬天冷，但是我们夏天热啊!我们虽然放假晚，但是我们开学早啊!我们虽然活动少，但是我们作业多啊!找学校，就该选这样的!上更多的学，放更少的假!</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">上了大学就轻松了？</span>
<p> 当然，特别轻松 跟当年老师说的一模一样 每天可以睡到自然醒 根本没有人管你 中午饿了就可以叫外卖 吃完就可以睡午觉了 睡醒继续玩游戏 连宿舍都不用自己收拾 每个宿舍都有空调 冬暖夏凉 恋爱自由，随心就好 平时上课根本不用学习 考试轻轻松松就能过 等等诸如此类童话鸡汤。是时候告诉你们真相了的，大学一天最多四节课，但这四节课一.上就是一天;大学没有毕自习，但是依然要毕起占座，不然只能接受坐最后一排的凄惨命运了;如果比较幸运的话，你还会参加晚自习的洗礼
</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">大学是所“整容院”</span>
<p>大学是所“整容院” 看过无数个大学逆袭了的段子， 上来大学之后都成为了男神女神， 然而我， 体重却和年级成正比。 正所谓， 师傅领进门， 修行靠个人。 能不能“整容”成功， 就要看你是否具有坚定意志啦~无论什么专业， 他都会有好或不好的地方， 你羡慕别人的同时， 别人可能也在羡慕着你， 既然选择了就要去学好它， 因为你已经在这条路上了。后来我才想明白，与其担心未来，不如现在好好努力。这条路上，只有奋斗才能给你安全感。
</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"> 我为什么会有这样的奇葩舍友？</span>
<p>''永远是她的闹钟叫醒了我 '' 相遇很难， 相处更难， </p>
<p>''她定的8个闹钟永远叫不醒自己, 却能叫醒其他所有人''</p>
<p>''凌晨看到他在打游戏, 睡醒看到他还是保持原来的状态''</p>
<p> ''最认真的样子 就是在打王者''从陌生到熟悉 ，</p>
<p>请好好珍惜这段舍友情。因为毕业之后大家各奔东西，很难能重新聚在一起了</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">说好的考试范围？</span>
<p>
我永远都不会忘记大二那年的考试， 课本超级厚， 老师给我们划了大半本书书的重点， 最后考的是没画的那小半本！
</p>
<p>你以为上课不听考试也不会挂科？ 刚进校门的时候， 学长学姐都是这么说的， 高数几乎没听过都考了80多分， 不用慌， 然后…… 信了他们的话我大概是个傻子。
</p>
<p>尽管我们总是吐槽她的大学有多不好， 但人往往在快要失去一件东西的时候， 才会认清自己对它真正的感觉。
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</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
}
.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">个人信息提交</span>
<div class="form_input">
<span>姓名：</span>
<input class="inputs" type="text" value="xxx">
</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="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="网页设计与制作">
</div>
<div class="btn_submit">
<a href="./finish.html">
<button class="btn">提交</button></a>
<a href="./index.html" class="back"><button class="home_href">首页</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;
}
提交完成页面
代码：
<!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>
以上就是全部代码啦！直接复制代码 然后替换一下图片就好啦！！！
下方是全部代码和图片的链接（付费的哈）可根据需要自行下载
https://download.csdn.net/download/qq_42523321/85601395
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码