web课程设计——健身俱乐部健身器材网站模板(24页)HTML+CSS+JavaScript

news2024/11/15 8:40:43

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货

一、👨‍🎓网站题目

🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。

二、✍️网站描述

🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码

<!DOCTYPE html><html lang="zxx"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>FIYN - Gym Fitness Club HTML Template</title><link rel="preconnect" href="https://fonts.gstatic.com"><link href="css/909c4c18a9024f9e96f4ff7f25d614f5.css" rel="stylesheet"><link rel="shortcut icon" href="assets/img/favicon.png" type="image/png"><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/mmenu.css" rel="stylesheet"><link href="css/mmenu-all.css" rel="stylesheet"><link href="css/line-awesome.min.css" rel="stylesheet"><link href="css/flaticon.css" rel="stylesheet"><link href="css/animate.min.css" rel="stylesheet"><link href="css/owl.carousel.css" rel="stylesheet"><link href="css/magnific-popup.css" rel="stylesheet"><link href="css/swiper-min.css" rel="stylesheet"><link href="css/nice-select.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"></head><body><div class="proloader"><div class="loader_34"><img src="picture/preloader.gif" alt="Image"></div></div><div class="page-wrapper"><header class="header-wrap v1"><div class="container"><div class="row align-items-center"><div class="col-lg-1 col-md-4  col-5 mpx-0"><div class="logo v1"><a href="index.html"><img src="picture/logo.png" alt="Image"><span>FIYN</span></a></div></div><div class="col-lg-11 col-md-8 col-7"><div class="header-top"><div class="row align-items-center"><div class="col-lg-5  md-none"><p class="mb-0">New Membership Deals Going On!Join Now For $0 Initiation. </p></div><div class="col-lg-7"><div class="header-top-right"><div class="close-header-top"><button type="button"><i class="las la-times"></i></button></div><div class="header-top-contact"><p><i class="flaticon-placeholder"></i>Address:123 Western Road,LA.</p><a href="tel:2132008224"><i class="flaticon-phone-call"></i>213-200-8224</a></div><div class="lang_selctor"><i class="las la-globe"></i><select><option value="1">English</option><option value="2">French</option><option value="3">Arabic</option></select></div><div class="header_btn xl-none"><a href="#" class="btn v1">Make A Visit</a></div></div></div></div></div><div class="header-bottom"><div class="row align-items-center"><div class="col-lg-9 col-md-2 col-3 order-lg-1 order-md-2 order-2"><nav id="menu" class="main-menu  text-center"><ul><li class="has-child"><a href="#">Home</a><ul class="dropdown"><li><a href="index.html">Home One</a></li><li><a href="index-2.html">Home Two </a></li><li><a href="index-3.html">Home Three</a></li></ul></li><li><a href="about.html">About </a></li><li class="has-child"><a href="#">Classes</a><ul class="dropdown"><li><a href="class.html">Class</a></li><li><a href="class-details.html">Class Details</a></li><li><a href="time-table.html">Time-table</a></li><li><a href="bmi-calculator.html">BMI Calculator</a></li></ul></li><li class="has-child"><a href="#">Blog</a><ul class="dropdown"><li class="has-child"><a href="blog.html">Blog</a><ul class="dropdown"><li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li><li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li><li><a href="blog.html">Blog No Sidebar</a></li></ul></li><li class="has-child"><a href="blog-details-left-sidebar.html">Blog Details</a><ul class="dropdown"><li><a href="blog-details-right-sidebar.html">Blog Details Right Sidebar</a></li><li><a href="blog-details-left-sidebar.html">Blog Details Left Sidebar</a></li><li><a href="blog-details-no-sidebar.html">Blog Details No Sidebar</a></li></ul></li></ul></li><li class="has-child"><a class="active" href="#">Shop</a><ul class="dropdown"><li class="has-child"><a href="shop.html">Shop</a><ul class="dropdown"><li><a href="shop.html">Shop 3 Column</a></li><li><a href="shop-4-column.html">Shop 4 Column</a></li></ul></li><li><a href="shop-details.html">Shop Details</a></li><li><a class="active" href="cart.html">Cart</a></li><li><a href="checkout.html">Checkout</a></li><li><a href="wishlist.html">Wishlist</a></li></ul></li><li class="has-child"><a href="#">Pages</a><ul class="dropdown"><li><a href="privacy-policy.html">Privacy Policy</a></li><li><a href="faq.html">FAQ</a></li><li><a href="terms-condition.html">Terms &amp;Conditions</a></li><li><a href="404.html">404</a></li></ul></li><li><a href="contact.html">Contact Us</a></li></ul></nav><div class="mobile-menu"><a href='#menu'><i class="las la-bars"></i></a></div></div><div class="col-lg-3 col-md-10 col-9 order-lg-2 order-md-1 order-1"><div class="header-bottom-right"><div class="mobile-top-bar xl-none"><i class="las la-sliders-h"></i></div><div class="shopcart"><i class="flaticon-shopping-bags"></i><span class="cart-amt">3</span></div><div class="header-btn md-none"><a href="class.html" class="btn v1">Make A Visit</a></div></div></div></div></div></div></div></div></header><div class="cart-popup"><div class="cart-popup-title"><h2>Cart(4)</h2><button type="button" class="close-popup"><i class="las la-times"></i></button></div><div class="cart-popup-item-wrap"><div class="cart-popup-item"><div class="cart-popup-item-img"><img src="picture/cart-thumb-1.png" alt="Image"></div><div class="cart-popup-item-name"><p>Gym Equipment Dumbbells</p><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div></div><div class="cart-popup-item-price"><button type="button"><i class="las la-times"></i></button><span>$148.00</span></div></div><div class="cart-popup-item"><div class="cart-popup-item-img"><img src="picture/cart-thumb-2.png" alt="Image"></div><div class="cart-popup-item-name"><p>Gym Equipment Dumbbells</p><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div></div><div class="cart-popup-item-price"><button type="button"><i class="las la-times"></i></button><span>$148.00</span></div></div><div class="cart-popup-item"><div class="cart-popup-item-img"><img src="picture/cart-thumb-3.png" alt="Image"></div><div class="cart-popup-item-name"><p>Gym Equipment Dumbbells</p><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div></div><div class="cart-popup-item-price"><button type="button"><i class="las la-times"></i></button><span>$148.00</span></div></div><div class="cart-popup-item"><div class="cart-popup-item-img"><img src="picture/cart-thumb-4.png" alt="Image"></div><div class="cart-popup-item-name"><p>Gym Equipment Dumbbells</p><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div></div><div class="cart-popup-item-price"><button type="button"><i class="las la-times"></i></button><span>$148.00</span></div></div></div><div class="cart-popup-total-wrap"><div class="cart-popup-total"><h5>TOTAL</h5><h5>$444.00</h5></div><a href="shop.html" class="btn v2">Continue Shopping</a><a href="checkout.html" class="btn v1">Check Out</a></div></div><section class="breadcrumb-wrap bg-f br-bg-3"><div class="section_subtext v3 trans_text"><span>Buy Our Product</span></div><div class="overlay bg-charcole op-2"></div><div class="breadcrumb-title"><h2>Find <span>Product</span></h2><div class="newsletter-wrap search-product"><div class="form-group"><input type="text" placeholder="Search by Product name"><button type="submit" class="submit-btn"><span>Search</span><i class="flaticon-search-interface-symbol"></i></button></div></div></div></section><section class="wishlist-wrap "><div class="container"><div class="row"><div class="col-md-12"><div class="wishlist-table "><table class="table"><thead><tr><th scope="col">Items</th><th scope="col">Unit Price</th><th scope="col">Qunatity</th><th scope="col">Total</th><th scope="col">Remove</th></tr></thead><tbody><tr><td><div class="wh_item"><img src="picture/cart-thumb-1.png" alt="Image"><a href="shop-details.html">Gym equipment dumbells</a></div></td><td><p class="wh-tem-price">$148.00</p></td><td><div class="wh_qty"><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div></div></td><td><p class="wh-tem-price text-red">$148.00</p></td><td><button type="button"><i class="las la-trash-alt"></i></button></td></tr><tr><td><div class="wh_item"><img src="picture/cart-thumb-2.png" alt="Image"><a href="shop-details.html">Gym equipment dumbells</a></div></td><td><p class="wh-tem-price">$148.00</p></td><td><div class="wh_qty"><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div></div></td><td><p class="wh-tem-price text-red">$148.00</p></td><td><button type="button"><i class="las la-trash-alt"></i></button></td></tr><tr><td><div class="wh_item"><img src="picture/cart-thumb-3.png" alt="Image"><a href="shop-details.html">Gym equipment dumbells</a></div></td><td><p class="wh-tem-price">$148.00</p></td><td><div class="wh_qty"><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div></div></td><td><p class="wh-tem-price text-red">$148.00</p></td><td><button type="button"><i class="las la-trash-alt"></i></button></td></tr><tr><td><div class="wh_item"><img src="picture/cart-thumb-4.png" alt="Image"><a href="shop-details.html">Gym equipment dumbells</a></div></td><td><p class="wh-tem-price">$148.00</p></td><td><div class="wh_qty"><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div></div></td><td><p class="wh-tem-price text-red">$148.00</p></td><td><button type="button"><i class="las la-trash-alt"></i></button></td></tr></tbody></table></div></div><div class="col-md-12"><div class="wh_btn"><a href="checkout.html" class="btn v14">Check Out</a><a href="checkout.html" class="btn v13">Back To Shop</a></div></div></div></div></section><section class="product-wrap  v1 section-padding_v2"><div class="container"><div class="row align-items-center mb-5"><div class="col-md-6"><div class="section-title v1"><h2>Feature Products</h2></div></div><div class="col-md-6 sm-none"><div class="text-md-end"><a href="#" class="btn v3">View All</a></div></div></div><div class="row"><div class="col-md-12"><div class="product-slider-v1 owl-carousel"><div class="item"><div class="single-product-item"><div class="product-img"><img class="img-fluid" src="picture/product-1.jpg" alt="Image"><span class="product-price">$51.00 </span></div><div class="product-info"><ul class="product-rating"><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star-1"></i></li></ul><a href="#" class="product-name">Protein's Athletic 101</a>
</div>
</div>
</div>
<div class="item">
<div class="single-product-item">
<div class="product-img">
<img class="img-fluid" src="picture/product-2.jpg" alt="Image">
<span class="product-price">
$51.00
</span>
</div>
<div class="product-info">
<ul class="product-rating">
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star"></i></li>
 <li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star-1"></i></li>
