當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

超好看的个人网页，你还不fork一下？

發布時間：2023/12/20 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了超好看的个人网页，你还不fork一下？小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄?? ：

????????🎊🎊叨叨一下：

話不多說，上項目！！

------------------------------------------------------------------------------

分割線～

開始頁面源碼：🐯

VR觀景源碼：?

文創購買頁面源碼：🚀

關于項目源碼：

最后：還有圖床哦，放在下面這個鏈接啦：

🎊🎊叨叨一下：

唔，這個本來是之前做的一個電商的項目，咱當時還沒有學很多東西，就是粗略的做了一下，最近呢，咱改了一些樣式以及增加了一些功能，就想著給大家康康，變好看了不少！?

🍉🍉🍉這是之前寫的文章，當時一下就沖上熱榜了（bushi

話不多說，上項目！！

大家先來康康效果圖吧：

最近新學的布局，點擊就可以進入首頁了呀！🍓🍓🍓

??這里還有一個小驚喜哦，點擊哪張圖片哪張圖片就會撐開讓你看到全貌，有很不錯的動畫效果哦～

????????

進入首頁后就可以看到我們的VR觀景部分啦，每個圖片都是一個B站的視頻鏈接，但是由于水平有限做不成VR的效果，有無大佬可以指點指點，求求了💦💦💦

??（雖然這方面技術不行，但視頻都是精心挑選的）

?主頁看完了，再來看看文創購買界面吧！

這個界面布局大體沿用VR觀景頁面，不過有小細節哦！

鼠標懸停在商品上面可以看到圖片正在緩緩的放大，是動畫效果哦～

🐠🐠🐠

?是不是還不錯？

后面還有一個“關于項目”頁面，大體上差不多，這里就不展示了嗷。

大家想要去看一下我的這個項目哦，網頁放在這里啦：元之旅

碎碎念：這個項目是搭建在GitHub上面的，安全性倒是很可靠，就是不太便于訪問，近期打算再用其他的框架做一個個人博客（雖然我已經有一個前端知識庫惹），去分享一些個人的經歷與成長！

接下來我要放源碼啦！

碼字不易，能給個贊然后收藏一下嘛?

------------------------------------------------------------------------------

分割線～

開始頁面源碼：🐯

