📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、🌐网站效果
- 五、🔧 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
一、👨🎓网站题目
🌲环境保护、🌳 保护地球、🌴 校园环保、🌵垃圾分类、🚵🏼绿色家园、等网站的设计与制作。
❤ 【作者主页——🔥获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】
二、✍️网站描述
⭐ 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△）
🏅 一套A+的网页应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 基地展示 > 樱桃种植基地_响应式绿化花木果苗类网站模板(自适应手机端) </title> <meta name="keywords" content="" /> <meta name="description" content="我社坚持以质量求生存！以技术求发展！以诚信求稳定！为客户提供优质售后服务是我们的承诺！我们坚持以质量为本、坚持重合同、守信用、优质服务。愿与国内各界歇诚合作，提供优质良种苗木，并提供接穗、嫁接、及售后服务。欢迎各界朋友来人来电咨询、考察、指导！共创双赢！" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"> <meta name="generator" content="" data-variable="/,cn,10001,,10001,res032"/> <link rel='stylesheet' href='css/index.css'> </head> <body class="met-navfixed"> <!--[if lte IE 8]> <div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100"> <p class="browserupgrade font-size-18"> 你正在使用一个 <strong> 过时 </strong> 的浏览器。请 <a href="#" target="_blank"> 升级您的浏览器 </a> ，以提高您的体验。 </p> </div> <![endif]--> <header id="header" class="header-fixed"> <div class="container"> <ul class="head-list"> <li class="left tel"> <img src="picture/1514354107.png" alt=""> <span> 全国咨询热线： </span> <em> 400-123-4567 </em> </li> <li class="right"> <ul> <li> <img src="picture/1514355047.png" alt="一流的服务"> <span> 一流的服务 </span> </li> <li> <img src="picture/1514354958.png" alt="透明的价格"> <span> 透明的价格 </span> </li> <li> <img src="picture/1514354817.png" alt="重信守誉"> <span> 重信守誉 </span> </li> <li> <img src="picture/1514354461.png" alt="优质的苗木"> <span> 优质的苗木 </span> </li> </ul> </li> </ul> </div> </header> <nav class="navbar navbar-default met-nav navbar-fixed-top" role="navigation"> <div class="container"> <div class="row"> <div class="navbar-header"> <button type="button" class="navbar-toggle hamburger hamburger-close collapsed" data-target="#navbar-default-collapse" data-toggle="collapse"> <span class="sr-only"> Toggle navigation </span> <span class="hamburger-bar"> </span> </button> <a href="#" class="navbar-brand navbar-logo vertical-align" title="响应式绿化花木果苗类织梦模板(自适应手机端)"> <h1 class='hide'> 响应式绿化花木果苗类织梦模板(自适应手机端) </h1> <div class="vertical-align-middle"> <img src="picture/logo.png" alt="响应式绿化花木果苗类织梦模板(自适应手机端)" title="响应式绿化花木果苗类织梦模板(自适应手机端)" /> </div> </a> <h2 class='hide'> </h2> </div> <div class="collapse navbar-collapse navbar-collapse-toolbar" id="navbar-default-collapse"> <ul class="nav navbar-nav navbar-right navlist"> <li> <a href="index.html" title="网站首页" class="link"> 网站首页 </a> </li> <li class="dropdown margin-left-20"> <a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" aria-expanded="false" href="about.html"> 关于我们 <span class="caret"> </span> </a> <ul class="dropdown-menu dropdown-menu-right bullet"> <li> <a href="about.html" class="" title="公司简介"> 公司简介 </a> </li> <li> <a href="message.html" class="" title="在线留言"> 在线留言 </a> </li> </ul> </li> <li class="dropdown margin-left-20"> <a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" aria-expanded="false" href="product.html"> 产品中心 <span class="caret"> </span> </a> <ul class="dropdown-menu dropdown-menu-right bullet"> <li> <a href="productcate.html" class="" title="果树苗"> 果树苗 </a> </li> <li> <a href="productcate.html" class="" title="绿化苗"> 绿化苗 </a> </li> <li> <a href="productcate.html" class="" title="松柏类"> 松柏类 </a> </li> <li> <a href="productcate.html" class="" title="灌木类"> 灌木类 </a> </li> </ul> </li> <li class="dropdown margin-left-20"> <a class="dropdown-toggle link active" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false" href="jidi.html"> 基地展示 <span class="caret"> </span> </a> <ul class="dropdown-menu dropdown-menu-right bullet"> <li> <a href="jidi.html" class="" title="樱桃种植基地"> 樱桃种植基地 </a> </li> <li> <a href="jidi.html" class="" title="猕猴桃种植基地"> 猕猴桃种植基地 </a> </li> <li> <a href="jidi.html" class="" title="云杉苗种植基地"> 云杉苗种植基地 </a> </li> </ul> </li> <li class="dropdown margin-left-20"> <a class=" link " href="honor.html"> 资质荣誉 </a> <ul class="dropdown-menu dropdown-menu-right bullet"> </ul> </li> <li class="dropdown margin-left-20"> <a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" aria-expanded="false" href="news.html"> 新闻中心 <span class="caret"> </span> </a> <ul class="dropdown-menu dropdown-menu-right bullet"> <li> <a href="news.html" class="" title="技术要领"> 技术要领 </a> </li> <li> <a href="news.html" class="" title="行业资讯"> 行业资讯 </a> </li> </ul> </li> <li class="dropdown margin-left-20"> <a class=" link " href="contact.html"> 联系我们 </a> <ul class="dropdown-menu dropdown-menu-right bullet"> </ul> </li> </ul> </div> </div> </div> </nav> <div class="met-banner banner-ny-h" data-height='' style=''> <div class="slick-slide"> </ul> </div> <div class="col-md-3 col-ms-12 col-xs-12 info masonry-item"> <em> <a href="#" title="400-123-4567" target='_self'> 全国咨询热线： </a> </em> <p> 400-123-4567 </p> </div> </div> </div> </div> <footer> <div class="container text-center"> <p> CopyRight © 2002-2018 某某苗木绿化有限公司 版权所有 </p> <p> ICP备XXXXXXXX号 </p> <div class="powered_by_metinfo"> 友情链接： <a href="http://www.17sucai.com/" target="_blank"> 网页模板 </a> </div> </div> </footer> <button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide"> <i class="icon wb-chevron-up" aria-hidden="true"> </i> </button> <script src="js/index.js"></script> </body> </html>
💒CSS样式代码
body { margin: 0 } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block } audio, canvas, progress, video { display: inline-block; vertical-align: baseline } audio:not([controls]) { display: none; height: 0 } [hidden], template { display:none } a { background-color: transparent } a:active, a:hover { outline: 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: 700 } dfn { font-style: italic } h1 { margin: .67em 0; font-size: 2em } mark { color: #000; background: #ff0 } small { font-size: 80% } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } img { border: 0 } svg:not(:root) { overflow: hidden } figure { margin: 1em 40px }
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