</ul>
<a href="#" class="product-name">Protein's Athletic 101</a></div></div></div><div class="item"><div class="single-product-item"><div class="product-img"><img class="img-fluid" src="picture/product-3.jpg" alt="Image"><span class="product-price">$51.00 </span></div><div class="product-info"><ul class="product-rating"><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star-1"></i></li></ul><a href="#" class="product-name">Protein's Athletic 101</a>
</div>
</div>
</div>
<div class="item">
<div class="single-product-item">
<div class="product-img">
<img class="img-fluid" src="picture/product-1.jpg" alt="Image">
<span class="product-price">
$51.00
</span>
</div>
<div class="product-info">
<ul class="product-rating">
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star-1"></i></li>
</ul>
<a href="#" class="product-name">Protein's Athletic 101</a></div></div></div><div class="item"><div class="single-product-item"><div class="product-img"><img class="img-fluid" src="picture/product-2.jpg" alt="Image"><span class="product-price">$51.00 </span></div><div class="product-info"><ul class="product-rating"><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star-1"></i></li></ul><a href="#" class="product-name">Protein's Athletic 101</a>
</div>
</div>
</div>
<div class="item">
<div class="single-product-item">
<div class="product-img">
<img class="img-fluid" src="picture/product-3.jpg" alt="Image">
<span class="product-price">
$51.00
</span>
</div>
<div class="product-info">
<ul class="product-rating">
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star"></i></li>
<li><i class="flaticon-star-1"></i></li>
</ul>
<a href="#" class="product-name">Protein's Athletic 101</a></div></div></div></div></div></div></div></section><footer class="footer-wrap v1"><div class="footer-top"><div class="container"><div class="row"><div class="col-xl-3 col-lg-3 col-md-6 col-12"><div class="footer-widget"><div class="footer-widget-title"><h5>Get In Touch</h5></div><div class="comp-text"><p>Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor Invidunt.</p></div><div class="comp-address-wrap"><div class="com-address-item"><div class="com-address-icon"><i class="las la-envelope"></i></div><div class="comp-address-info"><p>Email Address:</p><a href="/cdn-cgi/l/email-protection#5726223e343c2422272738252317313e2e397934383a"><span class="__cf_email__" data-cfemail="ef9e9a868c849c9a9f9f809d9baf89869681c18c8082">[email&#160;protected]</span></a></div></div><div class="com-address-item"><div class="com-address-icon"><i class="las la-phone"></i></div><div class="comp-address-info"><p>Contact Number:</p><a href="tel:2132008224">213-200-8224</a>,<a href="tel:2132008224">213-200-8224</a></div></div></div><div class="social-profile"><ul><li><a target="_blank" href="https://www.facebook.com/"><i class="lab la-facebook-f"></i></a></li><li><a target="_blank" href="https://www.linkedin.com"><i class="lab la-linkedin-in"></i></a></li><li><a target="_blank" href="https://twitter.com"><i class="lab la-twitter"></i></a></li><li><a target="_blank" href="https://instagram.com"><i class="lab la-instagram"></i></a></li></ul></div></div></div><div class="col-xl-2 col-lg-2 col-md-6 col-12"><div class="footer-widget"><div class="footer-widget-title"><h5>Useful Links</h5></div><div class="footer-menu"><ul><li><a class="link v3" href="about.html">About Us</a></li><li><a class="link v3" href="blog.html">Blogs</a></li><li><a class="link v3" href="shop.html">Shop</a></li><li><a class="link v3" href="cart.html">Cart</a></li><li><a class="link v3" href="wishlist.html">Wishlist</a></li><li><a class="link v3" href="class.html">Cardio Classes</a></li><li><a class="link v3" href="class-details.html">Lifting Weight</a></li></ul></div></div></div><div class="col-xl-3 col-lg-3 col-md-6 col-12"><div class="footer-widget"><div class="footer-widget-title"><h5>Instagram Photo</h5></div><div class="instagram-photo-wrap"><a href="https://instagram.com" target="_blank" class="instagram-photo"><img class="img-fluid" src="picture/instagram-1.jpg" alt="Image"></a><a href="https://www.instagram.com/" target="_blank" class="instagram-photo"><img class="img-fluid" src="picture/instagram-6.jpg" alt="Image"></a><a href="https://www.instagram.com/" target="_blank" class="instagram-photo"><img class="img-fluid" src="picture/instagram-5.jpg" alt="Image"></a><a href="https://www.instagram.com/" target="_blank" class="instagram-photo"><img class="img-fluid" src="picture/instagram-2.jpg" alt="Image"></a><a href="https://www.instagram.com/" target="_blank" class="instagram-photo"><img class="img-fluid" src="picture/instagram-3.jpg" alt="Image"></a><a href="https://www.instagram.com/" target="_blank" class="instagram-photo"><img class="img-fluid" src="picture/instagram-6.jpg" alt="Image"></a></div></div></div><div class="col-xl-4 col-lg-4 col-md-6 col-12"><div class="footer-widget"><div class="footer-widget-title"><h5>Contact Us</h5></div><div class="comp-location-wrap row"><div class="col-lg-6"><div class="comp-location"><div class="loc-icon"><i class="flaticon-placeholder"></i></div><h6>New York </h6><span>8584 North Homestead Court Brooklyn</span><p>Phone:<a href="tel:2132008224">213-200-8224</a></p></div></div><div class="col-lg-6"><div class="comp-location"><div class="loc-icon"><i class="flaticon-placeholder"></i></div><h6>KINGSTON</h6><span>90 School Lane KINGSTON UPON THAMES KT96 4GR</span><p>Phone:<a href="tel:2132008224">213-200-8224</a></p></div></div><div class="col-lg-12"><div class="newsletter-wrap"><div class="form-group"><input type="text" placeholder="Please Your Email Address"><button type="submit" class="submit-btn"><span>Subscribe</span><i class="flaticon-paper-plane"></i></button></div></div></div></div></div></div></div></div></div><div class="footer-bottom"><div class="container"><div class="row"><div class="col-md-12"><div class="copyright-text"><p>Copyright <span class="las la-copyright"></span>2021. All Right Reserved. Product By <a href="http://www.bootstrapmb.com">Hibootstrap</a>.</p></div></div></div></div></div></footer><div class="modal fade" id="productModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-xl  modal-dialog-centered"><div class="modal-content"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button><div class="modal-body"><div class="product-details-wrap"><div class="container"><div class="row gx-5"><div class="col-lg-5"><div class="product-modal-item"><img src="picture/product-2.jpg" alt="Image"></div></div><div class="col-lg-7"><div class="single-product-details"><div class="single-product-title v2"><h2>Protein's Athletic</h2><h3>Price:$300</h3></div><div class="single-product-desc"><p>Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. </p></div><div class="single-product-review"><div class="single-product-review-left"><ul class="product-rating"><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star"></i></li><li><i class="flaticon-star-1"></i></li></ul><span>(36)</span></div></div><div class="single-product-option"><div class="product-quantity"><div class="qtySelector"><span class="las la-minus decreaseQty"></span><input type="text" class="qtyValue" value="1" /><span class="las la-plus increaseQty"></span></div></div><div class="add-cart"><button type="button" class="btn v7"><i class="flaticon-shopping-bags"></i>Add To Cart</button></div><div class="add-wishlist"><button type="submit" class="btn v3">Add To Wishlist</button></div></div></div></div></div></div></div></div></div></div></div></div><a href="#" class="back-to-top bounce"><i class="las la-arrow-up"></i></a><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script src="js/bootstrap-validator.js"></script><script src="js/form-validation.js"></script><script src="js/mmenu.js"></script><script src="js/owl.carousel.js"></script><script src="js/swiper-min.js"></script><script src="js/jquery-magnific-popup.js"></script><script src="js/comparison-slider.js"></script><script src="js/jquery-nice-select.js"></script><script src="js/main.js"></script></body></html>

