1500字范文 > 大一学生《Web编程基础》期末网页制作 HTML+CSS+JavaScript 企业网页设计实例

大一学生《Web编程基础》期末网页制作 HTML+CSS+JavaScript 企业网页设计实例

时间：2020-09-22 12:16:53

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

📂文章目录

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

一、👨‍🎓网站题目

💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站、等网站的设计与制作。

二、✍️网站描述

🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

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

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有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 lang="en"><head><meta charset="UTF-8"><title>曼谷科技</title><link rel="stylesheet" href="css/index.css"></head><body><div class="top"><div class="width clearfix"><form class="right biaoge" action="shuju.html" method="post"><input class="search1 left" type="text" name="搜索" value="搜索..."><input class="search2 right" type="submit" name="提交" value=" "></form><a href="###"><img class="right" src="picture/weixin0.png"></a><a href="###"><img class="right" src="picture/weibo.png"></a></div></div><div class="nav width clearfix"><h1><img src="picture/logo.png"></h1><ul><li><a href="###" class="act">网站首页</a></li><li><a href="###">产品中心</a></li><li><a href="###">技术与服务</a></li><li><a href="###">解决方案</a></li><li><a href="###">合作伙伴</a></li><li><a href="###">新闻动态</a></li><li><a href="###">关于我们</a></li></ul></div><div class="main .bgcolor1"><div class="banner"><div class="dingwei"><div class="aa a1"><div class="bb b1"><div class="bb b2"><div class="bb b3"></div></div></div></div><div class="aa a2"><div class="bb b1"><div class="bb b2"><div class="bb b3"></div></div></div></div><div class="aa a3"><div class="bb b1"><div class="bb b2"><div class="bb b3"></div></div></div></div><div class="aa a4"><div class="bb b1"><div class="bb b2"><div class="bb b3"></div></div></div></div></div></div><div class="main1"><div class="prodoctus clearfix width"><div class="prod"><div class="icon i1"></div><p>物联网手持终端</p></div><div class="prod"><div class="icon i2"></div><p>物联网手持终端</p></div><div class="prod p3"><div class="icon i3"></div><p>物联网手持终端</p></div></div></div><div class="main2"><div class="jjfz width"><div class="title clearfix"><h2>解决方案<span>SOLUTIONS</span></h2><div class="bg"></div></div><div class="jjfa_main clearfix"><div class="mulu left"><div class="wenzi jt left">交通行业</div><div class="content left"><div class="content_left left"><img src="picture/img1.png"></div><div class="content_right left"><ul><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li></ul></div></div></div><div class="mulu left"><div class="wenzi sf left">司法行业</div><div class="content left"><div class="content_left left"><img src="picture/img1.png"></div><div class="content_right left"><ul><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li></ul></div></div></div><div class="mulu left"><div class="wenzi zf left">政府相关企业</div><div class="content left"><div class="content_left left"><img src="picture/img1.png"></div><div class="content_right left"><ul><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li></ul></div></div></div><div class="mulu left"><div class="wenzi qt left">其他行业</div><div class="content left"><div class="content_left left"><img src="picture/img1.png"></div><div class="content_right left"><ul><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li><li><a href="###">军用物资组套仓储管理系统</a>[-04-17]</li></ul></div></div></div></div></div></div><div class="main3"><div class="news width"><div class="title clearfix"><h2>新闻动态<span>NEWS</span></h2><div class="bg"></div></div><div class="news_main clearfix"><div class="yinying"><div></div></div><ul class="clearfix left"><li class="one"><a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a><p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p></li><li><a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a><p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p></li><li><a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a><p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p></li></ul><ul class="clearfix left right_ul"><li class="one"><a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a><p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p></li><li><a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a><p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p></li><li><a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a><p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p></li></ul></div></div></div><div class="main4 clearfix"><div class="hzhb width"><div class="title clearfix"><h2>合作伙伴<span>PARTNERS</span></h2><div class="bg"></div></div><div class="hzhb_main clearfix"><a href="###"><img src="picture/hzhb1.png" alt="tupian1"></a><a href="###"><img src="picture/hzhb2.png" alt="tupian2"></a><a href="###"><img src="picture/hzhb3.png" alt="tupian3"></a><a href="###"><img src="picture/hzhb4.png" alt="tupian4"></a><a class="last" href="###"><img src="picture/hzhb5.png" alt="tupian5"></a></div></div></div></div><div class="footer clearfix"><div class="list width clearfix"><ul><li class="first"><a href="###">产品中心</a></li><li><a href="###">手持终端</a></li><li><a href="###">产品线</a></li><li><a href="###">附件</a></li><li><a href="###">软件</a></li></ul><ul><li class="first"><a href="###">技术与服务</a></li><li><a href="###">技术支持</a></li><li><a href="###">售后服务</a></li></ul><ul><li class="first"><a href="###">解决方案</a></li><li><a href="###">交通行业</a></li><li><a href="###">司法行业</a></li><li><a href="###">政府及其相关</a></li><li><a href="###">其他行业</a></li></ul><ul class="last_ul"><li class="first"><a href="###">联系方式</a></li><li class="sec"><a href="###">电话：0532-83887966 / 83887967</a></li><li class="thi"><a href="###">邮箱：Services@</a></li><li class="four"><a href="###">微信：青岛量谷无线科技</a></li></ul></div><div class="xian"></div><div class="lianjie width"><p><span>友情链接：</span><a href="###">物联中国</a><a href="###">物联网世界</a><a href="###">青岛市江苏商会</a><a href="###">青岛物联网协会</a></p></div></div><div class="bottom"><p>© 版权所有青岛量谷无线科技有限公司 Qingdao Langcoo Wireless Technologies Co.,Ltd 地址：青岛市市南区芝泉路6号电话：0755-83316336 </p></div></body></html>

