-
环境主题静态HTML网页作业作品 大学生环保网页设计制作成品 简单DIV CSS布局网站
🎀 精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
一、👨🎓网站题目
🌲环境保护、🌳 保护地球、🌴 校园环保、🌵垃圾分类、🚵🏼绿色家园、等网站的设计与制作。
二、✍️网站描述
⭐ 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" /> <title>ofotitle> head> <body> <embed src="music/music.mp3" width="0" height="0">embed> <div class="con"> <div class="head"> <div class="logo"> <h1>ofo 小黄单车h1> div> <div class="nav"> <ul> <li> <a href="index.htm">首页a>li> <li> <a href="page1.htm">大事记a> li> <li><a href="page2.htm">历史发展a>li> <li><a href="page3.htm">关于我们a>li> <li><a href="dl.htm">登录a>li> ul> div> <div class="clear">div> div> <div class="clear">div> <div class="lunbo"><a href="#"><img src="images/d1.jpg" width="1024"/>a>div> <div class="clear">div> <div class="main"> <dl> <dd> <h1>小黄车h1> dd> <dt> dt> dl> <div label-module="lemmaSummary"> <div label-module="para"> <div label-module="para">ofo 小黄车是一个无桩共享单车出行平台，缔造了“无桩单车共享”模式，致力于解决城市出行问题。用户只需在微信服务号或App输入车牌号，即可获得密码解锁用车，随取随用，随时随地，也可以共享自己的单车到 ofo 共享平台，获得所有 ofo 小黄车的终身免费使用权，以1换N。[1-2]<a name="ref_[1-2]_20068457" id="ref_[1-2]_20068457"> a>div> <div label-module="para">2015年6月启动以来，ofo已经连接超过500万辆共享单车，提供上亿次共享单车出行服务，为全球4个国家100座城市用户提供便捷的出行服务[3-4]<a name="ref_[3-4]_20068457" id="ref_[3-4]_20068457"> a>div> <div label-module="para">ofo 的理念是，“骑时可以更轻松”。在未来ofo希望不生产自行车，只连接自行车，让人们在全世界的每一个角落都可以通过 ofo 解锁自行车，满足短途代步的需求。[5]<a name="ref_[5]_20068457" id="ref_[5]_20068457"> a>div> <div label-module="para">ofo 同样以开放平台和共享精神，欢迎用户共享自己的单车加入 ofo，以共享经济的互联网创新模式调动城市单车存量市场，提高自行车使用效率，为城市节约更多空间。ofo倡导文明用车，通过技术手段引导用户规范使用ofo共享单车，与市民和政府协同优化共享单车出行解决方案，让城市更美好。div> div> div> <h2>小黄车h2> <div class="main_list"> <ul> <li><a href="#"><img src="images/q1.jpg" />a>li> <li><a href="#"><img src="images/q2.jpg" />a>li> <li><a href="#"><img src="images/q3.jpg" />a>li> <li><a href="#"><img src="images/q4.jpg" />a>li> <li><a href="#"><img src="images/q5.jpg" />a>li> <li><a href="#"><img src="images/q6.jpg" />a>li> <li><a href="#"><img src="images/q7.jpg" />a>li> <li><a href="#"><img src="images/q8.jpg" />a>li> <li><a href="#"><img src="images/q9.jpg" />a>li> <li><a href="#"><img src="images/q10.jpg" />a>li> ul> div> div> <div class="clear">div> <div class="foot"> <p>小黄车p> <p>All Rights Reservedp> div> <div class="clear">div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
💒CSS样式代码
/*----------------------common-------------------------*/ *{ margin:0; padding:0; font-family:Microsoft YaHei;} .clear{ clear:both;} .fl{ float:left;} .fr{ float:right;} img{ border:none;} a{ text-decoration:none; color: #000; } a:hover{ text-decoration:underline; color: #000; } li{ list-style-type:none; color: #000; } .ofh{overflow:hidden;} .center{ text-align:center;} .em{ text-indent:2em;} .p5{ padding:5px;} .pl50{ padding-left:50px;} body{ background-attachment: fixed; background-color: #000; background-image: url(../images/bj.jpg); background-repeat: repeat; background-position: center top; } /*----------------------con-------------------------*/ .con{ width:960px; padding:20px; height:auto; margin:10px auto; background:#fff; background-color:rgba(255,255,255,0.8);-moz-border-radius:10px;border-radius:10px;} /*----------------head-----------------*/ .head{ width:960px; height:auto; margin:auto;} .logo{ width:550px; height:60px;} .logo h1{ font-size:36px; line-height:60px; color:#300; font-family:黑体;} .nav{ width: 960px; height: 40px; margin: 5px auto; background-color: #FF0; -moz-border-radius: 5px; border-radius: 5px; } .nav ul{ padding-left:10px;} .nav li{ float:left; padding:5px 20px; } .nav li a{ font-size:20px; line-height:30px; color:#000; } .nav li a:hover{ color:#303538; text-decoration:none; } .nav li:hover{ background-color:#f97255} .nav li:hover a{ color:#000; } .lunbo{ width:960px; height:350px; margin:5px auto; overflow:hidden;-moz-border-radius:5px;border-radius:5px;} /*----------------main-----------------*/ .main{ width:960px; height:auto; margin:10px auto; font-size:14px; line-height:24px; color:#555;} .main h2{font-size:18px; line-height:46px; color:#333;} .main p{font-size:14px; line-height:24px; color:#555; text-indent:2em;} .main_list{ width:960px; height:auto; } .main_list li{ width:150px;height:100px; float:left; margin:3px; border:2px solid #fff;} .main_list li:hover{border:2px solid #ffca2c;} .main_list li img{ width:150px; height:100px; } /*----------------foot-----------------*/ .foot{ width:960px; height:50px; margin:10px auto; padding-top:10px; border-top:3px solid #600; text-align:center; font-size:14px; line-height:24px; color:#666;} .foot{ font-size: 14px; line-height: 24px; color: #CCC; } .con .main p img { float: right; } .con .main ul li { float: left; list-style-type: none; padding-left: 10px; } .con .main span { width: 300px; height: 200px; display: block; float: left; padding-left: 10px; padding-right: 5px; line-height: 30px; } .con .main ul li { float: left; height: auto; width: 137px; padding-left: 20px; } .con .main ul li p { font-size: 12px; color: #000; } .me1 { width: 300px; height: 40px; margin-right: auto; margin-left: auto; background-color: #F00; } .con .main .me { height: 500px; width: 600px; margin-right: auto; margin-left: auto; padding-top: 60px; } .con .left { float: left; width: 150px; height: 800px; border: 1px solid #000; } .con .main1 { float: left; height: 800px; width: 780px; font-size: 14px; padding-left: 20px; } .con .left ul { width: 180px; margin-right: auto; margin-left: auto; padding-top: 40px; } .con .left ul li { height: 50px; padding-left: 30px; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
-
相关阅读:
力扣2861 补9.21
洛谷P2257 莫比乌斯反演+线性筛
新兴网络安全威胁：数字防御新格局
项目交互-选择器交互
R语言数学建模（一）—— 基础知识
HTML文件跳转不了Java文件
uniapp开发小程序，包过大解决方案
机器学习中的集成学习算法和K-近邻算法及其优缺点
spring是如何解决循环依赖的？
【02】Spring源码-手写篇-手写DI实现
- 原文地址：https://blog.csdn.net/qq_38514354/article/details/128048416