💒CSS样式代码

/*--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
body{
	background:#f8f8f8;
	font-family: 'Open Sans', sans-serif;
}
body a{
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
/*----*/
.header-top{
	background:#b2ce22;
	padding: 0.5em 0;
}
 ul{
	padding: 0;
	margin: 0;
}
p.header-para{
	float:left;
	margin:0;
	font-size:1.2em;
	color:#fff;
	text-transform:uppercase;
	font-weight: 400;
}
 ul.sign{
	float:right;
}
 ul.sign li{
	display: inline-block;
	padding: 0;
}
ul.sign li a{
	font-size: 1.2em;
	text-decoration: none;
	color:#fff;
	font-weight: 600;
}
 ul.sign li span{
	background: url(../images/img-sprite.png) -5px -13px;
	width: 22px;
	height: 14px;
	display: inline-block;
}
.header-bottom-top{
	background:#1c1d24;
}
.logo{
	float: left;
	margin-top: 0em;
}
.top-nav{
	float:right;
}
.top-nav ul li{
	display: inline-block;
	padding:2em 1em;
}
.top-nav ul li a{
	font-size: 1.1em;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
}
.top-nav ul li a:hover,.top-nav ul li.active a{
	color:#b2ce22;
}
.top-nav span.menu:before{
	content: url(../images/menu.png)no-repeat 0px 0px;
	cursor:pointer;	
	width:100%;
}
.top-nav span.menu{
	display: none;
}
/*--responsive media-quries--*/
@media(max-width:768px){
.top-nav ul{
	display: none;
	position:absolute;
	width:100%;
	z-index: 9999;
	left: 0%;
	margin: 0em 0em;
	background:#b2ce22;
}
.top-nav span.menu{
	display: block;
	width:100%;
	position:relative;
	text-align: right;
	padding: 1.3em 0 0;
}
.top-nav ul li{
	display: block;
	float:none;
	padding: 0.8em 0;
	text-align: center;
}
.top-nav ul li a,.top-nav ul li.active a{
	color:#fff;
	border: none;
	padding: 0;
}
.top-nav ul li a:hover,.top-nav ul li.active a:hover{
	color:#000;
	border: none;
}
}

}
.service-grid {
	padding: 0em 0;
}
ul.service-list li {
	width: 38%;
}
.service-left h6 {
	font-size: 1.5em;
}
.services {
	padding: 1em 0px 2em;
}
.content-bottom span.matter-in {
	background-size: 470px;
	width: 473px;
	height: 179px;
}
.let-your h3, .our-grid h3 {
	font-size: 3.1em;
}
.let-your p {
	font-size: 1em;
}
.let-your {
	padding: 0 0 3em;
}
.the-do h6 {
	font-size: 1.3em;
}
.nav-top ul li {
	padding: 0.5em;
}
.nav-top,.footer-grid {
	float: none;
}
.content-slow {
	padding: 1em 0;
}
ul.sign-in li {
	font-size: 1.2em;
}
.content-top {
	padding: 2em 0 0em;
}
.subject input[type="text"], .send-contact textarea{
	width:96%;
}
.map iframe {
	width: 560px;
}
.register {
	width: 70%;
}
.footer {
	text-align: center;
}
}
@media(max-width:480px){
ul.sign li a {
	font-size: 1em;
}
p.header-para {
	font-size: 1em;
}
.banner span.matter {
	background-size: 332px;
	width: 334px;
	height: 133px;
}
.content-app h3, .content-app-up h3, .service-top h3 {
	font-size: 2em;
}

.content-app {
padding: 1em 0 0em;
}
.content-from p {
font-size: 0.9em;
}
.regard-in p {
	font-size: 
	font-size: 1.1em;
	width:41%;
}
.map iframe {
width: 240px;
height:200px;
}
.contact-left input[type="text"], .subject input[type="text"] {
padding: 0.8em;
}
.register {
width: 100%;
padding:1.5em 0;
}
.register-top-grid h3 {
font-size: 1.2em;
}
.top-nav ul li {
padding: 0.6em 0;
}
.content-slow {
padding: 0em 0 1em;
}
.slow-left{
display:none;
}
.gallery-grids-row1 {
	padding: 0.5em 0;
}
}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/71373.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