💒CSS样式代码

body,ul, li, div, h1, h2, h3, form, input, img, p, span, a {margin: 0;padding: 0;font-family: '宋体';color: #000;text-decoration: none;}ul , li {list-style: none;}img {display: block;}.clearfix::after {content: '';display: block;clear: both;}.left {float: left;}.right {float: right;}.width {width: 1000px;margin: 0 auto;}.top {background: url('../image/dian_b.png');}.top .width {text-align: right;height: 40px;}.top img {padding-left: 14px;padding-top: 12px;}.biaoge {width: 183px;margin-top: 5px;margin-left: 23px;border-bottom: 2px solid #FFB243;display: table-cell;vertical-align: middle;}input {background: transparent;border: none;outline: none;color: #9d9ea0;line-height: 30px;font-size: 12px;}.search1 {padding-left: 6px;width: 159px;height: 30px;vertical-align: middle;}.search2 {width: 18px;background: url('../image/sousuo.png') no-repeat left;cursor: pointer;}.nav {height: 100px;}.nav h1 {padding-top: 24px;width: 251px;height: 76px;float: left;/* vertical-align: middle;margin: auto 0px; */}.nav ul {float: left;height: 100px;/* padding-left: 251px; */width: 749px;/* background: url('../images/logo.png') no-repeat left 24px; */}.nav li a {display: block;float: left;width: 105px;text-align: center;font-family: '微软雅黑';line-height: 100px;font-size: 16px;}.nav li a:hover ,.act {background: #2361AD url('../image/arr1.png') no-repeat center bottom;color: #fff;}.banner {background: #000 url('../image/banner.png') no-repeat center 0px;height: 455px;/* background-size: 100% 455px; */position: relative;}.dingwei {position: absolute;width: 265px;height: 258px;background: #fff;top: 50px;left: 50%;margin-left: 82px;}.aa {width: 114px;height: 120px;background: #2361AD;position: absolute;padding-left: 15px;padding-bottom: 6px;}.a1 {top: 0px;left: 0px;}.a2 {top: 0px;right: 0px;}.a3 {bottom: 0px;left: 0px;}.a4 {bottom: 0px;right: 0px;}.news_main ul li p {font-size: 12px;line-height: 22px;margin-bottom: 10px;}.news_main .right_ul {padding-right: 0;}.yinying {overflow: hidden;width: 20px;height: 400px;position: absolute;top: -50px;left: 50%;margin-left: -20px;}.yinying div {width: 50px;height: 400px;position: absolute;top: 0px;left: 100%;border-radius: 50%;background: transparent;box-shadow: 4px 0px 20px #000;}.main4 {border-bottom: 1px solid #E7E7E7;}.hzhb_main a {margin-bottom: 35px;margin-right: 71px;border: 1px solid #C0C0C0;float: left;}.hzhb_main .last {margin-right: 0px;}.footer {padding-top: 20px;background: #F6F6F6 url('../image/dian_b_1.png');}.footer ul {margin-right: 154px;float: left;margin-bottom: 18px;}.footer .last_ul {margin-right: 0px;}.list li {line-height: 30px;font-size: 12px;}.list .first {font-size: 18px;line-height: 18px;padding-bottom: 11px;font-weight: bold;}.last_ul li {padding-left: 22px;background: url('../image/phone.png') no-repeat left;}.last_ul .first {background: none;}.last_ul .sec {background: url('../image/phone.png') no-repeat left;}.last_ul .thi {background: url('../image/email.png') no-repeat left;}.last_ul four {background: url('../image/weixin.png') no-repeat left;}.last_ul .first {padding-left: 0px;}.xian {border-color: #E7E7E7 #E7E7E7 #fff #fff;border-width: 1px 0px 1px 0px;border-style: solid;}.lianjie p span {display: inline-block;font-size: 18px;line-height: 18px;padding-top: 18px;padding-bottom: 38px;font-weight: bold;}.lianjie p a {font-size: 12px;margin-right: 15px;}.bottom {border-top: 1px solid #fff;text-align: center;height: 65px;background: url('../image/dian_b.png');}.bottom p {display: block;color: #9F9F9F;padding-top: 27px;}