web制作的小网页
代碼css和js部分需要自己創(chuàng)建文件夾加進(jìn)去
圖片也需要自己新建自己的images文件夾插入
完整工程文件免費(fèi)下載鏈接：
web簡易網(wǎng)頁制作.zip-互聯(lián)網(wǎng)文檔類資源-CSDN下載
效果圖：
?
?
HTML部分
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/footer.css"><script src="js/script.js"></script> </head><body><div class="BoxWrap"><div class="horn"><div class="bor lt"></div><div class="bor rt"></div><div class="bor rb"></div><div class="bor lb"></div><div class="box1"><div class="logo"><img src="images/a4.jpg" alt=""></div><div class="news"><ul><li><a href="">Name:</a><p>劉劍輝</p></li><li><a href="">Class:</a><p>計(jì)算機(jī)類20-7班</p></li><li><a href="">ID:</a><p>201002721</p></li></ul><div class="icon"><a href=""><p>More Details</p></a></div></div><button class="btn-danger"><div class="Code"><a href="">QR Code</a><img src="images/a3.jpg" alt=""></div></button></div><div class="container"><div class="menu"><ul><li><a href="">Hobby</a></li><li><a href="">Music</a></li><li><a href="">Achievement</a></li><li><a href="">Dream</a></li></ul></div><div class="list"><div class="dropdown"><button class="dropbtn">下拉菜單</button><div class="dropdown-content"><a href="#">下拉菜單 1</a><a href="#">下拉菜單 2</a><a href="#">下拉菜單 3</a></div></div></div><div class="main"><ul><li style="background-image:url(images/k1.jpg);"><a href="">我的相冊</a></li><li style="background-image:url(images/k2.jpg);"><a href="">我的收藏</a></li><li style="background-image:url(images/k3.jpg);"><a href="">我的日志</a></li><li style="background-image:url(images/k4.jpg);"><a href="">我的愛好</a></li></ul></div></div></div></div><!-- ****************part two*************************** --><hr /><div class="box3"><ul id="banner"></ul></div><div class="box2"><div class="text"><h2>Personal Information</h2><li><a href="">姓名： </a><p>劉劍輝</p></li><li><a href="">性別： </a><p>男</p></li><li><a href="">名族: </a><p>漢族</p></li><li><a href="">出生日期：</a><p>2021/6/1</p></li><li><a href="">居住地址：</a><p>云南省曲靖市宣威市振興北路</p></li><div class="news1"><p>熱愛運(yùn)動，熱愛學(xué)習(xí)，積極向上，性格比較內(nèi)向，不怎么愛說話，但是懂得關(guān)心在意別人的感受，體貼關(guān)心自己的盆友，同時熱衷幫助他人。本人性格熱情開朗，待人友好，為人誠實(shí)謙虛。工作勤奮，認(rèn)真負(fù)責(zé)，能吃苦耐勞，盡職盡責(zé)，有耐心。具有親和力，平易近人，善于與人溝通。活潑開朗、樂觀向上、興趣廣泛、適應(yīng)力強(qiáng)、上手快、勤奮好學(xué)、腳踏實(shí)地、認(rèn)真負(fù)責(zé)、堅(jiān)毅不拔、吃苦耐勞、勇于迎接新挑戰(zhàn)。忠實(shí)誠信,講原則，說到做到，決不推卸責(zé)任；有自制力，做事情始終堅(jiān)持有始有終，從不半途而廢；肯學(xué)習(xí),有問題不逃避,愿意虛心向他人學(xué)習(xí)；自信但不自負(fù),不以自我為中心；愿意以謙虛態(tài)度贊揚(yáng)接納優(yōu)越者,權(quán)威者；會用100%的熱情和精力投入到工作中；平易近人。為人誠懇,性格開朗,積極進(jìn)取,適應(yīng)力強(qiáng)、勤奮好學(xué)、腳踏實(shí)地，有較強(qiáng)的團(tuán)隊(duì)精神,工作積極進(jìn)取,態(tài)度認(rèn)真。本人性格開朗、為人誠懇、樂觀向上、興趣廣泛本人性格開朗、為人誠懇、樂觀向上、興趣廣泛、擁有較強(qiáng)的組織能力和適應(yīng)能力、并具有較強(qiáng)的管理策劃與組織管理協(xié)調(diào)能力。</p></div></div><div class="pic"><img src="images/m4.jpg" alt=""></div></div><div class="box4"><div class="section"><div class="text1"><video width="536" height="300" controls autoplay><source src="images/Five hundred miles.mp4"></video></div><div class="pic1"><h2>My Favorite Song--Five hundred mlies.</h2><p>此曲由美國民謠歌手Hedy West創(chuàng)作，并于1961年率先發(fā)行在民歌三重唱The Journeymen(旅行者)的同名專輯中，后有日本搖滾歌神忌野清志郎改編日文版的500miles，被松隆子和忌野清志郎本人唱過。值得注意的是，應(yīng)區(qū)別于Bobby Bare的《500 miles away from home》。</p></div></div><div class="section"><div class="text1"><img src="images/d11.jpg"></div><div class="pic1"><h2>My Favorite Exercise--Climb the mountain</h2><p>登山是一項(xiàng)運(yùn)動，他既可以鍛煉身體，又可以陶冶情操登山帶來的好處之一就是緩解負(fù)面情緒。走在綠水青山的環(huán)境中，可以排解掉你的心理壓力，讓你心情變愉悅，以更積極的心態(tài)回歸生活。當(dāng)今快節(jié)奏的工作給人們帶來很大壓力，容易引發(fā)焦慮、暴躁、抑郁</p></div></div></div><div class="box5"><div class="section"><div class="part"><div class="pic2"><img src="images/b4.jpg" alt=""></div><div class="pic2"><img src="images/b5.jpg" alt=""></div><div class="pic2"><img src="images/h3.jpg" alt=""></div></div><div class="part"><div class="text2"><h2>Favorite friuts</h2><h3>Watermelon</h3><h3>Wasberry</h3><h3>&Strawberry</h3><p>我喜歡酸酸甜甜的水果，比如西瓜、楊梅、草莓，因?yàn)樗麄兯悴簧虾芩?#xff0c;的那會也不會甜到齁，酸酸甜甜很可口,讓我來介紹一下楊梅吧，早在7000年前中國地區(qū)就有楊梅的生長。該屬有50多個種，中國已知的有楊梅、白楊梅、毛楊梅、青楊梅和矮楊梅，經(jīng)濟(jì)栽培主要是楊梅。楊梅枝繁葉茂，樹冠圓整，初夏又有紅果累累，十分可愛，是園林綠化結(jié)合生產(chǎn)的優(yōu)良樹種。孤植、叢植于草坪、庭院，或列植于路邊都很合適；若采用密植方式來分隔空間或起遮蔽作用也很理想。經(jīng)濟(jì)用途果味酸甜適中，既可直接食用，又可加工成楊梅干、醬、蜜餞等，還可釀酒，有止渴、生津、助消化等功能。</p></div></div></div><div class="section"><div class="part"><div class="pic2"><img src="images/v3.jpg" alt=""></div><div class="pic2"><img src="images/v2.jpg" alt=""></div><div class="pic2"><img src="images/v1.jpg" alt=""></div></div><div class="part"><div class="text2"><h2>Favorite vegetables</h2><h3>Baby Chinese cobbage</h3><h3>Broccoli</h3><h3>&Bright vegetables</h3><p>我非常熱衷素食主義，我非常喜歡各種各樣的，五彩斑斕的新鮮蔬菜，因?yàn)槭卟私o人一種富有活力的感覺，它能為我們提供豐富的維生素、礦物質(zhì)和粗纖維，這些營養(yǎng)物質(zhì)都是我們?nèi)梭w不可缺少的，尤其是小朋友正是長身體的時候，更不能缺少它。比如維生素!是人體也是小朋友們需要最多的一種維生素，如果這種維生素不能滿足需要，就會影響小朋友牙齒和骨骼的發(fā)育，而患上齲齒或佝僂病。維生素!在蔬菜中含量是較高的，因此，多吃些蔬菜，骨骼就會長得好，牙齒也會長得整齊。</p></div></div></div></div><div class="box5"><div class="text3"><div class="part1"><h2>Log management</h2><p>This is my personal homepage,which is all about personal information such as my photo album ,my diary and theform of my collect .</p></div><div class="part2"><ul><li><a href=""></a><div class="sousuo"><img src="images/s2.gif" alt=""></div><h1>Photo Album</h1></li><li><a href=""></a><div class="sousuo"><img src="images/s3.gif" alt=""></div><h1>Collect List</h1></li><li><a href=""></a><div class="sousuo"><img src="images/s4.gif" alt=""></div><h1>Search</h1></li></ul></div></div><div class="pic3"><div class="news3"><h1>關(guān)于未來的規(guī)劃</h1></div><div class="touxiang"><ol><li><p>假期鞏固C++和web前端所學(xué)知識，同時積極拓展相關(guān)方面的知識體系。</p></li><li><p>與此同時要進(jìn)一步學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)方面的知識，打好基礎(chǔ)以至于開學(xué)以后可以輕松一點(diǎn)，還可以備考四級。</p></li><li><p>學(xué)習(xí)編程的同時不能放松其他基礎(chǔ)科目的學(xué)習(xí)，重視并堅(jiān)持學(xué)習(xí)英語。</p></li><li><p>我的目標(biāo)是先把老師講授的知識先完全掌握，再去探索更廣泛的計(jì)算機(jī)方面的知識體系，終極目標(biāo)是提高自己的寫代碼的能力。提高自己的競爭力。</p></li></ol></div><div class="news3"></div></div></div><div class="site-footer"><div class="footer-related"><div class="footer-article w1100"><dl class="contact clearfix"><dt class="fl"><i class="iconfont"></i></dt><dd class="fl"><p class="text">Personal Wbsite</p><p class="tel">36334044@qq.com</p><a href="#" >更換頭像</a></dd></dl><dl class="col-article"><dt>MyHomepage</dt><dd><a href="#">我的相冊</a></dd><dd><a href="#">我的日志</a></dd><dd><a href="#">動態(tài)</a></dd><dd><a href="#">收藏</a></dd><dd><a href="#">盆友圈</a></dd><dd><a href="#">最近</a></dd></dl><dl class="col-article"><dt>My Hobby</dt><dd><a href="#">Games</a></dd><dd><a href="#">About Fruits</a></dd><dd><a href="#">About Vegetables</a></dd><dd><a href="#">Music</a></dd><dd><a href="#">Film</a></dd><dd><a href="#">Festival</a></dd></dl><dl class="col-article"><dt>Education</dt><dd><a href="#">Primary School</a></dd><dd><a href="#">Middle School</a></dd><dd><a href="#">Senior School</a></dd><dd><a href="#">College</a></dd><dd><a href="#">About Beijing</a></dd><dd><a href="#">Beilin</a></dd></dl><!--關(guān)于我們--><dl class="col-article"><dt>University</dt><dd><a href="#">Major</a></dd><dd><a href="#">School of Information</a></dd><dd><a href="#">Computer Science</a></dd><dd><a href="#">Grade</a></dd><dd><a href="#">Class</a></dd><dd><a href="#">Duty</a></dd></dl><dl class="wx"><dt> QR Code</dt><dd><img src="images/z1.jpg"></dd><dd class="other"><span>掃碼支付</span></span></dd></dl></div><div class="footer-links w1100"><p>我的CSDN創(chuàng)作超鏈接</p><div class="clearfix"><!-- 友情鏈接循環(huán)開始 --><a href="https://blog.csdn.net/galaxyrt/article/details/117403649?spm=1001.2014.3001.5501">詳細(xì)講解Jquery</a><a href="https://blog.csdn.net/galaxyrt/article/details/117398577?spm=1001.2014.3001.5501">詳細(xì)介紹DOM操作</a><a href="https://blog.csdn.net/galaxyrt/article/details/117396457?spm=1001.2014.3001.5501">詳細(xì)介紹Javascript</a><a href="https://blog.csdn.net/galaxyrt/article/details/117388956?spm=1001.2014.3001.5501">Keyframes關(guān)鍵幀</a><a href="https://blog.csdn.net/galaxyrt/article/details/117253022?spm=1001.2014.3001.5501">C++的指針</a><a href="https://blog.csdn.net/galaxyrt/article/details/117196755?spm=1001.2014.3001.5501">C++棧的使用</a><a href="https://blog.csdn.net/galaxyrt/article/details/117196104?spm=1001.2014.3001.5501">隊(duì)列queue</a><a href="https://blog.csdn.net/galaxyrt/article/details/117983077?spm=1001.2014.3001.5501">C++重載運(yùn)算符</a><a href="https://blog.csdn.net/galaxyrt/article/details/117233288?spm=1001.2014.3001.5501">C++的流和流對象</a><a href="https://blog.csdn.net/galaxyrt/article/details/117173456?spm=1001.2014.3001.5501">北林OJ</a><a href="https://blog.csdn.net/galaxyrt/article/details/117414138?spm=1001.2014.3001.5501">配色大全</a> <a href="https://blog.csdn.net/galaxyrt/article/details/117388142?spm=1001.2014.3001.5501">transition屬性</a><!-- 超鏈接鏈接結(jié)束 --></div></div><div class="footer-info w1100"><div class="info-text w1100"><p class="copyright">北京林業(yè)大學(xué)信息學(xué)院2020級計(jì)算機(jī)類207班劉劍輝制作 <em></em><a href="Index.html" >點(diǎn)擊返回主頁</a></p><p class="dizhi"> Copyright 北京市海淀區(qū)學(xué)院路清華東路35號北京林業(yè)大學(xué)</p><p class="qualified"></p></div></div></div> </div> </body></html>CSS部分（style.css）
* {box-sizing: border-box;margin: 0;padding: 0;list-style: none; }body {width: 100vw;height: 600vh;background: linear-gradient(135deg, #c76968, #008792, #19caad, #f05b72);background-size: 100% 200%;animation: gradient-move 15s ease alternate infinite;background-repeat: no-repeat; }@keyframes gradient-move {0% {background-position: 0% 0%;}100% {background-position: 100% 100%;} }.BoxWrap {width: 1100px;height: 560px;position: relative; }.horn {position: absolute;width: 100%;height: 100%;border: 1px solid #00d3e7;margin: 100px;margin-top: 50px; }.bor {width: 10px;height: 10px;position: absolute; }.horn .lt {border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px; }.horn .rt {border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px; }.horn .rb {border-bottom: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px; }.horn .lb {border-bottom: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px; }/* ************************************* */.box1 {float: left;width: 300px;height: 540px;border: 1px solid turquoise;margin: 10px; }.logo {width: 250px;height: 250px;border-radius: 50%;margin: auto;margin-top: 10px;background-size: cover; }.logo img {width: 248px;height: 248px;border-radius: 50%;border: #19caad solid 1px; }.logo img:hover {border: #f70b65 2px solid; }.news {width: 300px;height: 140px;border: mediumturquoise 1px solid;border-radius: 10px; }/* *****************特效******************** */ .icon {width: 300px;height: 70px;border: 1px solid aliceblue;position: relative;text-transform: uppercase;cursor: pointer; }.icon a {color: linen;text-decoration: none;font-family: 'Poppins', sans-serif;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);letter-spacing: 2px; }.icon:hover {background: linear-gradient(90deg, #2bd2ff, #f70b65, turquoise, #2bd2ff);background-size: 400%; }.icon:before {content: '';position: absolute;background: inherit;top: -5px;right: -5px;left: -5px;border-radius: 50px;filter: blur(20px);opacity: 0;transition: opacity 0.5s; }.icon:hover:before {opacity: 1;z-index: -1; }.icon {z-index: 1;animation: glow 8s linear infinite; }@keyframes glow {0% {background-position: 0%;}100% {background-position: 400%;} }/* *******************二維碼及簡介部分********************** */ .news ul {float: bottom;width: 300px;height: 68px;border: aliceblue 1px solid; }.news ul li {width: 290px;height: 22px;margin-left: 10px;font-size: 6px;border-bottom: rgb(192, 192, 192, 0.5) 1px solid; }.news ul li a {text-decoration: none;color: aliceblue;}.news ul li p {float: right;color: cornsilk;margin-right: 30px;font-family: '楷體';margin-top: 5px; }.news ul li p:hover {color: #f70b65; }.Code {width: 300px;height: 140px;border: floralwhite 1px solid;float: bottom;position: relative;overflow: hidden;background-color: lightseagreen; }.Code a {text-decoration: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: aliceblue;font-size: 22px; }.Code:hover {box-shadow: 0 0 10px #f70b65; }.Code img {height: 138px;width: 138px;transform: translateY(138px); }.btn-danger:hover img {transform: translateY(0); }/* *****************菜單******************* */ .container {width: 768px;float: right;background-color: green; }.menu {float: left;height: 50px;width: 555px;border: turquoise 1px solid;margin-top: 10px;margin-right: 30px; }.menu ul li {float: left;width: 138px;height: 50px;border-right: turquoise 1px solid;position: relative; }.menu ul li:hover {background-color: #f70b65;}.menu ul li:nth-child(4) {border-right: none; }.menu ul li a {float: left;text-decoration: none;color: white;font-size: 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center; }.menu ul li a:hover {color: #f70b65; }/* *****************主界面**************** */ .main {float: right;width: 768px;height: 485px;border: rebeccapurple 1px solid;margin: 5px; }.main ul li {list-style: none;float: left;width: 378px;height: 240px;margin: 2px;background-size: cover;position: relative; }.main ul li img {width: 378px;height: 240px;position: relative; }.main ul li a {font-size: 36px;color: seashell;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-decoration: none;letter-spacing: 2px; }.main ul li a:hover {background-color: #f70b65; }/* **************下拉表單**************** */ .list {margin-top: 13px;margin-left: 8px;float: left;width: 140px;height: 50px;}.dropbtn {background-color: aquamarine;color: white;border: none;cursor: pointer;width: 140px;height: 50px;margin-left: 9px;}.dropdown {position: relative;display: inline-block; }.dropdown-content {display: none;position: absolute;background-color: rgb(127, 255, 212, 0.5);min-width: 140px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);margin-left: 9px; }.dropdown-content:hover {}.dropdown-content a {color: darkcyan;width: 140px;height: 45px;text-decoration: none;display: block;}.dropdown-content a:hover {background-color: rgb(245, 245, 245, 0.5);border: 1px solid #999;box-shadow: 3px 3px 3px 3pxS crimson;}.dropdown:hover .dropdown-content {display: block;}/* **********************part two******************* */.box2 {width: 1100px;height: 500px;margin: 100px;margin-top: 400px;background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;background-repeat: no-repeat;background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;}.box4 {width: 1100px;height: 500px;margin: 100px;background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;background-repeat: no-repeat;background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;}.box5 {width: 1100px;height: 600px;margin: 100px;background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;background-repeat: no-repeat;background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;}hr {border: 1px solid #008792;margin-top: 100px; }.box3 {margin-left: 280px;margin-top: 100px; }.box3 ul {list-style: none;/**/position: absolute;float: left;/**/width: 700px;/**/height: 200px;/**/ }.box3 ul:hover {cursor: pointer;/**/ }.box3 ul li {float: left;/**/position: absolute;/**/left: 0px;/**/transition-duration: 2s;/**/ }/* ****************簡介部分*************** */ .text {float: left;width: 60%;/* border: 1px solid #f70b65; */ }.text h2 {color: aliceblue;text-align: center;letter-spacing: 1px;margin-top: 30px;margin-bottom: 50px; }.text li {clear: both; }.text li a {margin-left: 20px;float: left;text-decoration: none;color: aliceblue;letter-spacing: 1px;}.text li p {float: left;text-align: center;margin-left: 100px;color: aliceblue;letter-spacing: 1px;}.news1 p {margin-top: 60px;margin: 5px;letter-spacing: 1px;margin-top: 30px;color: aliceblue; }.pic {float: right;width: 36%;/* border: 1px solid #f70b65; */ }.pic img {width: 380px;height: 300px;margin-top: 100px; }.section {width: 49%;/* border: #f70b65 1px solid; */float: left;margin: 5px; }.text1 {height: 290px;float: left;}.pic1 {height: 200px;float: left; }.pic1 h2 {margin-top: 20px;color: white;text-align: center; }.pic1 p {margin: 15px;color: white;letter-spacing: 1px; }.text1 img {width: 400px;height: 290px;margin-left: 60px; }.part {float: left;margin: 1px;height: 590px;width: 49%;background-color: teal; }.pic2 {width: 100%;/* background-color: yellowgreen; */margin: 2px; }.pic2 img {margin: 6px;width: 270px;height: 180px; }.text2 h2 {text-align: center;margin-top: 50px;letter-spacing: 1px; }.text2 h3 {text-align: center;margin-top: 15px;letter-spacing: 1px; }.text2 p {margin: 10px;font-family: "楷體"; }.bbox {width: 100%;height: 100%;background-color: aliceblue;border-radius: 20px;position: relative; }.text3 {float: left;width: 60%;border: 1px solid darkorchid;height: 600px;}.pic3 {width: 40%;float: left;height: 600px;border: 1px solid #f05b72;background-color: honeydew; }.news3 {clear: both;float: left;border: 1px solid #f70b65;width: 100%;height: 150px;background-color: paleturquoise; }.news3 h1 {text-align: center;margin-top: 40px; }.touxiang {clear: both;float: left;width: 100%;height: 300px;border: 1px solid orange; }.touxiang ol li {width: 100%;height: 60px;border: 1px solid darkcyan; }.touxiang ol li p {letter-spacing: 1px;margin: 10px; }.part1 {width: 100%;height: 40%;background-color: honeydew; }.part1 h2 {float: left;margin-top: 60px;margin-left: 40px;font-size: 36px; }.part1 p {float: left;margin-top: 80px;margin-left: 40px;font-family: Georgia, 'Times New Roman', Times, serif; }.part2 ul h1 {float: left;font-size: 24px;margin-left: 10px;margin-top: 20px;text-align: center;font-family: 'Times New Roman', Times, serif; }.part2 ul {width: 100%;height: 360px;background-color: honeydew;}.part2 ul li {float: left;width: 30%;height: 300px;margin: 10px;margin-top: 30px;border-radius: 30px;border: 3px solid darkcyan; }.part2 ul li:nth-child(2) {background-color: navy; }.part2 ul li:nth-child(2) h1 {color: white;margin-left: 30px; }.part2 ul li:nth-child(3) h1 {margin-left: 50px; }.sousuo {width: 60px;height: 60px;margin: auto;border: 1px solid grey;margin-top: 50px;border-radius: 50%; }footer.css
* {margin: 0;padding: 0;font-family: "微軟雅黑"; }a {text-decoration: none; }/*底部*/ .site-footer {font-size: 14px;line-height: 1.8;color: #a8aaba;background: #32333b; }.site-footer a {color: #a8aaba; }.site-footer a:hover {color: #f44 !important; }.site-footer .footer-article {padding: 30px 0 20px;overflow: hidden; }.site-footer .contact {float: left;width: 280px; }.site-footer .contact dt {width: 90px; }.site-footer .contact .iconfont {width: 66px;height: 66px;display: block;float: left;background: url(../images/z2.jpg) center center no-repeat;background-size: 55px; }.site-footer .contact .text {font-size: 14px;line-height: 30px;color: #fff; }.site-footer .contact .tel {padding: 3px 0 15px;font-size: 20px;color: #fff; }.site-footer .contact a {display: block;width: 90px;font-size: 14px;line-height: 30px;color: #9b9ea0;text-align: center;border: 1px solid #9b9ea0;border-radius: 4px; }.site-footer .contact a:hover {color: #fff !important; }.site-footer .col-article {float: left;width: 171px; }.site-footer .col-article dt {margin-bottom: 15px;font-size: 16px;font-weight: normal;color: #d7d8d9; }.site-footer .col-article dd {margin-bottom: 8px;overflow: hidden; }.site-footer .col-article dd a {font-size: 12px;color: #9b9ea0;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; }.site-footer .wx {float: left;width: 135px;margin-right: 0; }.site-footer .wx dt {margin-bottom: 15px;font-size: 16px;font-weight: normal;color: #d7d8d9; }.site-footer .wx dd {margin-bottom: 15px; }.site-footer .wx dd img {display: block;width: 110px;height: 110px;margin: 5px 0;border-radius: 2px; }.site-footer .wx dd.other {margin-bottom: 0;line-height: 18px; }.site-footer .wx dd.other span {display: block;font-size: 12px; }.site-footer .wx dd.other a {display: inline-block;margin-right: 5px;font-size: 12px;line-height: 18px;vertical-align: top; }.footer-links {padding: 10px 0;border-top: 1px solid #41424c;border-bottom: 1px solid #41424c; }.footer-links p {font-size: 14px;color: #a8aaba; }.footer-links a {margin-right: 20px;font-size: 12px;color: #a8aaba; }.footer-info .info-text {padding: 20px 0;font-size: 12px;text-align: center; }.footer-info .info-text .nav-bottom {padding: 20px 0 5px;font-size: 14px;color: #ccc;text-align: center; }.footer-info .info-text .nav-bottom a {padding: 0 8px;color: #9b9ea0; }.footer-info .info-text .copyright {padding-top: 5px; }.footer-info .info-text em {padding: 0 8px; }JS部分
window.onload = function(){/**/let timer;/**/let sz =new Array();/**/let szdiv = new Array();/**/function OpenTimer(){timer = setInterval(get_next,2000);/**/ }OpenTimer();var cur_ul = document.getElementById("banner");/**/for(let i =1;i<=5;i++){/**/var cur_li = document.createElement("li");/**/var cur_img = document.createElement("img"); /**/cur_img.src = "images/" + i+".jpg";/**/cur_img.style.width ="300px";/**/cur_img.style.height = "200px";/**/cur_li.appendChild(cur_img);/**/cur_li.onmouseenter = function(){/**/clearInterval(timer); /**/}cur_li.onmouseleave = function(){/**/timer = setInterval(get_next,2000);/**/}cur_ul.appendChild(cur_li);/**/sz.push(cur_li);/**/sz[sz.length-1].style.left = "0px";/**/let bottom_div = document.createElement("div");/**/bottom_div.style.left = 100*i+200+"px";/**/bottom_div.name = i-1;/**/szdiv.push(bottom_div);/**/cur_ul.appendChild(bottom_div);/**/}let pre_img = document.createElement("img");/**/pre_img.src = "images/tubiao2.gif " ;/**/pre_img.style.position ="absolute";/**/pre_img.style.left = 0;/**/pre_img.style.top =0;/**/pre_img.style.bottom =0;/**/pre_img.style.margin = "auto"/**/pre_img.style.zIndex =100;/**/cur_ul.appendChild(pre_img);/**/let nex_img = document.createElement("img");/**/nex_img.src = "images/tubiao3.gif";/**/nex_img.style.position ="absolute";/**/nex_img.style.right = 0;/**/nex_img.style.top =0;/**/nex_img.style.bottom =0;/**/nex_img.style.margin = "auto"/**/nex_img.style.zIndex =100;/**/cur_ul.appendChild(nex_img);/**/nex_img.onclick = function(){/**/clearInterval(timer);/**/get_next();/**/OpenTimer();/**/}pre_img.onclick = function(){/**/clearInterval(timer);/**/get_pre();/**/OpenTimer();/**/}let len = sz.length-1;/**/let IndexButtum = len -2;/**/setPuJu();/**/function get_next(){/**/let give_up =sz[len];/**/sz.pop();/**/sz.unshift(give_up);/**/if(IndexButtum==0)IndexButtum=4; else IndexButtum--;/**/setPuJu();/**/} function get_pre(){/**/let give_up =sz[0];/**/sz.shift();/**/sz.push(give_up);/**/if(++IndexButtum>4)IndexButtum=0;/**/setPuJu();/**/}function setPuJu(){/**/for(let i=0;i<sz.length;i++){/**/sz[i].style.zIndex = i;/**/sz[i].style.transform = "scale(1)";/**/szdiv[i].style.background = "#ffffff";/**/}sz[len-2].style.left ="0px";/**/sz[len-1].style.zIndex = 100;/**/sz[len-1].style.left = "200px";/**/sz[len-1].style.transform = "scale(1.3)";/**/sz[len-1].style.opacity = 1;/**/sz[len].style.left = "400px"; /**/szdiv[IndexButtum].style.background ="#e431fc"/**/}for(let i=0;i<szdiv.length;i++){/**/szdiv[i].onclick = function(){/**/clearInterval(timer);/**/let len = szdiv[i].name;/**/if(len<IndexButtum){/**/let max =IndexButtum-len ;/**/for(;max>0;max--)/**/get_next(); }else if(len>IndexButtum){/**/max = len-IndexButtum;/**/for(;max>0;max--)/**/get_pre(); }OpenTimer();/**/}} }總結(jié)
- 上一篇： 久其修改服务器地址什么意思,久其修改服务
- 下一篇： ros串口/摄像头 别名及查看绑定