解析Vue项目每一个文件夹及文件的作用

解析Vue项目每一个文件夹及文件的作用

使用vue-cli2.x脚手架为每个vue项目创建脚手架项目结构&#xff0c;项目结构目录中每个文件夹介绍如下&#xff1a; 1、build 文件夹 里面是对 webpack 开发和打包的相关设置&#xff0c;包括入口文件&#xff0c;输出文件&#xff0c;使用的模块等。 1.1 webpack.base.conf.j…
阅读更多...
人大金仓 +用友：助力企业数智化转型，实现高质量发展

人大金仓 +用友：助力企业数智化转型，实现高质量发展

金兰组织联合解决方案集数字化浪潮下&#xff0c;联合解决方案已经成为这个时代的必然选择。如何依托各自产品的功能与特点&#xff0c;持续优化和完善解决方案能力&#xff0c;满足客户更多、更复杂的业务诉求&#xff0c;成为数字服务厂商的重要工作内容。为此&#xff0c;金…
阅读更多...
我的电脑图标没了怎么办？3个方法找回消失的图标

我的电脑图标没了怎么办？3个方法找回消失的图标

最近&#xff0c;很多小伙伴都在私信小编&#xff0c;说他们的电脑桌面图标不见了。我的电脑图标没了怎么办&#xff1f;别担心。图标突然消失了&#xff0c;很可能是你不小心隐藏了桌面图标。这里有3个方法可以帮助你快速恢复并找到电脑图标&#xff0c;一起来看看吧&#xff…
阅读更多...
现代基准测试程序种类以及使用方法