<!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的漸變動畫，漸變動畫的時間函數是貝塞爾曲線，具體參數就和他寫的似的 */flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),/* 就是對于background的變化采用0.2s的漸變動畫 */background 0.2s;font-size: 20px;background-size: cover;background-position: center;flex: 1;justify-content: center;align-items: center;display: flex;/* 屬性指定了內部元素是如何在 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></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>  </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="關于項目.html">關于項目</a></li><li><a href="文創購買.html">文創購買</a></li><li><a href="index.html">首頁</a></li><li class="selected"><a href="index1.html">VR觀景</a></li><li><a href="#">聯系我們(建設中)</a></li></ul></nav><section id="intro"><header><h2>美景美食一屏間</h2></header> <p>文創購買，VR觀景，在這里，你可以看到超現代的魔都，可以看到戰疫勝利的武漢，還有于時間與空間璀璨的巴黎，四處看看，開啟你的旅行吧</p><img src="ddddd.jpg" alt="lime" /></section><section id="content"><ul class="column"><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>古代文明與現代文明在這里交相輝映，碰撞出全新的火花。</p> </section></li><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>北京擁有三千多年的悠久歷史，是六朝古都，深厚的歷史底蘊孕育出豐富的旅游資源。</p> </section></li><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>從公元三世紀起成為海上絲綢之路的主港，唐宋時成為中國第一大港，是世界著名的東方港市，明清時是中國唯一的對外貿易大港，也是世界唯一兩千多年長盛不衰的大港。</p> </section></li><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>武漢是國家歷史文化名城，楚文化的重要發祥地，境內盤龍城遺址有3500年歷史。</p> </section></li><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>倫敦，是大不列顛及北愛爾蘭聯合王國首都，世界金融中心，倫敦占全球外匯交易額的比重超過40%，與紐約和香港并稱為“紐倫港”。</p> </section></li><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>紐約市，位于美國紐約州東南部大西洋沿岸，是美國第一大城市及第一大港口，紐約都市圈為世界上最大的都市圈之一。</p> </section></li><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>位于德國東北部，是德國的首都和最大的城市，也是德國的政治、文化、交通及經濟中心。</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>巴黎，是法蘭西共和國的首都和最大城市，也是法國的政治、經濟、文化和商業中心，世界五個國際大都市之一。</p> </section></li></ul></section><footer id="ddddd"><div id="bugs"><h3 id="dddd">小白的元宇宙團隊傾情呈現</h3><p class="wuwuwu"> 小白的元宇宙成員均是來自武漢理工大學在讀的優秀本科生，專業領域涉及到金融科技、經濟、電商、計算機等多個領域，分工合作。具有互補的知識領域和良好的理論基礎，形成了一支富有創意，擅長管理，熟于投資，善于總結的經營管理團隊。小白的元宇宙團隊注重團隊協作、求真、團結的職業精神，在無數次電話會議，私信溝通之中建立起來的合作精神是小白的元宇宙團隊最寶貴的精神財富，也是元之旅平臺不斷成長壯大的不竭動力。</p></div></footer>  </body> </html>

文創購買頁面源碼：🚀

<!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(); });/*手辦商城購物板塊*/var result=""; //存放選購信息 var price=new Array(257.00,299.00,389.00,69.00,59.00,69.00); var product=new Array("幻紗之靈西施Q版手辦只要￥257.00","仲夏夜之夢貂蟬Q版手辦只要￥299.00","地獄火非洲猴Q版手辦只要￥389.00","超級薄荷黑旋風李白薄荷糖只要￥69.00","99萬毫安的魯班充電寶只要￥ 59.00","一生所愛露娜Q版手辦只要￥699.00"); var isSelected=new Array(0,0,0,0,0,0); function clearAll(){isSelected=[0,0,0,0,0,0]; //選擇狀態全部置0//所以復選框狀態變為未選中狀態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;//存放小計金額var count=0;//存放選購產品件數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] //累計金額}alert("您所選的"+count+"件,產品總價="+total+"\n"+"請去支付!"); } function shoppingCart(){//判斷有多少個復選框被選中var selectList=""; //保存所選產品清單for(var j=0;j<product.length; j++){if(isSelected[j]){ //分行顯示selectList=selectList+(j+1)+"-"+product[j]+",價值="+price[j]+"\n"}}var info=(selectList=="") ? "您的購物車為空,請選購!":selectList;alert(info); //生成一個結算清單,顯示輸出 } function checkSelect(number) {var temp; //暫存復選框狀態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; //記錄選中產品,1-選中,0-未選 }/*留言板塊*/function checkData(){ /*checkData()的JS腳本函數，以便我們在將表單數據提交到服務器前，能對表單中填寫的部分數據的合法性進行必要的檢驗*/var n = document.getElementById("n").value;/*var obj = document.getElementById(頁面元素id)*/var x = document.getElementById("x").value;var t = document.getElementById("t").value;var txt = document.getElementById("txt").value;if(!n){alert("請輸入用戶名！");return false;}else if(!x){alert("請輸入wechat!");return false;}else if(!t){alert("請輸入留言時間");return false;}else if(!txt){alert("請輸入留言內容");return false;}return true; } function check(){var r = checkData(); return r; }</script>  </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;/*變手勢光標*/ }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="關于項目.html">關于項目</a></li><li class="selected"><a href="文創購買.html">文創購買</a></li><li><a href="index.html">首頁</a></li><li><a href="index1.html">VR觀景</a></li><li><a href="#">聯系我們(建設中)</a></li></ul></nav><section id="intro"><header><h2>文創集結地</h2></header><p>在這里，你能從小小的文創中體會到中華古老建筑的魅力，體會到各地糕點的美好</p><img src="ddddd.jpg" alt="lime" /></section><section id="content"><ul class="column"><li><section class="block"><a href=""><img src="上海文創.png" alt="" /></a> <h2><a href="#">上海特產點心</a></h2> <p>本品包含上海特產的各類點心，包裝精致，口感豐富，值得一試（269￥）</p> </section></li><li><section class="block"><a href=""><img src="上海護手霜88.png" alt="" /></a> <h2><a href="#">護手霜</a></h2> <p>兒時的護手霜，兒時的回憶，純天然無刺激，保濕效果滿滿（88￥）</p> </section></li><li><section class="block"><a href=""><img src="上海折扇118.png" alt="" /></a> <h2><a href="#">折扇</a></h2> <p>打開折扇，遇見神都山水（118￥）</p> </section></li><li><section class="block"><a href=""><img src="北京地標書簽.png" alt="" /></a> <h2><a href="#">北京地標書簽</a></h2> <p>精致的書簽，夾在書中，留住美好的記憶（18￥）</p></section></li><li><section class="block"><a href=""><img src="文創新年虎擺件.png" alt="" /></a> <h2><a href="#">新年虎擺件</a></h2> <p>新年快樂，小虎祝您虎年大吉，如虎添翼（58￥）</p> </section></li><li><section class="block"><a href=""><img src="文創擺件貓.png" alt="" /></a> <h2><a href="#">貓擺件</a></h2> <p>可愛的喵喵喵，還不快快入手（48￥）</p> </section></li><li><section class="block"><a href=""><img src="海苔蘇.png" alt="" /></a> <h2><a href="#">海苔酥</a></h2> <p>廣州特產海苔酥，海苔和餅酥在舌尖碰撞，入口即化，酥脆香溢（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"><div id="bugs"><h3 id="dddd">小白的元宇宙團隊傾情呈現</h3><p class="wuwuwu"> 小白的元宇宙成員均是來自武漢理工大學在讀的優秀本科生，專業領域涉及到金融科技、經濟、電商、計算機等多個領域，分工合作。具有互補的知識領域和良好的理論基礎，形成了一支富有創意，擅長管理，熟于投資，善于總結的經營管理團隊。小白的元宇宙團隊注重團隊協作、求真、團結的職業精神，在無數次電話會議，私信溝通之中建立起來的合作精神是小白的元宇宙團隊最寶貴的精神財富，也是元之旅平臺不斷成長壯大的不竭動力。</p></div></footer></body> </html>

