时间：2023-09-04 07:12:02 | 来源：网站运营
时间：2023-09-04 07:12:02 来源：网站运营
基于Web的个人网页响应式页面设计与实现 HTML+CSS+JavaScript（web前端网页制作课作业）：精彩专栏推荐 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业： 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式：【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码：【 echarts大屏展示大数据平台可视化(150套) 】 免费且实用的WEB前端学习指南： 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1） html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。<!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">联系</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年的金南俊只是说唱圈的新人，方时赫在签下他之后，以他为中心面试选拔了其余六位成员。在经过两年多的筹备，防弹少年团最终成团 [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日起，防弹少年团通过官网开始陆续发布成员出道预告照片 [21] ；12日，发行首张单曲专辑《2 COOL 4 SKOOL》，该专辑共收录了包括主打曲《No More Dream》在内的9首歌曲 [1] ；13日，出演Mnet音乐节目《M! Countdown》，在节目中表演初舞台，正式出道 [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">发行第三张迷你专辑《花样年华 pt.1》，主打歌曲《I NEED U》获得5个韩国音乐节目的一位 [34] ，这也是防弹少年团出道后首次获得音乐节目的一位 [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; }}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：实现,设计,响应