现代基准测试程序种类以及使用方法

文章目录基准测试程序种类常见测试程序概述常见测试程序使用Dhrystone的使用UnixBench的使用CPU-Z的安装与使用参考文献现代计算机的性能测量极大地依赖于在其上运行的工作负载&#xff0c;为了测量和分析计算机系统的性能人们常常选择或构造一组能反映其工作负载特征的程序&am…
阅读更多...
python文件转换成exe可执行的windows文件

python文件转换成exe可执行的windows文件

一、介绍 python的程序需要运行环境有时候很不方便&#xff0c;因为要交给别人代码可能因为环境的原因运行各种问题&#xff0c;这里给出直接讲python程序转换成exe文件&#xff0c;很方便直接给执行程序就可以&#xff0c;也不用担心运行环境问题而运行不了 二、工具 1、安装…
阅读更多...
[奶奶看了都会]ChatGPT保姆级注册教程

[奶奶看了都会]ChatGPT保姆级注册教程

大家好&#xff0c;我是小卷 最近几天OpenAI发布的ChatGPT聊天机器人火出天际了&#xff0c;连着上了各个平台的热搜榜。这个聊天机器人最大的特点是模仿人类说话风格同时回答大量问题。 有人说ChatGPT是真正的人工智能&#xff0c;它不仅能和你聊天&#xff0c;还是写小作文…
阅读更多...
[附源码]Python计算机毕业设计SSM基于微信平台的匿名电子投票系统（程序+LW)

