時間：2023-07-26 13:36:01 | 來源：網(wǎng)站運營
時間：2023-07-26 13:36:01 來源：網(wǎng)站運營
大一學生《Web編程基礎》期末網(wǎng)頁制作 基于HTML+CSS+JavaScript響應式個人主頁相冊介紹模板：精彩專欄推薦 ?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術博主 作者主頁: 【主頁—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設項目精品實戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】 免費且實用的WEB前端學習指南： 【 web前端零基礎到高級學習視頻教程 120G干貨分享】 關于作者: 歷任研發(fā)工程師，技術組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁、其他html為二級頁面； （2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3） js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到js代碼）。<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>Born to love</title> <!-- 滑動插件庫 --> <link rel="stylesheet" type="text/css" href="css/animate.css"> <!-- bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- 自己的樣式 --> <link rel="stylesheet" href="css/style.css"> <!-- 公共樣式 --> <link rel="stylesheet" href="css/reset.css"></head><body> <header id="header" class="header"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="index.html" class="navbar-brand logo hidden-xs"> <img src="images/logo.png" alt="logo" class="img-responsive"> </a> <a href="index.html" class="navbar-brand logo hidden-md hidden-sm hidden-lg">Born to love</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class=""><a href="index.html">首頁</a></li> <li><a href="team.html">火星成員</a></li> <li><a href="activity.html">華家有一子</a></li> <li><a href="us.html">聯(lián)系我們</a></li> <li><a href="login.html">登錄</a></li> <li><a href="register.html">注冊</a></li> </ul> </div> </div> </nav> </header> <section> <div id="myCarousel" class="carousel slide wow fadeInDown"> <ul class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="item active"> <img src="images/lunbo2.jpg" alt="第一張" class="img-responsive"> </div> <div class="item"> <img src="images/lunbo3.jpg" alt="第二張" class="img-responsive"> </div> <div class="item"> <img src="images/lunbo1.jpg" alt="第三張" class="img-responsive"> </div> </div> <a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" data-slide="next" class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </section> <section id="welcome"> <div class="container"> <div class="col-md-12"> <div class="welcome-title text-center wow fadeInDown"> <h2>Born to Love</h2> <p>Welcome Home</p> </div> </div> <div class="row"> <div class="col-md-6 wow fadeInLeft col-sm-6"> <div class="li"> <a href="#" class="pull-left"> <img src="images/Welcome06.jpg" alt="bg" class="img-responsive"> </a> <div class="media-body"> <h3>It's Not Ending</h3> <p>關于家，不會有結尾</p> <p>因為一切都才剛剛開始</p> <p>但是，故事總會說再見</p> <p>希望家一直都在，家里的人一直都好</p> </div> </div> </div> <div class="col-md-6 wow fadeInRight col-sm-6" data-wow-delay="0.2s" > <div class="li"> <a href="#" class="pull-left"> <img src="images/Welcome01.png" alt="bg" class="img-responsive"> </a> <div class="media-body"> <h3>Welcome Home</h3> <p>我們都是素不相識的陌生人</p> <p>都默默地在各自的軌道上無聲的運行著</p> <p> 好像永不會相交的平行線</p> <p>但奇妙的命運讓我們在這里相聚</p> <p>成為朋友，成為家人</p> </div> </div> </div> <div class="col-md-6 wow fadeInLeft col-sm-6"> <div class="li"> <a href="#" class="pull-left"> <img src="images/Welcome03.jpg" alt="bg" class="img-responsive"> </a> <div class="media-body"> <h3>BORN TO LOVE</h3> <p>我們腳下站著每一寸土地，都來自火星</p> <p>都來自我們共同的家</p> <p>家里的一切都很好</p> </p> </div> </div> </div> <div class="col-md-6 wow fadeInRight col-sm-6" data-wow-delay="0.2s"> <div class="li"> <a href="#" class="pull-left"> <img src="images/Welcome02.jpg" alt="bg" class="img-responsive"> </a> <div class="media-body"> <h3>To Be Myself</h3> <p>在家里，我們沒有條條框框的約束</p> <p>沒有一個“好孩子”“好父母”“好老板”的標簽</p> <p>不會被別人隨便定義</p> <p>也不會隨便地定義別人</p> <p>我們所做的事都是建立在善良的基礎上</p> </div> </div> </div> </div> </div></section><section id="team"> <div class="container"> <div class="col-md-12"> <div class="huoxin-title wow slideInLeft"> <h2>火星成員</h2> </div> </div> <div class="row"> <div class="time"> <div class="col-md-4 wow zoomInRight col-sm-6"> <div class="thumbnail thm"> <img src="images/1.jpg" alt="頭像"> <a href="#"><h2>PrePre</h2></a> <span>It is a lovely cat </span> <p>只為了更好遇見 才賦予了距離和時間 今天 值得等待</p> </div> </div> <div class="col-md-4 wow zoomInUp col-sm-6"> <div class="thumbnail thm"> <img src="images/2.jpg" alt="頭像"> <a href="#"><h2>黑煤球</h2></a> <span>A group of lovely and inflated Fairies</span> <p>當你面對困惑時 它會告訴你 你就是你 最好的你</p> </div> </div> <div class="col-md-4 wow zoomInLeft col-sm-6"> <div class="thumbnail thm"> <img src="images/3.jpg" alt="頭像"> <a href="#"><h2>火星鼠</h2></a> <span>A lovely mouse</span> <p>它挺愛笑 只是 有時 會失落和悲傷</p> </div> </div> <div class="hidden-md wow zoomInLeft col-sm-6 hidden-lg hidden-xs"> <div class="thumbnail thm"> <img src="images/5.jpg" alt="頭像"> <a href="#"><h2>火星鼠</h2></a> <span>nubmer one</span> <p>你就是你 唯一的你</p> </div> </div> </div> </div> </div></section><!-- 華家有一子 --><section id="activity"> <div class="container"> <div class="col-md-12"> <div class="title wow slideInLeft"> <h2>華家有一子</h2> <p>我并不是什么天才，我只是比別人學的要早</p> </div> </div> <div class="row"> <div class="events-bottom"> <div class="col-md-6 event-left wow zoomIn"> <div class="col-md-6 event-right wow zoomIn"> <div class="e-2"> <a href=""><img src="images/tuan3.jpeg" alt="" > <h4>我與你 際緣而遇 于是你 因愛而生</h4> </a> </div> </div> <div class="col-md-6 event-right wow zoomIn"> <div class="e-2"> <a href=""><img src="images/tuan1.jpg" alt="" > <h4>保持酷與獨立 或享受寂寞</h4> </a> </div> </div> <img src="images/tuan5.jpg" alt="" > <div class="event"> <a href=""><h4>華晨宇</h4></a> <p>華晨宇，1990年2月7日生于浙江省十堰市，中國內(nèi)地男歌手、作曲人，畢業(yè)于杭州音樂學院。2013年參加浙江衛(wèi)視《快樂男聲》獲年度總冠軍出道。2014年1月首登央視春晚舞臺；同年4月參加戶外真人秀節(jié)目《花兒與少年》；9月6日-7日在杭州萬事達中心連開兩場“火星”演唱會，隨后發(fā)行首張個人專輯《卡西莫多的禮物》，并憑此專輯獲2015QQ音樂年度最佳內(nèi)地男歌手及第十五屆音樂風云榜年度最受歡迎男歌手等獎項。</p> </div> </div> <div class="col-md-6"> <div class="col-md-6 event-right wow zoomIn"> <div class="e-2 wow zoomIn"> <a href=""><img src="images/tuan2.jpg" alt="" > <h4>感受愛與自由 或 活出真我</h4> </a> </div> </div> <div class="col-md-6 event-right wow zoomIn"> <div class="e-2 wow zoomIn"> <a href=""><img src="images/tuan4.jpg" alt="" > <h4>愿你能觸摸火星晨 接觸新世界</h4> </a> </div> </div> <div class="col-md-12"> <a href=""><img src="images/tuan6.jpg" alt="" class="img-responsive"></a> <div class="event"> <a href=""><h4>華晨宇</h4></a> <p>2016年9月27日出席亞洲新歌榜2016年度盛典，攬獲最佳男歌手獎；同年10月加盟東方衛(wèi)視《天籟之戰(zhàn)》；同年12月2日獲2016MAMA亞洲最佳藝人獎。2017年3月14日發(fā)行專輯《H》；同年6月，參加旅行真人秀《旅途的花樣》。2018年2月參加浙江衛(wèi)視《歌手2018》，獲總決賽亞軍 ；同年9月8日-9日在鳥巢體育場連開兩場2018火星演唱會 。2019年11月15日-17日在杭州五源河體育場連開3場2019火星演唱會 。</p> </div> </div> </div> <div class="clearfix"></div> </div> </div> </div></section><section id="we"> <div class="container"> <div class="col-md-12"> <div class="title1 wow slideInLeft"> <h2>聯(lián)系我們</h2> </div> </div> <div class="row"> <div class="col-md-10 col-md-offset-1" > <form method="get" > <div class="form-group wow fadeInRight form-height"> <input type="text" class="form-control form-control-white" placeholder="name" value="" required> </div> <div class="form-group wow fadeInLeft form-height"> <input type="text" class="form-control form-control-white" placeholder="call" value="" required> </div> <div class="form-group wow fadeInRight form-height"> <input type="email" class="form-control form-control-white" placeholder="Email" value="" required> </div> <div class="form-group wow fadeInLeft"> <textarea class="form-control form-control-white" placeholder="請留言..." required rows="5"></textarea> </div> <div class="form-group wow fadeInLeft form-height"> <button type="submit" class="btn btn-default btn-lg" required>提交信息</button> </div> </form> </div> </div> </div></div></section><footer id="footer"> <div class="container"> <div class="row"> <div class="footer-top wow wobble"> <div class="col-md-4 footer-left col-sm-4"> <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> <p> <label>聯(lián)系地址</label> 火星空間站 </p> </div> <div class="col-md-4 footer-left col-sm-4"> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> <p><label>聯(lián)系電話</label> ETHCY317</p> </div> <div class="col-md-4 footer-left col-sm-4"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <p><label>郵箱</label> <a href="mailto:2137784448@qq.com">2137784448@qq.com</a></p> </div> </div> <!-- 分界線 --> <div class="col-md-4 xian col-sm-4"></div> <div class="col-md-12 col-sm-12"> <img src="images/vx.png" alt="微信公眾號"/> </div> <div class="col-md-12"> <p>Born to Love 歡迎您</p> </div> </div> </div> </footer> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/wow.min.js"></script> <script type="text/javascript"> //動畫庫 $(function(){ new WOW().init(); }); </script> </body> </html>@charset "utf-8";/*公用樣式*/body,ul,ol,li,p,h1,h2,h3,h4,form,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}body,button,input,select,textarea{font:14px/1.5 tahoma, Microsoft YaHei,/5b8b/4f53;*font-family: 'Microsoft YaHei';color: #666;}img{border:none;}li{list-style:none;}input,select,textarea{outline:none;border:none; background:none;}textarea{resize:none;}a{text-decoration:none; color:#656565;}i,em{ font-style:normal}/*清浮動*/.clearfix:after{content:"";display:block;clear:both;}.clearfix{zoom:1;}.fl{float:left;}.fr{float:right;}.comWidth{width:1200px; margin-left:auto; margin-right:auto; margin: 0 auto;}.center{width: 1200px;margin-left:auto; margin-right:auto; margin: 0 auto;}.leftArea{float:left;}.rightArea{float:right;}.hide{display:none;}.show{display:block;}請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！ 【 關注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！關鍵詞：響應,相冊,學生,基礎
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
