1000字范文 > 【项目】网页设计期中期末大作业HTML+CSS+JS web前端开发技术.个人博客

【项目】网页设计期中期末大作业HTML+CSS+JS web前端开发技术.个人博客

时间：2018-11-10 03:34:58

不废话，我们直接来展示！

1、效果图：

2、源代码：

登陆页面html

Logim.html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="Login.css"><title>蚂省大学校园文化网</title></head><body><section><div class="color"></div><div class="color"></div><div class="color"></div><div class="box"><div class="circle" style="--x:0"></div><div class="circle" style="--x:1"></div><div class="circle" style="--x:2"></div><div class="circle" style="--x:3"></div><div class="circle" style="--x:4"></div><div class="container"><div class="form"><h2>蚂省大学校园文化网</h2><form><div class="inputBox"><input type="text" placeholder="账号"></div><div class="inputBox"><input type="password" placeholder="密码"></div><div id="one1"><div class="inputBox"><input type="submit" value="登录"></div></div><div class="inputBox"><input type="submit" value="游客访问"onclick="window.open('home.html')"> </div><p class="forget">忘记密码?<a href="#">点击这里</a></p><p class="forget">没有账户?<a href="#">注册</a></p></form></div></div></div><audio autoplay="autoplay" loop="loop" preload="auto"src="">你的浏览器版本太低，不支持audio标签</audio></section></body></html>

登陆页面css

Logim.css:

