超好看的个人网页，你还不fork一下？
生活随笔
收集整理的這篇文章主要介紹了
超好看的个人网页，你还不fork一下？
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目錄?? ：
????????🎊🎊叨叨一下：
話不多說(shuō)，上項(xiàng)目！！
------------------------------------------------------------------------------
分割線～
開始頁(yè)面源碼：🐯
VR觀景源碼：?
文創(chuàng)購(gòu)買頁(yè)面源碼：🚀
關(guān)于項(xiàng)目源碼：
最后：還有圖床哦，放在下面這個(gè)鏈接啦：
🎊🎊叨叨一下：
唔，這個(gè)本來(lái)是之前做的一個(gè)電商的項(xiàng)目，咱當(dāng)時(shí)還沒有學(xué)很多東西，就是粗略的做了一下，最近呢，咱改了一些樣式以及增加了一些功能，就想著給大家康康，變好看了不少！?
🍉🍉🍉這是之前寫的文章，當(dāng)時(shí)一下就沖上熱榜了（bushi
?
話不多說(shuō)，上項(xiàng)目！！
大家先來(lái)康康效果圖吧：
最近新學(xué)的布局，點(diǎn)擊就可以進(jìn)入首頁(yè)了呀！🍓🍓🍓
??這里還有一個(gè)小驚喜哦，點(diǎn)擊哪張圖片哪張圖片就會(huì)撐開讓你看到全貌，有很不錯(cuò)的動(dòng)畫效果哦～
????????
進(jìn)入首頁(yè)后就可以看到我們的VR觀景部分啦，每個(gè)圖片都是一個(gè)B站的視頻鏈接，但是由于水平有限做不成VR的效果，有無(wú)大佬可以指點(diǎn)指點(diǎn)，求求了💦💦💦
??（雖然這方面技術(shù)不行，但視頻都是精心挑選的）
?
?主頁(yè)看完了，再來(lái)看看文創(chuàng)購(gòu)買界面吧！
這個(gè)界面布局大體沿用VR觀景頁(yè)面，不過(guò)有小細(xì)節(jié)哦！
鼠標(biāo)懸停在商品上面可以看到圖片正在緩緩的放大，是動(dòng)畫效果哦～
🐠🐠🐠
?
?是不是還不錯(cuò)？
后面還有一個(gè)“關(guān)于項(xiàng)目”頁(yè)面，大體上差不多，這里就不展示了嗷。
大家想要去看一下我的這個(gè)項(xiàng)目哦，網(wǎng)頁(yè)放在這里啦：元之旅
碎碎念：這個(gè)項(xiàng)目是搭建在GitHub上面的，安全性倒是很可靠，就是不太便于訪問(wèn)，近期打算再用其他的框架做一個(gè)個(gè)人博客（雖然我已經(jīng)有一個(gè)前端知識(shí)庫(kù)惹），去分享一些個(gè)人的經(jīng)歷與成長(zhǎng)！
接下來(lái)我要放源碼啦！
碼字不易，能給個(gè)贊然后收藏一下嘛?
------------------------------------------------------------------------------
分割線～
開始頁(yè)面源碼：🐯
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>元之旅</title><link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> </head> <body><style>html {box-sizing: border-box;background: #ffc600;font-family:'helvetica neue';font-size: 20px;font-weight: 200;}body {margin: 0;}*,*:before,*:after {box-sizing: inherit;}.panels {min-height: 100vh;overflow: hidden;display: flex;}.panel {background: #6B0F9C;box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);color: white;text-align: center;align-items: center;transition: font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),/* flex的變化用0.7s的漸變動(dòng)畫，漸變動(dòng)畫的時(shí)間函數(shù)是貝塞爾曲線，具體參數(shù)就和他寫的似的 */flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),/* 就是對(duì)于background的變化 采用0.2s的漸變動(dòng)畫 */background 0.2s;font-size: 20px;background-size: cover;background-position: center;flex: 1;justify-content: center;align-items: center;display: flex;/* 屬性指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。 */flex-direction: column;}.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }.panel2 { background-image:url(第二張.jpg); }.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }.panel > * {margin: 0;width: 100%;transition:transform 0.5s;flex:1 0 auto;display: flex;justify-content: center;align-items: center;}.panel > *:first-child {transform: translateY(-100%)}.panel.open-active > * :first-child {transform:translateY(0)}.panel > *:last-child {transform: translateY(100%)}.panel.open-active > * :last-child {transform:translateY(0)}.panel a{text-transform: uppercase;font-family: 'Amatic SC',cursive;text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);font-size: 2em;}.panel a:nth-child(2){font-size: 4em;}.panel.open {flex: 5;font-size: 40px;}a {text-decoration: none;/* font-size: 2em; */color: white;}</style><div class="panels"><div class="panel panel1"><a href="index1.html">Hey</a><a href="index1.html">start</a><a href="index1.html">Dance</a><!-- <a href=""></a> --></div><div class="panel panel2"><a href="index1.html">Give</a><a href="index1.html">your</a><a href="index1.html">Receive</a></div><div class="panel panel3"><a href="index1.html">Experience</a><a href="index1.html">元</a><a href="index1.html">Today</a></div><div class="panel panel4"><a href="index1.html">Give</a><a href="index1.html">之</a><a href="index1.html">You can</a></div><div class="panel panel5"><a href="index1.html">Life</a><a href="index1.html">旅</a><a href="index1.html">Motion</a></div></div><script>const panels =document.querySelectorAll('.panel');function toggleOpen() {this.classList.toggle('open');}function toggleActive(e) {if(e.propertyName.includes('flex')){this.classList.toggle('open-active');}}panels.forEach(panel => panel.addEventListener('click',toggleOpen));panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));</script></body> </html>VR觀景源碼：?
<!doctype html> <html lang="en"> <head><meta charset="utf-8"/><title>元之旅</title><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function smartColumns() { //Create a function that calculates the smart columns//Reset column size to a 100% once view port has been adjusted $("ul.column").css({ 'width' : "100%"});var colWrap = $("ul.column").width(); //Get the width of row var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions. $("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column } smartColumns();//Execute the function when page loads$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function smartColumns(); }); </script> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <style>/* 。 */ * {margin: 0;padding: 0;font-family: 楷體;}/* render html5 elements as block */ header, footer, section, aside, nav, article {display: block;}/* standard body */ body {margin: 0 auto;width: 960px;font: 14px/20px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;/* background: #271408 url("bodybkg.gif") repeat; */background: url("背景.jpg");background-repeat: no-repeat;background-size: cover;}/* standard alignments */ .alignleft {float: left;}img.alignleft {margin: 5px 10px 0 0; }.alignright {float: right;}img.alignright {margin: 5px 0 0 10px; }.center {text-align: center;}.fleft {text-align: left;float: left;margin-left: 20px;}.fright {float: right;text-align: right;margin-right: 20px;}.fcentered {text-align: center;}/* Hx tags */h1 {font-size: 48px;padding: 20px 0;text-shadow: 2px 2px 2px #000;color: #d6a965;}h2 {font-size: 24px;padding: 20px 0;}h3 {font-size: 18px;padding: 10px 0;}p {padding-bottom: 20px;}/* nav */nav {position: absolute;width: 960px;background: url("navbg.png");/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}nav ul {margin: 0 auto;width: 960px;list-style: none;}nav ul li {float: left;}nav ul li a {display: block;margin-right: 20px;width: 140px;font-size: 16px;font-weight: bold;line-height: 44px;text-align: center;text-decoration: none;color: #f2ede7;}nav ul li a:hover {color: #d6a965;}nav ul li.selected a {color: #d6a965;}nav ul li.subscribe a {margin-left: 20px;padding-left: 33px;text-align: left;background: url("rss.png") left center no-repeat;}/* intro */#intro {position: relative;margin-top: 55px;padding: 50px;background: #eabb4d;border: #f2ede7 solid 15px;/* background size */-webkit-background-size: 100%;-o-background-size: 100%;-khtml-background-size: 100%;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}#intro h2, #intro p {position: relative;z-index: 9999;width: 350px;}#intro h2 {padding: 0 0 20px 0;font-weight: normal;color: #fff;text-align: center;}#intro p {padding: 0;color: #fff;text-align: justify;}#intro img {position: absolute;top: 0;right: 0;width: 400px;height: 100%;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}/* content and sidebar layout */#content {position: relative;margin-top: 50px;float: left; width: 920px; margin:10px 5px 10px 0; padding:5px 20px 5px 20px;background-color: #fff;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }/* columns */#content ul.column {width: 100%;padding: 0;margin: 10px 0;list-style: none; }#content ul.column li {float: left;width: 230px; /*Set default width*/padding: 0;margin: 5px 0;display: inline; }#content .block {height: 355px;font-size: 1em;margin-right: 10px; /*Creates the 10px gap between each column*/padding: 20px;background: #eabb4d; /* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }#content .block a {color: #FFF;text-decoration: none;}#content .block img {/*Flexible image size with border*/width: 89%; /*Took 1% off of the width to prevent IE6 bug*/padding: 5%;background:#fff;margin: 0 auto;display: block;-ms-interpolation-mode: bicubic; /*prevents image pixelation IE 6/7 */} /* end of column configuration *//* footer */ footer {width: 960px;clear: both;color: #f2ede7;overflow: hidden;padding-top: 10px;background-color: #271408;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;height: 200px;margin-bottom: 10px;}footer section { width: 300px; float: left; padding: 0 10px; }footer section h2 { margin-top: 0; }footer section p {font-size: 12px;}footer section a {color: #999;}footer section a:hover {color: #FFF;text-decoration: none;}/* for inner pages *//* content and sidebar layout */#innercontent {float: left; width: 610px; margin:10px 5px 10px 0; padding:5px 20px 5px 20px;background-color: #d6a965;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }aside {float: right;text-align: left; width: 300px; margin:0; padding:0;}/* article */ .articlecontent header p, .blogPost header p a {font-size: 14px;font-style: italic;color: #777;}.articlecontent p a {color: #695e53;}.articlecontent p a:hover {color: #fff;}.articlecontent header p a:hover {text-decoration: none;color: #000;}/* box shadow on pics */ .articlecontent img {-webkit-box-shadow: 3px 3px 7px #777;}/* sidebar */ aside section {margin: 10px 0 0 10px;padding: 10px 15px;background-color: #d6a965;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}aside section ul {margin: 0 0 0 20px;color: #FFF;}aside section ul li a {display: block;text-decoration: none;color: #695e53;}aside section ul li a:hover {text-decoration: underline;color: #fff;}#dddd {text-align: center;color: orange;/* fon */margin: 10px 0;}.wuwuwu {text-align: justify;font-size: 15px;line-height: 30px;}#bugs {margin: 30px;margin-top: 0;} </style> <body><header><h1>元之旅</h1></header><nav><ul><li><a href="關(guān)于項(xiàng)目.html">關(guān)于項(xiàng)目</a></li><li><a href="文創(chuàng)購(gòu)買.html">文創(chuàng)購(gòu)買</a></li><li><a href="index.html">首頁(yè)</a></li><li class="selected"><a href="index1.html">VR觀景</a></li><li><a href="#">聯(lián)系我們(建設(shè)中)</a></li></ul></nav><section id="intro"><header><h2>美景美食一屏間</h2></header> <p>文創(chuàng)購(gòu)買，VR觀景，在這里，你可以看到超現(xiàn)代的魔都，可以看到戰(zhàn)疫勝利的武漢，還有于時(shí)間與空間璀璨的巴黎，四處看看，開啟你的旅行吧</p><img src="ddddd.jpg" alt="lime" /></section><section id="content"><ul class="column"><!--eqblock--><li><section class="block"><a href="7https://www.bilibili.com/video/BV1SA411L73u?spm_id_from=333.337.search-card.all.click"><img src="上海.png" alt="" /></a> <h2><a href="7https://www.bilibili.com/video/BV1SA411L73u?spm_id_from=333.337.search-card.all.click">上海</a></h2> <p>古代文明與現(xiàn)代文明在這里交相輝映，碰撞出全新的火花。</p> </section></li><!--eqblock--><li><section class="block"><a href="https://www.bilibili.com/video/BV1EK4y1k7fx?spm_id_from=333.337.search-card.all.click"><img src="北京.png" alt="" /></a> <h2><a href="https://www.bilibili.com/video/BV1EK4y1k7fx?spm_id_from=333.337.search-card.all.click">北京</a></h2> <p>北京擁有三千多年的悠久歷史，是六朝古都，深厚的歷史底蘊(yùn)孕育出豐富的旅游資源。</p> </section></li><!--eqblock--><li><section class="block"><a href="https://www.bilibili.com/video/BV1Yf4y1M7xQ?spm_id_from=333.337.search-card.all.click"><img src="廣州.png" alt="" /></a> <h2><a href="https://www.bilibili.com/video/BV1Yf4y1M7xQ?spm_id_from=333.337.search-card.all.click">廣州</a></h2> <p>從公元三世紀(jì)起成為海上絲綢之路的主港，唐宋時(shí)成為中國(guó)第一大港，是世界著名的東方港市，明清時(shí)是中國(guó)唯一的對(duì)外貿(mào)易大港，也是世界唯一兩千多年長(zhǎng)盛不衰的大港。</p> </section></li><!--eqblock--><li><section class="block"><a href="https://www.bilibili.com/video/BV177411Z7vx?spm_id_from=333.337.search-card.all.click"><img src="武漢.png" alt="" /></a> <h2><a href="https://www.bilibili.com/video/BV177411Z7vx?spm_id_from=333.337.search-card.all.click">武漢</a></h2> <p>武漢是國(guó)家歷史文化名城，楚文化的重要發(fā)祥地，境內(nèi)盤龍城遺址有3500年歷史。</p> </section></li><!--eqblock--><li><section class="block"><a href="https://www.bilibili.com/video/BV1di4y1E7HK?spm_id_from=333.337.search-card.all.click"><img src="倫敦.png" alt="" /></a> <h2><a href="https://www.bilibili.com/video/BV1di4y1E7HK?spm_id_from=333.337.search-card.all.click">倫敦</a></h2> <p>倫敦，是大不列顛及北愛爾蘭聯(lián)合王國(guó)首都，世界金融中心，倫敦占全球外匯交易額的比重超過(guò)40%，與紐約和香港并稱為“紐倫港”。</p> </section></li><!--eqblock--><li><section class="block"><a href="https://www.bilibili.com/video/BV1rT4y1o75F?spm_id_from=333.337.search-card.all.click"><img src="紐約.png" alt="" /></a> <h2><a href="https://www.bilibili.com/video/BV1rT4y1o75F?spm_id_from=333.337.search-card.all.click">紐約</a></h2> <p>紐約市，位于美國(guó)紐約州東南部大西洋沿岸，是美國(guó)第一大城市及第一大港口，紐約都市圈為世界上最大的都市圈之一。</p> </section></li><!--eqblock--><li><section class="block"><a href="https://www.bilibili.com/video/BV1ev411G7JQ?spm_id_from=333.337.search-card.all.click"><img src="柏林.png" alt="" /></a> <h2><a href="https://www.bilibili.com/video/BV1ev411G7JQ?spm_id_from=333.337.search-card.all.click">柏林</a></h2> <p>位于德國(guó)東北部，是德國(guó)的首都和最大的城市，也是德國(guó)的政治、文化、交通及經(jīng)濟(jì)中心。</p> </section></li><li><section class="block"><a href="https://www.bilibili.com/video/BV1zK4y1S7Cn?spm_id_from=333.337.search-card.all.click"><img src="巴黎.png" alt="" /></a> <h2><a href="https://www.bilibili.com/video/BV1zK4y1S7Cn?spm_id_from=333.337.search-card.all.click">巴黎</a></h2> <p>巴黎，是法蘭西共和國(guó)的首都和最大城市，也是法國(guó)的政治、經(jīng)濟(jì)、文化和商業(yè)中心，世界五個(gè)國(guó)際大都市之一。</p> </section></li></ul></section><footer id="ddddd"><!-- <section> --><div id="bugs"><h3 id="dddd">小白的元宇宙團(tuán)隊(duì)傾情呈現(xiàn)</h3><p class="wuwuwu"> 小白的元宇宙成員均是來(lái)自武漢理工大學(xué)在讀的優(yōu)秀本科生，專業(yè)領(lǐng)域涉及到金融科技、經(jīng)濟(jì)、電商、計(jì)算機(jī)等多個(gè)領(lǐng)域，分工合作。具有互補(bǔ)的知識(shí)領(lǐng)域和良好的理論基礎(chǔ)，形成了一支富有創(chuàng)意，擅長(zhǎng)管理，熟于投資，善于總結(jié)的經(jīng)營(yíng)管理團(tuán)隊(duì)。小白的元宇宙團(tuán)隊(duì)注重團(tuán)隊(duì)協(xié)作、求真、團(tuán)結(jié)的職業(yè)精神，在無(wú)數(shù)次電話會(huì)議，私信溝通之中建立起來(lái)的合作精神是小白的元宇宙團(tuán)隊(duì)最寶貴的精神財(cái)富，也是元之旅平臺(tái)不斷成長(zhǎng)壯大的不竭動(dòng)力。</p></div></footer> <!-- Free template created by http://freehtml5templates.com --> </body> </html>文創(chuàng)購(gòu)買頁(yè)面源碼：🚀
<!doctype html> <html lang="en"> <head><meta charset="utf-8"/><title>元之旅</title><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function smartColumns() { //Create a function that calculates the smart columns//Reset column size to a 100% once view port has been adjusted $("ul.column").css({ 'width' : "100%"});var colWrap = $("ul.column").width(); //Get the width of row var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions. $("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column } smartColumns();//Execute the function when page loads$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function smartColumns(); });/*手辦商城購(gòu)物板塊*/var result=""; //存放選購(gòu)信息 var price=new Array(257.00,299.00,389.00,69.00,59.00,69.00); var product=new Array("幻紗之靈西施Q版手辦 只要￥257.00","仲夏夜之夢(mèng)貂蟬Q版手辦 只要￥299.00","地獄火非洲猴Q版手辦 只要￥389.00","超級(jí)薄荷黑旋風(fēng)李白薄荷糖 只要￥69.00","99萬(wàn)毫安的魯班充電寶 只要￥ 59.00","一生所愛露娜Q版手辦 只要￥699.00"); var isSelected=new Array(0,0,0,0,0,0); function clearAll(){isSelected=[0,0,0,0,0,0]; //選擇狀態(tài)全部置0//所以復(fù)選框狀態(tài)變?yōu)槲催x中狀態(tài)lzjForm.sp0.checked=false;lzjForm.sp1.checked=false;lzjForm.sp2.checked=false;lzjForm.sp3.checked=false;lzjForm.sp4.checked=false;lzjForm.sp5.checked=false; } function checkOut(){var total=0;//存放小計(jì)金額var count=0;//存放選購(gòu)產(chǎn)品件數(shù)for(var i=0;i < isSelected.length; i++){count=count+isSelected[i];}for(var i=0;i< price.length; i++){total=total+price[i]*isSelected[i] //累計(jì)金額}alert("您所選的"+count+"件,產(chǎn)品總價(jià)="+total+"\n"+"請(qǐng)去支付!"); } function shoppingCart(){//判斷有多少個(gè)復(fù)選框被選中var selectList=""; //保存所選產(chǎn)品清單for(var j=0;j<product.length; j++){if(isSelected[j]){ //分行顯示selectList=selectList+(j+1)+"-"+product[j]+",價(jià)值="+price[j]+"\n"}}var info=(selectList=="") ? "您的購(gòu)物車為空,請(qǐng)選購(gòu)!":selectList;alert(info); //生成一個(gè)結(jié)算清單,顯示輸出 } function checkSelect(number) {var temp; //暫存復(fù)選框狀態(tài)switch(number){case 0:temp=lzjForm.sp0.checked;break;case 1:temp=lzjForm.sp1.checked;break;case 2:temp=lzjForm.sp2.checked;break;case 3:temp=lzjForm.sp3.checked;break;case 4:temp=lzjForm.sp4.checked;break;case 5:temp=lzjForm.sp5.checked;break;}isSelected[number]=(temp) ? 1:0; //記錄選中產(chǎn)品,1-選中,0-未選 }/*留言板塊*/function checkData(){ /*checkData()的JS腳本函數(shù)，以便我們?cè)趯⒈韱螖?shù)據(jù)提交到服務(wù)器前，能對(duì)表單中填寫的部分?jǐn)?shù)據(jù)的合法性進(jìn)行必要的檢驗(yàn)*/var n = document.getElementById("n").value;/*var obj = document.getElementById(頁(yè)面元素id)*/var x = document.getElementById("x").value;var t = document.getElementById("t").value;var txt = document.getElementById("txt").value;if(!n){alert("請(qǐng)輸入用戶名！");return false;}else if(!x){alert("請(qǐng)輸入wechat!");return false;}else if(!t){alert("請(qǐng)輸入留言時(shí)間");return false;}else if(!txt){alert("請(qǐng)輸入留言內(nèi)容");return false;}return true; } function check(){var r = checkData(); return r; }</script> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <style>/* 。 */ * {margin: 0;padding: 0;font-family: 楷體;}/* render html5 elements as block */ header, footer, section, aside, nav, article {display: block;}/* standard body */ body {margin: 0 auto;width: 960px;font: 14px/20px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;/* background: #271408 url("bodybkg.gif") repeat; */background: url("背景.jpg");background-repeat: no-repeat;background-size: cover;}/* standard alignments */ .alignleft {float: left;}img.alignleft {margin: 5px 10px 0 0; }img{width:100px;height:140px;transition:all 2s ease; } img:hover{ cursor:pointer;/*變手勢(shì)光標(biāo)*/ }img:hover{ /*變大*/width:100px;height:150px; }.alignright {float: right;}img.alignright {margin: 5px 0 0 10px; }.center {text-align: center;}.fleft {text-align: left;float: left;margin-left: 20px;}.fright {float: right;text-align: right;margin-right: 20px;}.fcentered {text-align: center;}/* Hx tags */h1 {font-size: 48px;padding: 20px 0;text-shadow: 2px 2px 2px #000;color: #d6a965;}h2 {font-size: 24px;padding: 20px 0;}h3 {font-size: 18px;padding: 10px 0;}p {padding-bottom: 20px;}/* nav */nav {position: absolute;width: 960px;background: url("navbg.png");/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}nav ul {margin: 0 auto;width: 960px;list-style: none;}nav ul li {float: left;}nav ul li a {display: block;margin-right: 20px;width: 140px;font-size: 16px;font-weight: bold;line-height: 44px;text-align: center;text-decoration: none;color: #f2ede7;}nav ul li a:hover {color: #d6a965;}nav ul li.selected a {color: #d6a965;}nav ul li.subscribe a {margin-left: 20px;padding-left: 33px;text-align: left;background: url("rss.png") left center no-repeat;}/* intro */#intro {position: relative;margin-top: 55px;padding: 50px;background: #eabb4d;/* background size */-webkit-background-size: 100%;-o-background-size: 100%;-khtml-background-size: 100%;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;border: #f2ede7 solid 15px;}#intro h2, #intro p {position: relative;z-index: 9999;width: 350px;}#intro h2 {padding: 0 0 20px 0;font-weight: normal;color: #fff;text-align: center;}#intro p {padding: 0;color: #fff;text-align: justify;}#intro img {position: absolute;top: 0;right: 0;width: 400px;height: 100%;-moz-border-radius: 10px;-webkit-border-radius: 10px;}/* content and sidebar layout */#content {position: relative;margin-top: 50px;float: left; width: 920px; margin:10px 5px 10px 0; padding:5px 20px 5px 20px;background-color: #f2ede7;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }/* columns */#content ul.column {width: 100%;padding: 0;margin: 10px 0;list-style: none; }#content ul.column li {float: left;width: 230px; /*Set default width*/padding: 0;margin: 5px 0;display: inline; }#content .block {height: 355px;font-size: 1em;margin-right: 10px; /*Creates the 10px gap between each column*/padding: 20px;background: #eabb4d; /* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }#content .block a {color: #FFF;text-decoration: none;}#content .block img {/*Flexible image size with border*/width: 89%; /*Took 1% off of the width to prevent IE6 bug*/padding: 5%;background:#fff;margin: 0 auto;display: block;-ms-interpolation-mode: bicubic; /*prevents image pixelation IE 6/7 */} /* end of column configuration *//* footer */ footer {width: 960px;clear: both;color: #f2ede7;overflow: hidden;padding-top: 10px;background-color: #271408;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;height: 200px;margin-bottom: 10px;}footer section { width: 300px; float: left; padding: 0 10px; }footer section h2 { margin-top: 0; }footer section p {font-size: 12px;}footer section a {color: #999;}footer section a:hover {color: #FFF;text-decoration: none;}/* for inner pages *//* content and sidebar layout */#innercontent {float: left; width: 610px; margin:10px 5px 10px 0; padding:5px 20px 5px 20px;background-color: #d6a965;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }aside {float: right;text-align: left; width: 300px; margin:0; padding:0;}/* article */ .articlecontent header p, .blogPost header p a {font-size: 14px;font-style: italic;color: #777;}.articlecontent p a {color: #695e53;}.articlecontent p a:hover {color: #fff;}.articlecontent header p a:hover {text-decoration: none;color: #000;}/* box shadow on pics */ .articlecontent img {-webkit-box-shadow: 3px 3px 7px #777;}/* sidebar */ aside section {margin: 10px 0 0 10px;padding: 10px 15px;background-color: #d6a965;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}aside section ul {margin: 0 0 0 20px;color: #FFF;}aside section ul li a {display: block;text-decoration: none;color: #695e53;}aside section ul li a:hover {text-decoration: underline;color: #fff;}#register-dialog {display: none;width: 230px;height: 200px;}#dddd {text-align: center;color: orange;/* fon */margin: 10px 0;}.wuwuwu {text-align: justify;font-size: 15px;line-height: 30px;}#bugs {margin: 30px;margin-top: 0;} </style> <body><header><h1>元之旅</h1></header><nav><ul><li><a href="關(guān)于項(xiàng)目.html">關(guān)于項(xiàng)目</a></li><li class="selected"><a href="文創(chuàng)購(gòu)買.html">文創(chuàng)購(gòu)買</a></li><li><a href="index.html">首頁(yè)</a></li><li><a href="index1.html">VR觀景</a></li><li><a href="#">聯(lián)系我們(建設(shè)中)</a></li></ul></nav><section id="intro"><header><h2>文創(chuàng)集結(jié)地</h2></header><p>在這里，你能從小小的文創(chuàng)中體會(huì)到中華古老建筑的魅力，體會(huì)到各地糕點(diǎn)的美好</p><!-- <img src="前底圖.png" alt="lime" /> --><img src="ddddd.jpg" alt="lime" /></section><section id="content"><ul class="column"><!--eqblock--><li><section class="block"><a href=""><img src="上海文創(chuàng).png" alt="" /></a> <h2><a href="#">上海特產(chǎn)點(diǎn)心</a></h2> <p>本品包含上海特產(chǎn)的各類點(diǎn)心，包裝精致，口感豐富，值得一試（269￥）</p> </section></li><!--eqblock--><li><section class="block"><a href=""><img src="上海護(hù)手霜88.png" alt="" /></a> <h2><a href="#">護(hù)手霜</a></h2> <p>兒時(shí)的護(hù)手霜，兒時(shí)的回憶，純天然無(wú)刺激，保濕效果滿滿（88￥）</p> </section></li><!--eqblock--><li><section class="block"><a href=""><img src="上海折扇118.png" alt="" /></a> <h2><a href="#">折扇</a></h2> <p>打開折扇，遇見神都山水（118￥）</p> <!-- 內(nèi)容：圖片，文字，checkbox控件 --></section></li><!--eqblock--><li><section class="block"><a href=""><img src="北京地標(biāo)書簽.png" alt="" /></a> <h2><a href="#">北京地標(biāo)書簽</a></h2> <p>精致的書簽，夾在書中，留住美好的記憶（18￥）</p></section></li><!-- <img src="項(xiàng)目.png" alt="" id="register-dialog"> --><!--eqblock--><li><section class="block"><a href=""><img src="文創(chuàng)新年虎擺件.png" alt="" /></a> <h2><a href="#">新年虎擺件</a></h2> <p>新年快樂，小虎祝您虎年大吉，如虎添翼（58￥）</p> <!-- 內(nèi)容：圖片，文字，checkbox控件 --></section></li><!--eqblock--><li><section class="block"><a href=""><img src="文創(chuàng)擺件貓.png" alt="" /></a> <h2><a href="#">貓擺件</a></h2> <p>可愛的喵喵喵，還不快快入手（48￥）</p> </section></li><!--eqblock--><li><section class="block"><a href=""><img src="海苔蘇.png" alt="" /></a> <h2><a href="#">海苔酥</a></h2> <p>廣州特產(chǎn)海苔酥，海苔和餅酥在舌尖碰撞，入口即化，酥脆香溢（38￥）</p> </section></li><li><img src="二維碼.jpg" alt="" id="register-dialog"> </li></ul><tr><td colspan="3"><input class="myBtn" type="button" value="收款碼" id="erweima"><input class="myBtn" type="button" value="收回收款碼" id="shouhui"></td> <script>let register_dialog = document.getElementById('register-dialog');let erweima = document.getElementById('erweima');let shouhui = document.getElementById('shouhui');erweima.addEventListener('click',function(){register_dialog.style.display = 'block';});shouhui.addEventListener('click',function(){register_dialog.style.display = 'none';})</script> </tr></section><footer id="ddddd"><!-- <section> --><div id="bugs"><h3 id="dddd">小白的元宇宙團(tuán)隊(duì)傾情呈現(xiàn)</h3><p class="wuwuwu"> 小白的元宇宙成員均是來(lái)自武漢理工大學(xué)在讀的優(yōu)秀本科生，專業(yè)領(lǐng)域涉及到金融科技、經(jīng)濟(jì)、電商、計(jì)算機(jī)等多個(gè)領(lǐng)域，分工合作。具有互補(bǔ)的知識(shí)領(lǐng)域和良好的理論基礎(chǔ)，形成了一支富有創(chuàng)意，擅長(zhǎng)管理，熟于投資，善于總結(jié)的經(jīng)營(yíng)管理團(tuán)隊(duì)。小白的元宇宙團(tuán)隊(duì)注重團(tuán)隊(duì)協(xié)作、求真、團(tuán)結(jié)的職業(yè)精神，在無(wú)數(shù)次電話會(huì)議，私信溝通之中建立起來(lái)的合作精神是小白的元宇宙團(tuán)隊(duì)最寶貴的精神財(cái)富，也是元之旅平臺(tái)不斷成長(zhǎng)壯大的不竭動(dòng)力。</p></div></footer></body> </html>關(guān)于項(xiàng)目源碼：
<!doctype html> <html lang="en"> <head><meta charset="utf-8"/><title>元之旅</title><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" > function smartColumns() { //Create a function that calculates the smart columns//Reset column size to a 100% once view port has been adjusted $("ul.column").css({ 'width' : "100%"});var colWrap = $("ul.column").width(); //Get the width of row var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions. $("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column } smartColumns();//Execute the function when page loads$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function smartColumns(); }); </script> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <style>/* Created by http://freehtml5templates.com */ /* basics *//* reset */ * {margin: 0;padding: 0;font-family: 楷體;}/* render html5 elements as block */ header, footer, section, aside, nav, article {display: block;}/* standard body */ body {margin: 0 auto;width: 960px;font: 14px/20px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;/* background: #271408 url("bodybkg.gif") repeat; */background: url("背景.jpg");background-repeat: no-repeat;background-size: cover;}/* standard alignments */ .alignleft {float: left;}img.alignleft {margin: 5px 10px 0 0; }.alignright {float: right;}img.alignright {margin: 5px 0 0 10px; }.center {text-align: center;}.fleft {text-align: left;float: left;margin-left: 20px;}.fright {float: right;text-align: right;margin-right: 20px;}.fcentered {text-align: center;}/* Hx tags */h1 {font-size: 48px;padding: 20px 0;text-shadow: 2px 2px 2px #000;color: #d6a965;}h2 {font-size: 24px;padding: 20px 0;}h3 {font-size: 18px;padding: 10px 0;}p {padding-bottom: 20px;}/* nav */nav {position: absolute;width: 960px;background: url("navbg.png");/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}nav ul {margin: 0 auto;width: 960px;list-style: none;}nav ul li {float: left;}nav ul li a {display: block;margin-right: 20px;width: 140px;font-size: 16px;font-weight: bold;line-height: 44px;text-align: center;text-decoration: none;color: #f2ede7;}nav ul li a:hover {color: #d6a965;}nav ul li.selected a {color: #d6a965;}nav ul li.subscribe a {margin-left: 20px;padding-left: 33px;text-align: left;background: url("rss.png") left center no-repeat;}/* intro */#intro {position: relative;margin-top: 55px;padding: 50px;background-color: #eabb4d;/* background size */-webkit-background-size: 100%;-o-background-size: 100%;-khtml-background-size: 100%;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;border: #f2ede7 solid 15px;}#intro h2, #intro p {position: relative;z-index: 9999;width: 350px;}#intro h2 {padding: 0 0 20px 0;font-weight: normal;color: #fff;text-align: center;}#intro p {padding: 0;color: #fff;text-align: justify;}#intro img {position: absolute;top: 0;right: 0;width: 400px;height: 100%;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}/* content and sidebar layout */#content {position: relative;margin-top: 50px;float: left; width: 920px; margin:10px 5px 10px 0; padding:5px 20px 5px 20px;background-color: #eabb4d;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }/* columns */#content ul.column {width: 100%;padding: 0;margin: 10px 0;list-style: none; }#content ul.column li {float: left;width: 230px; /*Set default width*/padding: 0;margin: 5px 0;display: inline; }#content .block {height: 355px;font-size: 1em;margin-right: 10px; /*Creates the 10px gap between each column*/padding: 20px;background: #eabb4d; /* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }#content .block a {color: #FFF;}#content .block img {/*Flexible image size with border*/width: 89%; /*Took 1% off of the width to prevent IE6 bug*/padding: 5%;background:#fff;margin: 0 auto;display: block;-ms-interpolation-mode: bicubic; /*prevents image pixelation IE 6/7 */} /* end of column configuration *//* footer */ footer {width: 960px;clear: both;color: #f2ede7;overflow: hidden;padding-top: 10px;background-color: #271408;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;height: 200px;margin-bottom: 10px;}footer section { width: 300px; float: left; padding: 0 10px; }footer section h2 { margin-top: 0; }footer section p {font-size: 12px;}footer section a {color: #999;}footer section a:hover {color: #FFF;text-decoration: none;}/* for inner pages *//* content and sidebar layout */#innercontent {float: left; width: 610px; margin:10px 5px 10px 0; padding:5px 20px 5px 20px;background-color: #eabb4d;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px; }aside {float: right;text-align: left; width: 300px; margin:0; padding:0;}/* article */ .articlecontent header p, .blogPost header p a {font-size: 14px;font-style: italic;color: #777;}.articlecontent p a {color: #695e53;}.articlecontent p a:hover {color: #fff;}.articlecontent header p a:hover {text-decoration: none;color: #000;}/* box shadow on pics */ .articlecontent img {-webkit-box-shadow: 3px 3px 7px #777;}/* sidebar */ aside section {margin: 10px 0 0 10px;padding: 10px 15px;background-color: #eabb4d;/* curved border radius */-moz-border-radius: 10px;-webkit-border-radius: 10px;}aside section ul {margin: 0 0 0 20px;color: #FFF;}aside section ul li a {display: block;text-decoration: none;color: #695e53;}aside section ul li a:hover {text-decoration: underline;color: #fff;}#dddd {text-align: center;color: orange;/* fon */margin: 10px 0;}.wuwuwu {text-align: justify;font-size: 15px;line-height: 30px;}#bugs {margin: 30px;margin-top: 0;} </style> <body><header><meta charset="utf-8"/><h1>元之旅</h1></header><nav><ul><li class="selected"><a href="#">關(guān)于項(xiàng)目</a></li><li><a href="文創(chuàng)購(gòu)買.html">文創(chuàng)購(gòu)買</a></li><li><a href="index.html">首頁(yè)</a></li><li><a href="index1.html">VR觀景</a></li><li><a href="#">聯(lián)系我們(建設(shè)中)</a></li></ul></nav><section id="intro"><header><h2>元之旅的背景</h2></header><p>旅游業(yè)與元宇宙擁有天然的契合度，元宇宙在旅游方面的落地運(yùn)用，能為疫情防控常態(tài)下的旅游市場(chǎng)注入強(qiáng)勁動(dòng)力，滿足人民群眾足不出戶便可游遍世界的愿望，數(shù)字旅游產(chǎn)業(yè)越來(lái)越被各地作為推動(dòng)產(chǎn)業(yè)高質(zhì)量發(fā)展的重要抓手。</p><img src="ddddd.jpg" alt="lime" /></section><div id="innercontent"><article class="articlecontent"><header><h2>元之旅的意義</h2></header><p>基于元宇宙概念的旅游-沉浸式服務(wù)新型平臺(tái)是一款綜合考慮旅游業(yè)發(fā)展前景、元宇宙發(fā)展趨勢(shì)、區(qū)塊鏈技術(shù)、VR技術(shù)、消費(fèi)者行為與安全、國(guó)家政策支持等因素下的居家沉浸式出游+實(shí)景購(gòu)物的旅游平臺(tái)，皆在為客戶提供沉浸式旅游-居家體驗(yàn)-實(shí)景購(gòu)物-上門配送的全包式服務(wù)，滿足客戶高品質(zhì)消費(fèi)需求。</p><p>居家沉浸式旅游體驗(yàn)，目的在于在疫情防控常態(tài)化下，為消費(fèi)者提供最具真實(shí)感的居家旅行服務(wù)。突出時(shí)代背景，提升用戶消費(fèi)體驗(yàn)，結(jié)合區(qū)塊鏈、VR、5G等技術(shù)打造新一代居家旅行產(chǎn)品，實(shí)現(xiàn)消費(fèi)者足不出戶游遍世界，玩遍全球。實(shí)景購(gòu)物，目的在于為消費(fèi)者提供高質(zhì)量消費(fèi)體驗(yàn)。時(shí)至今日，傳統(tǒng)線上電商購(gòu)物還停留在平面電商階段，與消費(fèi)者交互性不足，消費(fèi)者體驗(yàn)感無(wú)法得到較好滿足，由此引發(fā)的退換貨現(xiàn)象極為嚴(yán)重。</p></article><article class="articlecontent"><header><h2>特有的優(yōu)勢(shì)</h2></header><p></p><p>在元宇宙中的實(shí)景購(gòu)物，實(shí)現(xiàn)消費(fèi)者在旅游途中情景式購(gòu)物，在元宇宙中邊玩邊購(gòu)，讓消費(fèi)更具真實(shí)感、滿足感。我們平臺(tái)始終將用戶體驗(yàn)放在首位，滿足客戶高質(zhì)量消費(fèi)需求，將努力實(shí)現(xiàn)電腦端、移動(dòng)端全覆蓋，讓消費(fèi)者隨時(shí)隨地，游遍全球，買遍世界。在系列政策和5G、大數(shù)據(jù)、AR、VR、云計(jì)算等技術(shù)的支持下，數(shù)字旅游逐步成為旅游行業(yè)轉(zhuǎn)型升級(jí)發(fā)展的主要方向。利用5G、人工智能等新技術(shù)發(fā)展智慧旅游、推進(jìn)旅游服務(wù)便利化；利用大數(shù)據(jù)、區(qū)塊鏈等技術(shù)加強(qiáng)旅游市場(chǎng)監(jiān)管、提升旅游服務(wù)質(zhì)量；利用互聯(lián)網(wǎng)、數(shù)字化等技術(shù)手段發(fā)展線上旅游新業(yè)態(tài)、推動(dòng)旅游業(yè)態(tài)多元化......數(shù)字化給旅游行業(yè)帶來(lái)的，將是全業(yè)態(tài)、全流程的變革。</p></article></div><aside><section><header><h3>目錄</h3></header><ul><li><a href="#">項(xiàng)目背景</a></li><li><a href="#">項(xiàng)目目的</a></li><li><a href="#">項(xiàng)目制作者</a></li><li><a href="#">其他</a></li></ul></section><section><header><h3>贊助者</h3></header><br /><br /><br /></section><section><header><h3>聯(lián)系我們</h3></header><ul><li><a href="#">QQ</a></li><li><a href="#">微信</a></li><li><a href="#">GitHub</a></li></ul></section><section><header><h3>近期動(dòng)態(tài)</h3></header><ul><li><a href="#"></a></li><li><a href="#"></a></li></ul></section></aside><footer id="ddddd"><!-- <section> --><div id="bugs"><h3 id="dddd">小白的元宇宙團(tuán)隊(duì)傾情呈現(xiàn)</h3><p class="wuwuwu"> 小白的元宇宙成員均是來(lái)自武漢理工大學(xué)在讀的優(yōu)秀本科生，專業(yè)領(lǐng)域涉及到金融科技、經(jīng)濟(jì)、電商、計(jì)算機(jī)等多個(gè)領(lǐng)域，分工合作。具有互補(bǔ)的知識(shí)領(lǐng)域和良好的理論基礎(chǔ)，形成了一支富有創(chuàng)意，擅長(zhǎng)管理，熟于投資，善于總結(jié)的經(jīng)營(yíng)管理團(tuán)隊(duì)。小白的元宇宙團(tuán)隊(duì)注重團(tuán)隊(duì)協(xié)作、求真、團(tuán)結(jié)的職業(yè)精神，在無(wú)數(shù)次電話會(huì)議，私信溝通之中建立起來(lái)的合作精神是小白的元宇宙團(tuán)隊(duì)最寶貴的精神財(cái)富，也是元之旅平臺(tái)不斷成長(zhǎng)壯大的不竭動(dòng)力。</p></div></footer> <!-- Free template created by http://freehtml5templates.com --> </body> </html>最后：還有圖床哦，放在下面這個(gè)鏈接啦：
https://github.com/lzt123lzt/lzt123lzt.github.io
大家可以自己查看啊
感謝閱讀，這次分享就到這里吧！???
總結(jié)
以上是生活随笔為你收集整理的超好看的个人网页，你还不fork一下？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 博客搬家了啊啊啊
- 下一篇： MVS学习（一）：综述论文阅读记录