门户营销型网站搭建,济南房产网安居客,wordpress 开启多用户,wordpress nginx 301一。页面构思 1.标题栏 大标题#xff1a;智慧教室管理系统 小标题#xff1a;灯光#xff0c;报警#xff0c;风扇#xff0c;温度#xff0c;湿度#xff0c;光照 2.样式设计 背景设置。字体设置#xff08;字体大小#xff0c;格式#xff0c;颜色#xff09; 3.…一。页面构思 1.标题栏 大标题智慧教室管理系统 小标题灯光报警风扇温度湿度光照 2.样式设计 背景设置。字体设置字体大小格式颜色 3.导航栏 6个导航栏标签3个传感器3个控制 每次点击导航栏标签页面对应做出页面展示。 4.前后台交互设计 1.定时刷新传感器设置当用户点击传感器标签需要把数据展示给用户 2.控制下发当用户点击控制标签需要根据用户下发的命令进行控制实际的硬件并且在主题栏进行动态展示 二。前端开发基本技能 1.html 主要内容html最外边head页面头body页面身标签 2.CSS--》静态页面的样式 对不同区域的资源设置样式bodyheaderh1区域的样式设计 3.javaScriptjs 动图设计 常用的网页jQuery有很多现成的页面资源可以使用。 jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm 开发方式 1.BootStrap基于框架的开发 Bootstrap中文网 2.Vue渐进式js框架 Vue.js - 渐进式 JavaScript 框架 | Vue.js 3.react现成的框架 React 官方中文文档 本项目运用到的技术jscss了解即可
三。Web页面布局
1.标题栏布局 1页面展示 具体代码 headrh1的样式在上面CSS中有定义。 2small是小字体 div classheaderdiv classcontenth1智慧教室管理系统small温度、湿度、风扇、报警光照/small/h1/div/div 2.导航栏布局 1页面展示 2具体代码 div classbody-leftimg srcimages/left-title.png stylemargin:26px 0;divul classleft-navli classline activea href#title1 data-toggletabimg srcimages/tubiao01.png width40px温度传感器/a/lili classlinea href#title2 data-toggletabimg srcimages/tubiao02.png width40px湿度传感器/a/lili classlinea href#title3 data-toggletabimg srcimages/tubiao03.png width40px光照传感器/a/lili classlinea href#title4 data-toggletabimg srcimages/tubiao04.png width40pxLED/a/lili classlinea href#title5 data-toggletabimg srcimages/tubiao05.png width38px风扇/a/lili classlinea href#title6 data-toggletabimg srcimages/tubiao06.png width40px报警器/a/li/uldiv classcontentdiv classbox fade in active idtitle1p温度值br /spanlable idtemperature/lable/span/p/divdiv classbox fade idtitle2p湿度值br /spanlable idhumidity/lable/span/p/divdiv classbox fade idtitle3p光照值br /spanlable idlight/lable/span/p/divdiv classbox fade idtitle4h3开关/h3img idbutton01 srcimages/an-off.png onclickanniu01() //divdiv classbox fade idtitle5h3开关/h3img idbutton02 srcimages/an-off.png onclickanniu02() //divdiv classbox fade idtitle6h3开关/h3img idbutton03 srcimages/an-off.png onclickanniu03() //div/div/div