[附源码]Python计算机毕业设计SSM基于微信平台的匿名电子投票系统（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
web课程设计网页规划与设计 HTML+CSS+JavaScript仿英雄联盟LOL首页(1个页面)

web课程设计网页规划与设计 HTML+CSS+JavaScript仿英雄联盟LOL首页(1个页面)

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…
阅读更多...
第4季4：图像sensor的驱动源码解析

第4季4：图像sensor的驱动源码解析

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、sensor驱动源码的框架 mpp定义了一整套sensor驱动的实现和封装&#xff0c;这里以ar0130型号的sensor为例进行说明。 1、sensor层驱动 &#xff08;1&#xff09;sensor层驱动位于mpp/componen…
阅读更多...
Java基础面试题

Java基础面试题

请介绍全局变量和局部变量的区别 Java中的变量分为成员变量和局部变量&#xff0c;它们的区别如下&#xff1a; 成员变量&#xff1a; 成员变量是在类的范围里定义的变量&#xff1b;成员变量有默认初始值&#xff1b;未被static修饰的成员变量也叫实例变量&#xff0c;它存储于…
阅读更多...
知识图谱-KGE-语义匹配-双线性模型-2019：TuckER

知识图谱-KGE-语义匹配-双线性模型-2019：TuckER

【paper】 TuckER: Tensor Factorization for Knowledge Graph Completion【简介】 这篇文章是英国爱丁堡大学的研究者发表于 ICML 2019 上的文章&#xff0c;提出了 TuckER&#xff0c;是一个线性的张量分解模型&#xff0c;对表示三元组事实的二值张量做 Tucker 分解。 背景…
阅读更多...
python中nmupy获取本地数据和索引

