HTML5系列代码：个人网站-博客

技术2025-07-27 12

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Home</title> <meta name="description" content="" />  <link href="https://programb.me/inter/inter-ui.css" rel="stylesheet">  <link rel="stylesheet" href="css/font-awesome.min.css">  <link rel="stylesheet" href="css/default.css" id="theme-color"> </head> <body>  <section class="sticky-top sticky-navigation"> <div class="container"> <nav class="navbar navbar-expand-md navbar-light"> <a class="navbar-brand heading-black" href="index.html"> Slide </a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span data-feather="grid"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link page-scroll" href="#features">Features</a> </li> <li class="nav-item"> <a class="nav-link page-scroll" href="#pricing">Pricing</a> </li> <li class="nav-item"> <a class="nav-link page-scroll" href="#help">Help</a> </li> <li class="nav-item"> <a class="nav-link page-scroll" href="#blog">Blog</a> </li> <li class="nav-item"> <a class="nav-link page-scroll d-flex flex-row align-items-center" href="#"> <em data-feather="twitter" width="18" height="18" class="mr-2"></em> Log in </a> </li> </ul> </div> </nav> </div> </section>  <section class="pt-6" id="home"> <div class="container"> <div class="row"> <div class="col-md-8 mx-auto my-auto text-center"> <span class="text-uppercase text-muted small-xl">Super Simple Page Builder</span> <h1 class="display-4 mt-2 mb-5">Slide helps you build simple yet visually stunning websites.</h1> <a href="#" class="btn btn-primary d-inline-flex flex-row align-items-center"> <em data-feather="twitter" width="20" height="20" class="mr-2"></em> Build your website </a> <div class="demo-wrapper text-center"> <a href="#" class="d-flex flex-row align-items-center justify-content-center text-muted demo-sample"> <em data-feather="download-cloud" width="17" height="17" class="mr-2"></em> Demo landing page </a> </div> </div> </div> <div class="row mt-6"> <div class="col-12 text-center illustration"> <svg id="e8345542-4160-463b-841e-d6381701a249" data-name="Layer 1" xmlns="http://www.programb.org/svg" xmlns:xlink="http://www.programb.org/xlink" width="100%" height="auto" viewBox="0 0 1014.92 616.5"><defs><linearGradient id="b96c1e95-21f7-460f-8fe8-281b03b6a731" x1="223" y1="366.33" x2="223" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"></stop><stop offset="0.54" stop-color="gray" stop-opacity="0.12"></stop><stop offset="1" stop-color="gray" stop-opacity="0.1"></stop></linearGradient><linearGradient id="fdf2261c-aea2-449f-acb5-ed46fbfe76ac" x1="315" y1="481.74" x2="315" y2="115.42" gradientTransform="matrix(-1, 0, 0, 1, 1106.92, -115.42)" xlink:href="#b96c1e95-21f7-460f-8fe8-281b03b6a731"></linearGradient><linearGradient id="bdb7606e-5185-43e5-b133-41bac9927d37" x1="508" y1="616.5" x2="508" y2="159.83" xlink:href="#b96c1e95-21f7-460f-8fe8-281b03b6a731"></linearGradient></defs><title>windows</title><g opacity="0.5"><rect width="446" height="366.33" fill="url(#b96c1e95-21f7-460f-8fe8-281b03b6a731)"></rect></g><rect x="5.2" y="6.93" width="434.74" height="353.34" fill="#f2f2f2"></rect><rect x="5.2" y="6.93" width="434.74" height="78.81" fill="#e0e0e0"></rect><rect x="5.2" y="6.93" width="434.74" height="78.81" opacity="0.1"></rect><rect x="39.84" y="114.31" width="365.46" height="45.9" fill="#e0e0e0"></rect><rect x="39.84" y="194.85" width="266.73" height="15.59" fill="#e0e0e0"></rect><rect x="39.84" y="221.7" width="173.2" height="15.59" fill="#e0e0e0"></rect><rect x="39.84" y="248.55" width="228.63" height="15.59" fill="#e0e0e0"></rect><rect x="39.84" y="275.39" width="266.73" height="15.59" fill="#e0e0e0"></rect><rect x="39.84" y="302.24" width="89.2" height="15.59" fill="#e0e0e0"></rect><g opacity="0.5"><rect x="568.92" width="446" height="366.33" fill="url(#fdf2261c-aea2-449f-acb5-ed46fbfe76ac)"></rect></g><rect x="666.98" y="122.35" width="434.74" height="353.34" transform="translate(1676.71 482.61) rotate(-180)" fill="#f2f2f2"></rect><rect x="666.98" y="122.35" width="434.74" height="78.81" transform="translate(1676.71 208.08) rotate(-180)" fill="#e0e0e0"></rect><rect x="666.98" y="122.35" width="434.74" height="78.81" transform="translate(1676.71 208.08) rotate(-180)" opacity="0.1"></rect><rect x="701.62" y="229.73" width="365.46" height="45.9" transform="translate(1676.71 389.95) rotate(-180)" fill="#e0e0e0"></rect><rect x="800.35" y="310.27" width="266.73" height="15.59" transform="translate(1775.43 520.72) rotate(-180)" fill="#e0e0e0"></rect><rect x="893.88" y="337.12" width="173.2" height="15.59" transform="translate(1868.96 574.41) rotate(-180)" fill="#e0e0e0"></rect><rect x="838.45" y="363.97" width="228.63" height="15.59" transform="translate(1813.54 628.1) rotate(-180)" fill="#e0e0e0"></rect><rect x="800.35" y="390.81" width="266.73" height="15.59" transform="translate(1775.43 681.79) rotate(-180)" fill="#e0e0e0"></rect><rect x="977.88" y="417.66" width="89.2" height="15.59" transform="translate(1952.97 735.49) rotate(-180)" fill="#e0e0e0"></rect><g opacity="0.5"><rect x="230" y="89.83" width="556" height="456.68" fill="url(#bdb7606e-5185-43e5-b133-41bac9927d37)"></rect></g><rect x="236.48" y="98.46" width="541.97" height="440.48" fill="#fff"></rect><rect class="color" x="236.48" y="98.46" width="541.97" height="98.24" fill="#ffd700"></rect><rect x="279.66" y="232.33" width="455.6" height="57.22" fill="#f5f5f5"></rect><rect x="279.66" y="332.74" width="332.52" height="19.43" fill="#e0e0e0"></rect><rect x="279.66" y="366.21" width="215.92" height="19.43" fill="#e0e0e0"></rect><rect x="279.66" y="399.67" width="285.02" height="19.43" fill="#e0e0e0"></rect><rect x="279.66" y="433.14" width="332.52" height="19.43" fill="#e0e0e0"></rect><rect x="279.66" y="466.61" width="111.2" height="19.43" fill="#e0e0e0"></rect><rect x="303.41" y="251.77" width="129.55" height="17.27" fill="#69f0ae"></rect></svg> </div> </div> </div> </section>  <section class="py-6" id="features"> <div class="container"> <div class="row"> <div class="col-md-10 mx-auto"> <h2 class="dot-circle">The only page builder you'll ever need.</h2> <div class="row mt-6"> <div class="col-sm-6 mb-4"> <h4>Front-end page builder</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo, tempus odio a, vestibulum nibh.</p> </div> <div class="col-sm-6 mb-4"> <h4>Back-end page builder</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo, tempus odio a, vestibulum nibh.</p> </div> <div class="col-sm-6 mb-4"> <h4>Content elements</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo, tempus odio a, vestibulum nibh.</p> </div> <div class="col-sm-6 mb-4"> <h4>Templates & addons</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo, tempus odio a, vestibulum nibh.</p> </div> <div class="col-sm-6 mb-4"> <h4>Skin builder</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo, tempus odio a, vestibulum nibh.</p> </div> <div class="col-sm-6 mb-4"> <h4 class="d-flex flex-row align-items-center">Template library <span class="badge badge-primary badge-feature ml-1 mt-1">new</span> </h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo, tempus odio a, vestibulum nibh.</p> </div> </div> </div> </div> <div class="row mt-4"> <div class="col-md-6 mx-auto text-center"> <h5 class="mb-4">Ready to launch your site?</h5> <a href="#" class="btn btn-primary">Get started now</a> </div> </div> </div> </section>  <section class=" pt-7" id="pricing"> <div class="container"> <div class="row"> <div class="col-md-10 mx-auto"> <h2 class="dot-circle">Super simple pricing.</h2> <p class="text-muted lead">No hidden fees. 100% refund guarantee.</p> <div class="row pricing-table"> <div class="col-sm-5"> <ul class="list-unstyled pricing-list"> <li> <h5>Pay once</h5> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> <li> <h5>One plan</h5> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> <li> <h5>Unlimited access</h5> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> </ul> </div> <div class="col-sm-6 ml-auto"> <div class="card"> <div class="card-body text-center"> <p class="h1">$59</p> <p class="text-muted">One time payment</p> </div> </div> </div> </div> </div> </div> </div> </section>  <section class=" mt-7" id="help"> <div class="container"> <div class="row"> <div class="col-md-10 mx-auto"> <h2 class="dot-circle">Need help?</h2> <p class="text-muted lead">We'd love to answer your questions.</p> <div class="row mt-5 card-contacts"> <div class="col-md-6 mb-3"> <div class="card"> <div class="card-body text-center"> <div class="icon-box"> <div class="icon-box-inner small-xs text-primary"> <span data-feather="inbox" width="30" height="30"></span> </div> </div> <h5>Send us an email</h5> <p class="text-muted small-xl">We usually reply within 24 hours.</p> </div> </div> </div> <div class="col-md-6 mb-3"> <div class="card"> <div class="card-body text-center"> <div class="icon-box"> <div class="icon-box-inner small-xs text-primary"> <span data-feather="message-circle" width="30" height="30"></span> </div> </div> <h5>Chat with us</h5> <p class="text-muted small-xl">The fastest way to contact us.</p> </div> </div> </div> </div> <div class="row mt-5"> <div class="col-md-6 mb-5"> <h6>Can I try Slide for free?</h6> <p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p> </div> <div class="col-md-6 mb-5"> <h6>Do you have hidden fees?</h6> <p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p> </div> <div class="col-md-6 mb-5"> <h6>What are the payment methods you accept?</h6> <p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p> </div> <div class="col-md-6 mb-5"> <h6>How often do you release updates?</h6> <p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p> </div> <div class="col-md-6 mb-5"> <h6>What is your refund policy?</h6> <p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p> </div> <div class="col-md-6 mb-5"> <h6>How can I contact you?</h6> <p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p> </div> </div> </div> </div> </div> </section>  <section class="py-6" id="blog"> <div class="container"> <div class="row"> <div class="col-md-10 mx-auto"> <h2 class="dot-circle">From our blog</h2> <p class="text-muted lead">What's new at Slide.</p> <div class="row mt-5"> <div class="col-md-6 mb-5"> <div class="card"> <a href="#"> <img class="card-img-top img-thumbnail" src="img/parallex.jpg" alt="Blog 1"> </a> <div class="card-body px-0"> <a href="#"> <h5 class="card-title">Back to school with a bullet journal</h5> <p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper, consectetur adipiscing elit.</p> </a> </div> </div> </div> <div class="col-md-6 mb-5"> <div class="card"> <a href="#"> <img class="card-img-top img-thumbnail" src="img/parallex2.jpg" alt="Blog 2"> </a> <div class="card-body px-0"> <a href="#"> <h5 class="card-title">How to use cards in Google Material Design</h5> <p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper, consectetur adipiscing elit.</p> </a> </div> </div> </div> <div class="col-md-6 mx-auto text-center mt-5"> <a href="#" class="btn btn-primary">More news from Slide</a> </div> </div> </div> </div> </div> </section>  <section class="bg-hero py-7" style="background-image: url(img/parallex2.jpg)"> <div class="container"> <div class="row"> <div class="col-md-7 mx-auto text-center"> <span class="text-uppercase text-white small-xl">Super Simple Page Builder</span> <h2 class="text-white mt-2">Ready to build your first website?</h2> <p class="text-white mb-5">Sign up now for Slide & save up to 50%.</p> <a href="#" class="btn btn-primary d-inline-flex flex-row align-items-center"> <em data-feather="twitter" width="20" height="20" class="mr-2"></em> Build your website </a> </div> </div> </div> </section>  <footer class="py-5 bg-light"> <div class="container"> <div class="row"> <div class="col-md-6 mx-auto text-center"> <ul class="list-inline"> <li class="list-inline-item"><a href="#">Privacy</a></li> <li class="list-inline-item"><a href="#">Terms</a></li> <li class="list-inline-item"><a href="#">Affiliates</a></li> <li class="list-inline-item"><a href="#">Support</a></li> <li class="list-inline-item"><a href="#">Blog</a></li> </ul> <p class="text-muted small text-uppercase mt-4"> Follow us on social media </p> <ul class="list-inline social social-inverse social-rounded social-sm"> <li class="list-inline-item"> <a href=""><i class="fa fa-facebook"></i></a> </li> <li class="list-inline-item"> <a href=""><i class="fa fa-twitter"></i></a> </li> <li class="list-inline-item"> <a href=""><i class="fa fa-google-plus"></i></a> </li> <li class="list-inline-item"> <a href=""><i class="fa fa-dribbble"></i></a> </li> </ul> </div> </div> <div class="row mt-5"> <div class="col-12 text-muted text-center small-xl">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://www.aspku.com/moban/">网页模板</a></div> </div> </div> </footer>  <div class="scroll-top"> <i class="fa fa-angle-up" aria-hidden="true"></i> </div>  <div class="switcher-wrap"> <div class="switcher-trigger"> <span class="fa fa-gear"></span> </div> <div class="color-switcher"> <h6>Color Switcher</h6> <ul class="mt-3 clearfix"> <li class="bg-orange active" data-color="default" title="Default Orange"></li> <li class="bg-blue" data-color="blue" title="Blue"></li> <li class="bg-red" data-color="red" title="Red"></li> <li class="bg-indigo" data-color="indigo" title="Indigo"></li> <li class="bg-green" data-color="green" title="Green"></li> <li class="bg-black" data-color="black" title="Black"></li> <li class="bg-teal" data-color="teal" title="Teal"></li> <li class="bg-cyan" data-color="cyan" title="Cyan"></li> <li class="bg-purple" data-color="purple" title="Purple"></li> <li class="bg-pink" data-color="pink" title="Pink"></li> </ul> <p>These are just demo colors. You can <b>easily</b> create your own color scheme.</p> </div> </div>  <script src="js/jquery-3.2.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/feather.min.js"></script> <script src="js/scripts.js"></script> </body> </html>

Processed: 0.012, SQL: 9