/* 羝��ゆ�頵��莅よ捷莊�鐚�篏粋捷罅��莨壕��弱��膣��width��height�� */* {margin: 0;padding: 0;box-sizing: border-box;}/* 篏睡��flex絽�絮�鐚�莅��絎劫��翫��羂翫抗絮�筝� */section {/* �後�絎�篏� */position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;min-height: 100vh;/* linear-gradient() �醇�亥��綮坂�筝�；腓坂犬腱��紊�腱�蘂��牙鎖�ф��丞�� */background: linear-gradient(to bottom, #f1f4f9, #dff1ff);}/* �� */section .color {/* 膸�絲劫�篏� */position: absolute;/* 篏睡��filter(羯ら��) 絮��э�膸��上�顒丞舟蕭��─膤�*/filter: blur(200px);}/* :nth-child(n) ��拷��九��膣�筝㊦��膃� n 筝��膣� */section .color:nth-child(1) {top: -350px;width: 600px;height: 600px;background: #334d50; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #cbcaa5, #334d50); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #cbcaa5, #334d50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}section .color:nth-child(2) {bottom: -150px;left: 100px;width: 500px;height: 500px;background: #FC354C; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #0ABFBC, #FC354C); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #0ABFBC, #FC354C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}section .color:nth-child(3) {bottom: 50px;right: 100px;width: 500px;height: 500px;background: #DC2424; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #4A569D, #DC2424); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #4A569D, #DC2424); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}.box {position: relative;}/* ��桁�� */.box .circle {position: absolute;background: rgba(255, 255, 255, 0.1);/* backdrop-filter絮��т減筝�筝��膣��√�阪��羞糸��罔∞�� */backdrop-filter: blur(5px);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);border-radius: 50%;/* 篏睡��filter(羯ら��) 絮��э��劫�蘂��蚊��hue-rotate(deg) 膸��上�鎺��牙�御��莉� calc() �醇�亥��莅∞��水墾�� var() �醇�域��箙��CSS絮��у��x*/filter: hue-rotate(calc(var(--x) * 70deg));/* 莪��animate鐚��荀�10s絎��誌�linear茵�ず��私��紊翫�医鮎��綺��後��鐚�infinite��絎��糸�莚ュ妾�ｯ�㊥�丈��罨�*/animation: animate 10s linear infinite;/* ��莅∞��糸散菴��腱��㊥�� */animation-delay: calc(var(--x) * -1s);}/* �� */@keyframes animate {0%, 100%, {transform: translateY(-50px);}50% {transform: translateY(50px);}}.box .circle:nth-child(1) {top: -50px;right: -60px;width: 100px;height: 100px;}.box .circle:nth-child(2) {top: 150px;left: -100px;width: 120px;height: 120px;z-index: 2;}.box .circle:nth-child(3) {bottom: 50px;right: -60px;width: 80px;height: 80px;z-index: 2;}.box .circle:nth-child(4) {bottom: -80px;left: 100px;width: 60px;height: 60px;}.box .circle:nth-child(5) {top: -80px;left: 140px;width: 60px;height: 60px;}/* �糸�罅��桁�� */.container {position: relative;width: 400px;min-height: 400px;background: rgba(255, 255, 255, 0.1);display: flex;justify-content: center;align-items: center;backdrop-filter: blur(5px);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);}.form {position: relative;width: 100%;height: 100%;padding: 50px;}/* �糸��蘂��桁�� */.form h2 {position: relative;color: #fff;font-size: 21px;font-weight: 600;left: 10px;letter-spacing: 5px;margin-bottom: 30px;cursor: pointer;}/* �糸��蘂��筝��膾炊�桁�� */.form h2::before {content: "";position: absolute;left: 10;bottom: -10px;width: 0px;height: 3px;background: #fff;transition: 2s;}.form h2:hover:before {width: 283px;}.form .inputBox {width: 100%;margin-top: 20px;}/* 莨��ユ��桁�� */.form .inputBox input {width: 100%;padding: 10px 20px;background: rgba(255, 255, 255, 0.2);outline: none;border: none;border-radius: 30px;border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);font-size: 16px;letter-spacing: 1px;color: #fff;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}.form .inputBox input::placeholder {color: #fff;}/*�糸��絖�篏�臀�*/#one1{float: left;margin-left:px;margin-right:60px;} /* �糸��羝後�莅翠��桁�� */ .form .inputBox input[type="submit"] {background: #fff;color: #666;max-width: 100px;margin-bottom: 20px;font-weight: 600;cursor: pointer;}/*羝後��糸�莅丞舟*/.forget {margin-top: 6px;color: #fff;letter-spacing: 1px;}.forget a {color: #fff;font-weight: 600;text-decoration: none;}

主页html

home.html

<!DOCTYPE html><head><meta charset="UTF-8"><link rel="stylesheet" href="home.css"><title>蚂省大学校园文化网</title></head><body><div class="home"><div class="content"><div class="stars"><audio controls="controls" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/黄霄雲 - 星辰大海.mp3"></audio></div><img class="bgc" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/home背景1.png" width="100%" alt=""><h3 class="title">欢迎来到蚂省大学校园文化网</h3><h3 class="titles">我时常回到童年，用一片童心思考问题，很多烦恼的问题就变得易解。</h3><img class="icon" src="" alt=""><div class='ribbon'><a href='home.html'><span>¤Home</span></a><a href='校园生活.html'><span>☀校园生活</span></a><a href='校园美食.html'><span>☺校园美食</span></a><a href='体育.html'><span>●体育</span></a><a href='活动资讯.html'><span>✉活动|资讯</span></a><a href='Login.html'><span>☜登录|注册</span></a></div></div></div><div class="one1"><p class="p1">我时常思考，大学是知识海洋的遨游，是思想的碰撞，还是自我的认知。</p></div><div class="one2"><p class="p2">我时常思考，梦想是最远的远方，还是人间烟火气。</p></div></body></html>

主页css

home.css

* {margin: 0;padding: 0}.home {width: 100%;height: 870px;}.bgc{width: 100%;height: 870px;}.home {overflow: hidden;}.content {perspective: 340px;width: 100%;position: relative;}h1 {color: white;text-align: center;}.stars {position: absolute;top: 50%;left: 50%;width: 3px;height: 3px;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 10s 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-family: 华文琥珀;font-size: 30px;font-weight: 4;}.titles {position: absolute;display: flex;justify-content: center;left: 0;right: 0;top: 350px;margin: auto;bottom: 0;color: #fff;font-size: 21px;font-weight: 650;}.icon {width: 15px;height: 15px;padding: 5px;border: 2px solid #fff;border-radius: 100%;position: absolute;bottom: 50px;animation: downs 2s linear infinite;}.ribbon {display: flex;justify-content: center;position: absolute;right: 70px;top: 10px;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;}.one1{width: 100%;height: 900px;background: url(https://xingqiu-tuchuang-1256524210.cos.ap-/958/1130094031.png) no-repeat;background-size: 100% 900px;}.p1 {position: relative;display: flex;justify-content: center;left: 0;right: 0;top: 450px;margin: auto;bottom: 0;color: white;font-size: 21px;font-weight: 1000;}.one2{width: 100%;height: 1000px;background: url(https://xingqiu-tuchuang-1256524210.cos.ap-/958/1130094217.png) no-repeat;background-size: 100% 1000px;}.p2 {position: relative;display: flex;justify-content: center;left: 0;right: 0;top: 500px;margin: auto;bottom: 0;color: #fff;font-size: 21px;font-weight: 650;}

校园美食页面html

校园美食.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="校园美食.css"><title>蚂省大学校园文化网</title></head><body><div class="home"><div class="content"><div class='ribbon'><a href='home.html'><span>¤Home</span></a><a href='校园生活.html'><span>☀校园生活</span></a><a href='校园美食.html'><span>☺校园美食</span></a><a href='体育.html'><span>●体育</span></a><a href='活动资讯.html'><span>✉活动|资讯</span></a><a href='Login.html'><span>☜登录|注册</span></a></div></div><p class="p1"></p><div class="one2"><div class="wrapper"><div class="cooltea"><div class="liquid"></div><div class="ice-cubes"><div class="ice-cube ice-cube-1"></div><div class="ice-cube ice-cube-2"></div><div class="ice-cube ice-cube-3"></div></div><div class="lemon-slice"></div><div class="leaves"><div class="leave leave-1"></div><div class="leave leave-2"></div><div class="leave leave-3"></div></div><div class="straw"></div><div class="straw-surface"></div><div class="shadow"></div></div></div></div> <div class="box1"><p class="p2">美食种草</p><p class="p3">推荐商家</p></div><div class="box2"><div class="box2_1"><div id="images"><img id="image1" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/美食种草1.png" /><img id="image2" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/美食种草2.png" /><img id="image3" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/美食种草3.png" /><img id="image4" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/美食种草4.png" /><img id="image5" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/美食种草5.png" /></div><div id="slider"><a href="#image1"></a><a href="#image2"></a><a href="#image3"></a><a href="#image4"></a><a href="#image5"></a></div></div><div class="box2_2"><div id="images"><img id="image6" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/推荐商家1.jpg" /><img id="image7" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/推荐商家2.jpg" /><img id="image8" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/推荐商家3.jpg" /><img id="image9" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/推荐商家4.jpg" /><img id="image10" src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/推荐商家5.jpg" /></div><div id="slider"><a href="#image6"></a><a href="#image7"></a><a href="#image8"></a><a href="#image9"></a><a href="#image10"></a></div></div></div><div class="box3"></div></body></html>

校园美食页面css

校园美食.css

* {margin: 0;padding: 0}.home {width: 100%;height: 107px;background-size: 100% 108px;}.content {perspective: 340px;width: 100%;position: relative;}@keyframes fly {from {transform: translateZ(0px);opacity: .6;}to {transform: translateZ(200px);opacity: .8;}}.ribbon {display: flex;justify-content: center;right: 80px;top: 30px;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;}/* å¤æ—¥é¥®å“å°æŽ§ä»¶è®¾ç½® */.wrapper {height: 100%;margin: 60px;}body {background: #e2e9ed;}.wrapper {display: grid;align-items: center;justify-content: center;}.cooltea {position: relative;width: 300px;height: 300px;border: 20px solid #fff;border-radius: 50%;}.cooltea:before {position: absolute;z-index: -2;width: 0;height: 0;content: '';border-top: 150px solid #cfe7f5;border-right: 150px solid #e2e9ed;border-bottom: 150px solid #cfe7f5;border-left: 150px solid #cfe7f5;border-radius: 150px;}.cooltea:after {position: absolute;z-index: -1;top: 70px;right: 70px;bottom: 70px;left: 70px;content: '';border-radius: 50%;background: #5db8b6;}.cooltea .liquid {position: absolute;z-index: 3;top: 20px;right: 20px;bottom: 20px;left: 20px;transform: translatex(-15px);-webkit-animation: liquid 1.5s ease-in-out infinite;animation: liquid 1.5s ease-in-out infinite;border-radius: 50%;background: rgba(139, 233, 193, 0.6);}.cooltea .straw {position: absolute;z-index: 1;bottom: 70px;left: 50%;width: 20px;height: 0;transform: translatex(-50%);border-top: 300px solid #ff7647;border-right: 5px solid transparent;border-left: 5px solid transparent;}.cooltea .straw:before {position: absolute;top: -310px;right: 0;left: 0;height: 20px;content: '';transform: scale(1.5);border-radius: 50%;background: #cd4727;}.cooltea .straw:after {position: absolute;top: -10px;right: 0;left: 0;height: 20px;content: '';border-radius: 50%;background: #ff7647;}.cooltea .straw-surface {position: absolute;z-index: 5;bottom: 240px;left: 50%;width: 25px;height: 0;transform: translatex(-50%);border-top: 100px solid #ff7647;border-right: 2px solid transparent;border-left: 2px solid transparent;}.cooltea .straw-surface:after {position: absolute;top: -10px;right: 0;left: 0;height: 20px;content: '';border-radius: 50%;background: #ff7647;}.cooltea .ice-cubes {transform-origin: 47% 65%;-webkit-animation: ice-cubes 8s ease-in-out infinite;animation: ice-cubes 8s ease-in-out infinite;}.cooltea .ice-cube {width: 80px;height: 80px;border-radius: 20px;background: #fff;}.cooltea .ice-cube.ice-cube-1 {transform: translate(100px, 70px) rotate(10deg);background: #bcdbce;}.cooltea .ice-cube.ice-cube-2 {position: relative;z-index: 2;transform: translate(160px, 100px) rotate(30deg);}.cooltea .ice-cube.ice-cube-3 {transform: translate(40px, 0) rotate(-30deg);}.cooltea .leaves {transform-origin: 46% -42%;-webkit-animation: ice-cubes 12s ease-in-out infinite;animation: ice-cubes 12s ease-in-out infinite;}.cooltea .leave {width: 100px;height: 70px;border-radius: 100px 0;background: #19ab87;}.cooltea .leave:before {position: absolute;width: 1px;height: 115px;content: '';transform: rotate(55deg) translate(10px, -53px);background: #3fc295;}.cooltea .leave.leave-1 {transform: translate(40px, -160px) rotate(-30deg);}.cooltea .leave.leave-2 {transform: translate(160px, -180px) rotate(30deg);}.cooltea .leave.leave-3 {position: relative;z-index: 4;transform: translate(70px, -190px) rotate(80deg);}.cooltea .lemon-slice {position: absolute;z-index: 1;width: 125px;height: 65px;transform: translate(146px, -178px) rotate(45deg);-webkit-animation: lemon 3s ease-in-out infinite;animation: lemon 3s ease-in-out infinite;border: 10px solid #ecf9c0;border-bottom: 0;border-radius: 100px 100px 0 0;background: #cff063;}.cooltea .lemon-slice:before,.cooltea .lemon-slice:after {position: absolute;width: 30px;height: 20px;content: '';border-radius: 50px 0;background: #aad815;}.cooltea .lemon-slice:after {top: 30px;left: 30px;transform: rotate(90deg);}.cooltea .lemon-slice:before {top: 30px;right: 30px;transform: rotate(-40deg);}.cooltea .shadow {position: absolute;z-index: -10;top: 50%;width: 400px;height: 340px;transform: translatey(-50%) rotate(45deg);transform-origin: 20% 100%;background: linear-gradient(to right,rgba(0, 0, 0, 0.2) -60%,rgba(0, 0, 0, 0));}@-webkit-keyframes liquid {from {transform: translatex(-15px);}50% {transform: translatex(15px);}to {transform: translatex(-15px);}}@keyframes liquid {from {transform: translatex(-15px);}50% {transform: translatex(15px);}to {transform: translatex(-15px);}}@-webkit-keyframes ice-cubes {from {transform: rotate(0);}to {transform: rotate(360deg);}}@keyframes ice-cubes {from {transform: rotate(0);}to {transform: rotate(360deg);}}@-webkit-keyframes lemon {from {transform: translate(146px, -178px) rotate(45deg);}50% {transform: translate(146px, -178px) rotate(60deg);}to {transform: translate(146px, -178px) rotate(45deg);}}@keyframes lemon {from {transform: translate(146px, -178px) rotate(45deg);}50% {transform: translate(146px, -178px) rotate(60deg);}to {transform: translate(146px, -178px) rotate(45deg);}}/* ç›’åè®¾ç½® */.box1{width: 100%;height: 80px;float: left;background: #649173; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #DBD5A4, #649173); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #DBD5A4, #649173); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}.box1_1{width: 50%;height: 100%;float:left;background-color: #9B8651;}.box1_2{width: 50%;height: 100%;float: left;background-color: darkgray;}.box2{width: 100%;height: 550px;background-color: #000;}.box2_1{width: 50%;height: 100%;float:left;background-color: aliceblue;}.box2_2{width: 50%;height: 100%;float: left;background-color: springgreen;}.box3{width: 100%;height: 80px;background: #70e1f5; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #ffd194, #70e1f5); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #ffd194, #70e1f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */background-size: 100% 100%;}/* æ–‡æœ¬è®¾ç½® */.p1{position: absolute;left: 1%;bottom: 610px;;font-family:"Cooper Black";font-size: 30px;font-weight: bold;text-shadow: 10px 10px 80px black;color: lime;}.p2{position: absolute;font-family:"åŽæ–‡å½©äº‘";left:20%;bottom: 13%;font-size: 32px;font-weight: bold;text-shadow: 20px 20px 80px black;color: lightgreen;}.p3{position: absolute;font-family:"åŽæ–‡å½©äº‘";left:75%;bottom: 13%;font-size: 32px;font-weight: bold;text-shadow: 20px 20px 80px black;color: lightgreen;}/* æŽ¨èç¾Žé£Ÿè½®æ’è®¾ç½® */#images {width: 100%;height: 550px;overflow: hidden;position: relative;}#images img {width: 100%;height: 550px;position: absolute;top: 0;z-index: 1;opacity: 1;transition: all linear 500ms;-o-transition: all linear 500ms;-moz-transition: all linear 500ms;-webkit-transition: all linear 500ms;}#images img:target {left: 0;z-index: 9;opacity: 1;}#images img:first-child {left: 0;}#slider {width: 150px;height: 15px;margin: 2px auto;}#slider a {text-decoration: none;background: #70e1f5; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #ffd194, #70e1f5); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #ffd194, #70e1f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */border: 1px solid #C6E4F2;padding: 1px 8px;color: #222;margin-right:4px ;border: 2px solid #a1a1a1;/* æŒ‰é’®åœ†è§’è®¾ç½® */width: 300px;/* æŒ‰é’®åœ†è§’è®¾ç½® */border-radius: 25px;/* æŒ‰é’®åœ†è§’è®¾ç½® */}#slider a:hover {background: #C6E4F2;}

体育页面html

体育.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><link rel="stylesheet" href="体育.css" ></head><body><script src="JS/index.js"></script><div class='ribbon'><a href='home.html'><span>¤Home</span></a><a href='校园生活.html'><span>☀校园生活</span></a><a href='校园美食.html'><span>☺校园美食</span></a><a href='体育.html'><span>●体育</span></a><a href='活动资讯.html'><span>✉活动|资讯</span></a><a href='Login.html'><span>☜登录|注册</span></a></div><div class="wrap"><div class="logo"><img src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/体育logo.png" alt="" class="cartoon_0" ></div><div class="banner"><div class="desc"><div class="name"><h1>体育</h1><br><div class="line"></div><br><p>健康 | 热爱 | 自信</p><br></div><p>将喜欢的一切留在身边，这便是努力的意义。</p></div></div><div class="content"><ul class="box"><li><img src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/1130095640.png"alt=""><div class="text">校园风采</div></li><li><img src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/1130095714.png" alt=""><li><img src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/1130095752.png" alt=""></li></li><li><img src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/体育百叶窗4.png" alt=""></li><li><img src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/体育百叶窗5.png" alt=""></li><li><img src="https://xingqiu-tuchuang-1256524210.cos.ap-/958/体育百叶窗6.png" alt=""></li></ul></div><div class="message"><div class="message_content"><div class="left"><div class="ta"><textarea class="text" name="text" id="text" cols="100" rows="100" placeholder="给我们留言吧！！！"></textarea></div><div class="anniu"><button class="btn" name="btn">发布</button><button id="delete">删除</button></div></div><div class="right"><div class="right-con"><ul id="ul" class="ul"></ul></div></div></div></div><div id="footer" class="mycolor"><p>Like what you see? </p><br><p>Then give us a call and we'll chat through what</p><br><p>you need.We've got tea,coffee and biscuits!</p><br><p>欢迎光临蚂省大学校园文化网</p></div> </div><script>var btn=document.querySelector('button');var text=document.querySelector('textarea');// var ul=document.querySelector('ul');var ul=document.getElementById('ul');btn.onclick=function(){if (text.value==''){alert('您没输入内容');return false;//终止操作}else{var li=document.createElement('li');li.innerHTML=text.value;ul.insertBefore(li,ul.children[0]);}}// 删除留言// var ul2=document.querySelector('ul');// var btn=document.querySelector('button');var btnt=document.getElementById('delete');btnt.onclick=function(){if(ul.children.length==0){this.disabled=true;}else{ul.removeChild(ul.children[0]);}}</script> </body></html>

体育页面css

体育.css

*{margin:0;padding: 0;box-sizing:border-box;color: rgb(71, 67, 67);}/* 主体内容样式 */.wrap{width:100%;background: url(https://xingqiu-tuchuang-1256524210.cos.ap-/958/体育背景.png) no-repeat center;background-attachment:fixed;background-size: cover;overflow-x: hidden;}header ul{padding-left: 1000px;list-style: none;display: flex;justify-content: center;align-items: center;}header ul li {font-size: 20px;font-weight: 400;margin-left: 5px;transition: all .5s linear;padding: 10px;border-radius: 20px;}header ul li:hover {background:rgba(255,255,255,0.5);color: #4a2c79;transform: scale(1.2);}header ul li.active {background:rgba(255,255,255,0.5);color: #2b1055;}header li::marker{content: none;}a:link,a:visited{color:rgb(17, 17, 17);text-decoration:none;}/* 导航栏部分 */ .nav{padding-right: 50px ;}.nav li{padding-right: 15px;font-family: 'Times New Roman',Times,serif;}/* logo图标部分 */.logo{position: absolute;top:20px;left: 40px;}.logo img{width: 120px;height:120px;border-radius: 60px;}/*2D翻转*/.cartoon_0 {transition: transform 2s/*反转动画关键*/}/*利用hover设置鼠标移动效果*/.cartoon_0:hover {transform: rotate(360deg);}@keyframes mycolor{0% {background-color:rgb(233, 243, 207);}30% {background-color:rgba(255,255,255,0.5)}60% {background-color:rgba(240, 212, 194, 0.9)}100% {background-color:rgba(182, 238, 226, 0.9);}}.mycolor:hover{animation: mycolor 5s linear;}/* 首页封面宣传语部分 */.banner{width: 60%;height: 100vh;margin: auto;display: grid;/* 块级元素 */grid-template-rows: 1fr 1fr;/* padding-top: 10%;padding-left: 45%; */}.desc,.name{align-self:end;}.line{width: 450px;height: 2px;background: #fff;}.decs p{width: 50%;font-size: 43px;font-weight: 400;padding-top: 20px; /* padding-top: 10px; */}h1 {font-size: 90px;font-family: 'Times New Roman',Times,serif;}.name p{font-size: 60px;font-family: 'Times New Roman',Times,serif;}/* 百叶窗图片下的文字部分 */.box li .text{position:absolute;left:0;bottom:0;font-size:26px;color:#FFF;width:100%;height:60px;text-align:center;line-height:30px;background:#000;background-color:rgba(177, 166, 166, 0.7);}/* 整个百叶窗占的布局 */.content{width: 100%;height: 100vh;display: flex;background: #EFEFBB; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #D4D3DD, #EFEFBB); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #D4D3DD, #EFEFBB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */align-items: center;justify-content: center;}.box{width:100%;height: 100%;border:2px solid #FFF;background-color:rgba(255,255,255,0.3);box-shadow:5px 5px 7px rgba(255,255,255,0.5);border-bottom: 0;}.box li{float:left;position:relative;width:180px; /* 未悬停时默认的单张图片宽/高度 */height: 100%; box-shadow:0 0 25px #000000;transition:all 0.5s;}.box img{height: 100%;width: 800px;}.box:hover li{/* 鼠标经过某张图片时其他图片的样式 */width: 25px;}/* 鼠标经过时的li */.box li:hover{width:800px;}/* 留言板部分 */.message{width: 100%;height: 550px;/* height: 100%; */display: flex;background: #70e1f5; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #ffd194, #70e1f5); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #ffd194, #70e1f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}.message_content {width: 1800px;height: 550px;display: flex;border-radius: 20px;overflow: hidden;box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);}.message textarea {/* 文本框内的格式 */background: rgba(220,148,138,0.3);height: 400px;/* height: 80%; */padding: 30px;overflow: hidden;border-radius: 10px;border: 0;/* background:url(..img/) */}/* 输入留言的部分 */.ta{margin-top: 50px;/* margin-bottom: 50px; */margin-left: 50px;margin-right: 50px;}.left {/* background: rgb(219, 180, 180); */width: 900px;height: 100%;/* margin: 10px; */box-shadow: 0 25px 45px rgba(220,148,138,0.3);}/* 展示留言的部分 */.right {width: 500px;height: 100%;background: rgba(220,148,138,0.3);float:right;display:flex;padding-right: 0px;margin: 20px;}.right-con {width: 100%;height: 100%;display: flex;/* 将对象作为弹性伸缩盒显示 */text-align: center;}.right-con ul{height: 100%;width: 500px;padding-top: 50px;padding-right: 10px;margin-top: 10px;background-color: rgba(220,148,138,0.3) ;}.right-con ul li{padding-top: 20px;}li::marker{content: '>'}/* 为按钮设置效果 *//* 按钮 */.anniu{padding-left: 50%;margin: 20px;}button {display: inline-block;border-radius: 15px;box-shadow: 0 5px rgba(220,148,138,0.3);background-color:rgba(255,255,255,0.8);border: none;font-size: 18px;color: rgb(20, 18, 18);font-family: 'Times New Roman',Times,serif;padding: 10px;width: 160px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;text-decoration: none;/* overflow: hidden; */cursor: pointer;}button:hover {background-color:rgba(220,148,138,0.3)}button:active{background-color: #606460;box-shadow: 0 5px #666;transform: translateY(4px);}/* 页脚部分 */#footer {font: 15px 宋体;color: white;background: #EFEFBB; /* fallback for old browsers */background: -webkit-linear-gradient(to right, #D4D3DD, #EFEFBB); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, #D4D3DD, #EFEFBB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */clear: both;padding-top: 20px;margin-top: 20px;text-align: center;}/* 菜单栏样式设置 */.ribbon {display: flex;justify-content: center;position: absolute;right: 70px;top: 10px;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;}

源文件压缩包：

/download/weixin_5394/87214889?spm=1001..3001.5503

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。