時間：2023-09-04 07:12:02 | 來源：網(wǎng)站運營
時間：2023-09-04 07:12:02 來源：網(wǎng)站運營
基于Web的個人網(wǎng)頁響應(yīng)式頁面設(shè)計與實現(xiàn) HTML+CSS+JavaScript（web前端網(wǎng)頁制作課作業(yè)）：精彩專欄推薦 ?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁: 【主頁—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項目精品實戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】 免費且實用的WEB前端學(xué)習(xí)指南： 【 web前端零基礎(chǔ)到高級學(xué)習(xí)視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 堅持原創(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)頁中運用到j(luò)s代碼）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tam - Creative Portfolio Template</title> <meta name="description" content="Tam - Creative Portfolio Template"> <meta name="keywords" content="blog, business card, creative, creative portfolio, cv theme, online resume, personal, portfolio, professional cv, responsive portfolio, resume, resume theme, vcard"> <meta name="author" content="beingeorge"> <meta name="theme-color" content="#2a2d35"> <!-- TamTemplate style Css --> <link href="css/tam.css" rel="stylesheet"></head><body> <div id="bar"> <img src="picture/bar.png" alt=""> </div> <!-- START: Aside --> <aside class="aside"> <!-- START: NAVBAR --> <div class="nav-wrapper"> <nav class="navbar text-center align-items-center justify-content-center"> <div class="collapse navbar-collapse show" id="navbarCollapse"> <div class="about-avatar mb-5"> <a href=""> <img src="picture/1.jpg" alt="" class="img-fluid mx-auto d-block shadow-sm rounded-full"> </a> <div class="about-avatar-details mt-4"> <h1>防彈少年團</h1> <p class="badge">My Love</p> </div> </div> <ul class="navbar-nav mx-auto"> <li class="nav-item active"> <a class="nav-link" href="">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="resume.html">簡介</a> </li> <li class="nav-item"> <a class="nav-link" href="work.html">照片</a> </li> <li class="nav-item"> <a class="nav-link" href="services.html">詳細資料</a> </li> <li class="nav-item"> <a class="nav-link" href="blog.html">專輯</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">獎項</a> </li> <li class="nav-item "> <a class="nav-link" href="biaodan.html">聯(lián)系</a> </li> <li class="nav-item "> </li> </ul> </div> </nav> </div> <!-- END: NAVBAR --> </aside> <!-- START: Aside --> <div class="page-overlay"> <span class="overlay-1"></span> <span class="overlay-2"></span> </div> <div class="page-wrapper"> <!-- START: HOME --> <section class="section-home " id="home"> <div class="glass">防彈少年團（BTS）</div> <!-- <img src="images/banner.jpg" /> --> </section> <!-- END: HOME --> <!-- START: ABOUT --> <section class="section section-about" id="about"> <div class="container"> <div class="section-head"> <span>Get to know</span> <h2>About Me</h2> </div> <div class="row justify-content-center align-items-center"> <div class="col-md-6"> <img class="about-img img-fluid wow fadeInUp" data-wow-duration="1s" src="picture/1.jpg" alt="About Picture"> </div> <div class="col-md-6"> <div class="about-desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="500ms"> <div class="about-desc-content"> <h1 class="font-weight-light mb-5">防彈少年團（BTS）</h1> <p class="font-weight-light my-3">防彈少年團（BTS）是BigHit Entertainment于2013年6月13日推出的韓國男子演唱組合，由金南俊、金碩珍、閔玧其、鄭號錫、樸智旻、金泰亨、田柾國7位成員組成。</p> <p class="font-weight-light my-3">防彈少年團的雛形源自于2010年。韓國BigHit Entertainment代表方時赫在第一次聽到金南俊的聲音后，便為之折服，2010年的金南俊只是說唱圈的新人，方時赫在簽下他之后，以他為中心面試選拔了其余六位成員。在經(jīng)過兩年多的籌備，防彈少年團最終成團 [20] 。</p> </div> <div class="about-desc-more text-left mt-5"> <div class="row"> <div class="col-md-6"> <div class="about-desc-info"> <b>Age : </b> <span>19</span> </div> </div> <div class="col-md-6"> <div class="about-desc-info"> <b>Location : </b> <span>Miami, FL</span> </div> </div> <div class="col-md-6"> <div class="about-desc-info"> <b>Degree : </b> <span>Master</span> </div> </div> <div class="col-md-6"> <div class="about-desc-info"> <b>Skype : </b> <a href="tel:beingeorge">beingeorge</a> </div> </div> <div class="col-md-6"> <div class="about-desc-info"> <b>Phone : </b> <a href="tel:0987654321">XXX</a> </div> </div> <div class="col-md-6"> <div class="about-desc-info"> <b>Email :</b> <a href="mailto:XXX">XXX</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container mt-5 pt-3"> <div class="section-head "> <span>ABILITIES</span> <h2>My Skills</h2> </div> <div class="section-skills-wrap"> <div class="row"> <div class="col-md-6"> <p>2013年6月3日起，防彈少年團通過官網(wǎng)開始陸續(xù)發(fā)布成員出道預(yù)告照片 [21] ；12日，發(fā)行首張單曲專輯《2 COOL 4 SKOOL》，該專輯共收錄了包括主打曲《No More Dream》在內(nèi)的9首歌曲 [1] ；13日，出演Mnet音樂節(jié)目《M! Countdown》，在節(jié)目中表演初舞臺，正式出道 [2] ；</p> <p> tempor iaculis massa. Sed placerat justo sed libero varius vulputate. Ut a mi tempus massa malesuada fermentum.</p> </div> <div class="col-md-6"> <div class="resume-panel"> <div class="mb-4 wow fadeInUp" data-wow-duration="1.5s"> <h6>金南俊、金碩珍、</h6> <div class="progress mt-2"> <div class="progress-bar" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="mb-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".2s"> <h6>閔玧其、鄭號錫、 </h6> <div class="progress mt-2"> <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="mb-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".3s"> <h6>樸智旻、金泰亨、</h6> <div class="progress mt-2"> <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="mb-0 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".4s"> <h6>田柾國</h6> <div class="progress mt-2"> <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- END: ABOUT --> <!-- START: SERVICES --> <section class="section section-dark section-services" id="services"> <div class="container"> <div class="section-head"> <span>WHAT I DO</span> <h2>My Services</h2> </div> <div class="row mt-4"> <div class="col-sm-6 col-lg-6"> <div class="services-list b-box hover-state p-4 mt-4 wow fadeInUp" data-wow-duration="1.5s"> <div class="services-list-icon"> <i class="lni-color-pallet"></i> <span>01</span> </div> <div class="mt-4"> <h5 class="mb-0">2014年1月</h5> <p class=" mt-3">防彈少年團先后獲得了第28屆金唱片大賞專輯部門新人獎和第23屆首爾歌謠大賞新人獎兩個獎項 [24-25] ；2月12日，推出第二張迷你專輯《Skool Luv Affair》，</p> </div> </div> </div> <div class="col-sm-6 col-lg-6"> <div class="services-list b-box hover-state p-4 mt-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".2s"> <div class="services-list-icon"> <i class="lni-laptop-phone"></i> <span>02</span> </div> <div class="mt-4"> <h5 class="mb-0">2015年4月29日，</h5> <p class=" mt-3">發(fā)行第三張迷你專輯《花樣年華 pt.1》，主打歌曲《I NEED U》獲得5個韓國音樂節(jié)目的一位 [34] ，這也是防彈少年團出道后首次獲得音樂節(jié)目的一位 [7] </p> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12 text-center mt-5 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".5s"> <a href="services.html" class="btn hover-state">View All</a> </div> </div> </div> </section> <!-- END: SERVICES --> <!--START: FOOTER--> <footer class="footer section section-light"> <div class="container"> <p class="copyright text-center mb-0">© </p> </div> </footer> <!--END: FOOTER--> </div> <!-- JAVASCRIPTS --><script src="js/js.js"></script></body></html>html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}body { font: 400 16px/1.8 'Roboto Condensed', sans-serif; color: #333; overflow-x: hidden;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}/* ---------------------------------------------- /** 2. General/* ---------------------------------------------- */body { overflow-x: hidden; background: #50a3a2; background: linear-gradient(135deg, rgb(165, 155, 224) 0%, rgba(242,147,113,1) 100%); background: linear-gradient(135deg, rgb(165, 155, 224) 0%, rgba(242,147,113,1) 100%);}#bar{ display: none; position: fixed; top: 10px; left: 10px; z-index: 9999;}#bar img{ width: 40px; height: 40px;}::selection { background: rgba(166, 175, 189, 0.3);}::-moz-selection { background: rgba(166, 175, 189, 0.3);}*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}::-webkit-scrollbar { display: none;}a, .ease-3 { -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;}a:link, a:visited, a:hover, a:active { text-decoration: none;}p { color: #5F6F81; font-weight: 300;}h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Condensed', sans-serif; letter-spacing: 2px; color: #333; font-weight: 700;}h1 { font-size: 40px;}h2 { font-size: 36px; margin: 0 0 30px;}h3 { font-size: 24px; letter-spacing: 1px; margin: 0 0 5px;}h4 { font-size: 20px; letter-spacing: 1px;}h5 { font-size: 16px; letter-spacing: 1px; font-weight: 400;}h6 { font-size: 14px; letter-spacing: 1px; font-weight: 400;}img { max-width: 100%; vertical-align: middle;}textarea { height: 100px; resize: none;}b, strong { font-weight: 500;}/* ---------------------------------------------- * 3. Helper Classes /* ---------------------------------------------- */.section { padding: 80px 0; position: relative; background-color: #fff;}.section .container { padding: 0 30px;}.text-custom{ color: #30b6e4!important}.h-100vh{ height: 100vh;}.btn { padding: 12px 40px; font-size: 14px; font-weight: 400; transition: all 0.5s; letter-spacing: 2px; color: #fff; box-shadow: none; text-transform: uppercase; outline: none !important; background-color: #333; border-radius: 0px; min-width: 140px;}.btn:hover { color: #fff; box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.2);}.btn-small { padding: 7px 10px; font-size: 12px;}.rounded-full { border-radius: 50%;}.page-content-wrap { margin-left: 50%; width: 50%; background: #F8FAFB;}.b-box { background: #fff; border-radius: 5px; overflow: hidden; border: 1px solid #eee; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; /*box-shadow: 0px 4px 8px rgba(134, 151, 168, 0.1);*/}.hover-state:hover { transform: translateY(-5px); box-shadow: 0px 4px 8px rgba(134, 151, 168, 0.1); }.aside-banner { position: fixed; top: 0; left: 0; right: 0; width: 50%; height: 100%; background: #fbd0a1;}.aside-open .aside { left: 0;}.section-head { position: relative; margin-bottom: 50px;}.section-head h2 { font-size: 30px;}/* ---------------------------------------------- * 5. Header/* ---------------------------------------------- */.ham { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}.hamRotate.active { transform: rotate(45deg);}.hamRotate180.active { transform: rotate(180deg);}.line { fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:#000; stroke-width:3.5; stroke-linecap:round;}.ham1 .top { stroke-dasharray: 40 139;}.ham1 .bottom { stroke-dasharray: 40 180;}.ham1.active .top { stroke-dashoffset: -98px;}.ham1.active .bottom { stroke-dashoffset: -138px;}.nav-wrapper .navbar-toggler { position: fixed; left: 0; z-index: 20; top: 0; padding: 0; display: none;}.nav-wrapper .navbar { /* background: #2a2d35; */ transition: all 750ms cubic-bezier(0.8, 0, 0.55, 0.94); padding-bottom: 40px;}.nav-wrapper .navbar.active { transform: translate3d(0%, 0, 0);}.nav-wrapper .navbar-nav { display: block; margin-top: 30px;}#navbarCollapse{ text-align: center; padding-bottom: 40px;}.navbar { width: 100%; margin-top: 40px; margin-left: 30px; height: 100%;}.navbar-nav .nav-link { font-size: 12px; letter-spacing: 2px; position: relative; display: inline-block; color: rgba(255, 255, 255, .7); text-transform: uppercase; padding-left: 10px; opacity: 1; padding-right: 5px; display: block; margin-bottom: 8px; text-align: left; border-radius: 6px; padding: 7px 10px; vertical-align: middle; display: flex; align-items: center;}.navbar-nav .nav-link:after { position: absolute; content: ""; left: 0; right: 0; width: 100%; height: 0; background: #fbd0a1; bottom: 20px; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;}.navbar-nav .nav-link.active { opacity: 1;}.navbar-nav .nav-link i { margin-right: 15px; font-size: 16px; width: 17px;}.navbar-nav .nav-link:hover, .navbar-nav .active .nav-link { color: #fff; background: rgba(255,255,255,.2);}.aside { float: left; position: fixed; top: 0; left: 0; height: 100vh; bottom: 0; width: 20%; z-index: 999; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; padding: 0 10px; max-width: 300px;}.page-wrapper { width: 80%; float: left; margin-left: 20%; overflow: hidden; margin-top: 40px; border-radius: 20px 0 0 0px; /*box-shadow: -10px 0px 50px 0px rgba(0,0,0,0.1);*/ -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;}.page-overlay { display: none;}.page-overlay .overlay-1,.page-overlay .overlay-2 { content: ""; position: fixed; background: #fff; width: 100%; height: 100%; border-radius: 20px; z-index: 0;}.page-overlay .overlay-1 { top: 80px; left: 320px; opacity: 0.3;}.page-overlay .overlay-2 { top: 130px; left: 290px; opacit .home-pagination .swiper-pagination-bullet { width: 30px; } .price-box.featured { transform: none; margin: 30px auto; } .price-box { max-width: 400px; } .resume-panel { margin-top: 30px; } .list-item img { height: 200px; } .filter { margin: 40px auto; } .about-avatar { margin-bottom: 30px !important; }}請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：實現(xiàn),設(shè)計,響應(yīng)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