python中nmupy获取本地数据和索引

1. numpy读取数据 可以使用numpy中的loadtxt进行数据读取&#xff0c;所包含的参数如下 参数名解释frame文件&#xff0c;字符串等也可以是.gz或bz2压缩文件dtype数据类型&#xff0c;即CSV中字符串以什么数据类型读入数组中&#xff0c;默认是np.floatdelimiter分隔字符串&a…
阅读更多...
CAS:2379387-10-5；TPE-丙烯酰胺；AIE聚集诱导发光

CAS:2379387-10-5；TPE-丙烯酰胺；AIE聚集诱导发光

英文名称:2-Propenamide,N-[4-(1,2,2-triphenylethenyl)phenyl]- 英文同义词:2-Propenamide,N-[4-(1,2,2-triphenylethenyl)phenyl]- CAS号:2379387-10-5 分子式:C29H23NO 分子量:401.5 结构式&#xff1a; AIE聚集诱导发光材料的特点&#xff1a; 1.在固态下有强发光特性&…
阅读更多...
Typecho-handsome主题如何统计全站字数

Typecho-handsome主题如何统计全站字数

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后…
阅读更多...
phpstudy2020安装及简单使用教程

phpstudy2020安装及简单使用教程

phpstudyV8.0以上使用教程 简介安装步骤配置搭建网站自己的第一个PHP程序 最新版长这样 简介 按我的理解&#xff0c;phpstudy是一个集成式的PHP运行环境&#xff0c;虽然是个软件&#xff0c;但他实现的功能就是给PHP语言编写的脚本赋予一个可执行的环境&#xff0c;可以…
阅读更多...
GPR(高斯过程回归)