關于項目源碼：

<!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>  </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="#">關于項目</a></li><li><a href="文創購買.html">文創購買</a></li><li><a href="index.html">首頁</a></li><li><a href="index1.html">VR觀景</a></li><li><a href="#">聯系我們(建設中)</a></li></ul></nav><section id="intro"><header><h2>元之旅的背景</h2></header><p>旅游業與元宇宙擁有天然的契合度，元宇宙在旅游方面的落地運用，能為疫情防控常態下的旅游市場注入強勁動力，滿足人民群眾足不出戶便可游遍世界的愿望，數字旅游產業越來越被各地作為推動產業高質量發展的重要抓手。</p><img src="ddddd.jpg" alt="lime" /></section><div id="innercontent"><article class="articlecontent"><header><h2>元之旅的意義</h2></header><p>基于元宇宙概念的旅游-沉浸式服務新型平臺是一款綜合考慮旅游業發展前景、元宇宙發展趨勢、區塊鏈技術、VR技術、消費者行為與安全、國家政策支持等因素下的居家沉浸式出游+實景購物的旅游平臺，皆在為客戶提供沉浸式旅游-居家體驗-實景購物-上門配送的全包式服務，滿足客戶高品質消費需求。</p><p>居家沉浸式旅游體驗，目的在于在疫情防控常態化下，為消費者提供最具真實感的居家旅行服務。突出時代背景，提升用戶消費體驗，結合區塊鏈、VR、5G等技術打造新一代居家旅行產品，實現消費者足不出戶游遍世界，玩遍全球。實景購物，目的在于為消費者提供高質量消費體驗。時至今日，傳統線上電商購物還停留在平面電商階段，與消費者交互性不足，消費者體驗感無法得到較好滿足，由此引發的退換貨現象極為嚴重。</p></article><article class="articlecontent"><header><h2>特有的優勢</h2></header><p></p><p>在元宇宙中的實景購物，實現消費者在旅游途中情景式購物，在元宇宙中邊玩邊購，讓消費更具真實感、滿足感。我們平臺始終將用戶體驗放在首位，滿足客戶高質量消費需求，將努力實現電腦端、移動端全覆蓋，讓消費者隨時隨地，游遍全球，買遍世界。在系列政策和5G、大數據、AR、VR、云計算等技術的支持下，數字旅游逐步成為旅游行業轉型升級發展的主要方向。利用5G、人工智能等新技術發展智慧旅游、推進旅游服務便利化；利用大數據、區塊鏈等技術加強旅游市場監管、提升旅游服務質量；利用互聯網、數字化等技術手段發展線上旅游新業態、推動旅游業態多元化......數字化給旅游行業帶來的，將是全業態、全流程的變革。</p></article></div><aside><section><header><h3>目錄</h3></header><ul><li><a href="#">項目背景</a></li><li><a href="#">項目目的</a></li><li><a href="#">項目制作者</a></li><li><a href="#">其他</a></li></ul></section><section><header><h3>贊助者</h3></header><br /><br /><br /></section><section><header><h3>聯系我們</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>近期動態</h3></header><ul><li><a href="#"></a></li><li><a href="#"></a></li></ul></section></aside><footer id="ddddd"><div id="bugs"><h3 id="dddd">小白的元宇宙團隊傾情呈現</h3><p class="wuwuwu"> 小白的元宇宙成員均是來自武漢理工大學在讀的優秀本科生，專業領域涉及到金融科技、經濟、電商、計算機等多個領域，分工合作。具有互補的知識領域和良好的理論基礎，形成了一支富有創意，擅長管理，熟于投資，善于總結的經營管理團隊。小白的元宇宙團隊注重團隊協作、求真、團結的職業精神，在無數次電話會議，私信溝通之中建立起來的合作精神是小白的元宇宙團隊最寶貴的精神財富，也是元之旅平臺不斷成長壯大的不竭動力。</p></div></footer>  </body> </html>

最后：還有圖床哦，放在下面這個鏈接啦：

https://github.com/lzt123lzt/lzt123lzt.github.io

大家可以自己查看啊

感謝閱讀，這次分享就到這里吧！???

總結

以上是生活随笔為你收集整理的超好看的个人网页，你还不fork一下？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：博客搬家了啊啊啊
下一篇： MVS学习（一）：综述论文阅读记录