GPR(高斯过程回归)

写在前面&#xff1a;   本文为科研理论笔记的第三篇&#xff0c;其余笔记目录传送门&#xff1a; 理论笔记专栏目录 介绍结束下面开始进入正题&#xff1a; 1 高斯分布 ​   一元高斯分布的概率密度函数为&#xff1a; p(x)1σ2πexp⁡(−(x−μ)22σ2);简写为&#xff…
阅读更多...
Lecture2：损失函数及优化

Lecture2：损失函数及优化

目录 1.损失函数 1.1 支持向量机SVM 1.1.1 SVM的代价函数及优化目标 1.1.2 如何理解将SVM成为大间距分类器 1.1.3 大间距分类器的数学原理 1.1.4 SVM核函数&#xff08;构建非线性分类器&#xff09; 及控制点的选择 1.1.5 构建自己的SVM 1.2 softmax分类器 1.3 soft…
阅读更多...
06-07-08 - 突破512字节的限制

06-07-08 - 突破512字节的限制

---- 整理自狄泰软件唐佐林老师课程 1. 突破限制的准备工作 辅助函数 字符串打印软盘读取内存比较根目录区查找 1.1 字符串打印 问题&#xff1a; 主引导程序中如何进行字符串的打印&#xff1f; 1.1.1 BIOS中的字符串打印 指定打印参数&#xff08;AX 0x1301&#xff0…
阅读更多...
Web大学生网页作业成品：个人博客主页 (纯HTML+CSS代码)

Web大学生网页作业成品：个人博客主页 (纯HTML+CSS代码)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
HUST编译原理实验2

HUST编译原理实验2

语法分析&#xff0c;建立并显示语法树 以识别 a 10.01; 为例&#xff0c;阐述语法分析的构造过程 1. 建立AST储存结构 由a 10.01得知&#xff0c;语法构成为: SentenceList->Sentence->Exp SEMI->ID ASSIGNOP FLOAT SEMI因此&#xff0c;需要储存结构如下 typ…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023