HTML+CSS+JS【购物商城】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
- 💥 文章目录
- 一、🏁 网站题目
- 二、🚩 网站描述
- 三、🎌 网站介绍
- 四、🏴 网站效果
- 五、🏳️ 网站代码
- 六、🏳️🌈 如何学习进步
- 七、🏴☠️ 更多干货
💥 文章目录
一、🏁 网站题目
💪💪💪 购物商城 美食 7页 含jQuery 登录注册
二、🚩 网站描述
🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：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实现动态轮播特效, 表单提交, 点击事件等等。
四、🏴 网站效果
五、🏳️ 网站代码
<!DOCTYPEhtml><html><head><meta charset="utf-8"><title>良仓注册</title><link rel="stylesheet"href="css/public.css"><link rel="stylesheet"href="css/register.css"><style>body{position:relative;}.reg_body{background-color:rgb(79,196,25);width:100%;height:100%;}#pwdString{display:flex;}#pwdString span{flex:1;background:#FFF;}</style></head><bodyclass="reg_body"><!--<divclass="layerMask"></div>--><divclass="main"><form action=""><tableclass="regtab"style="margin-top: 40px;"><tr valign="center"align="center"><td colspan="3"height="160px"><a href=""><imgclass="logo-bg"src="images/屏幕截图 2023-06-08 095201.png"alt=""style="width: 150px; height: 100px;"></a></td></tr><tr valign="middle"height="50px"><th width="56px"class="regLabel"align="left">用户名</th><td width="270px"align="left"><input type="text"class="regInpt"placeholder="请输入用户名"></td></tr><tr id="username"><td></td><td><p style="color:red"></p></td></tr><tr valign="middle"height="50px"><th width="56px"class="regLabel"align="left">验证码</th><td width="270px"align="left"><input type="text"class="regcode"placeholder="输入验证码"><img id="auth"src="#"alt=""></td><td align="left"><a href="javascript:void(0)"class="nextcode"onclick="updateCode()">看不清，换一张</a></td></tr><tr id="code"><td></td><td><p style="color:red"></p></td></tr><!--创建密码--><tr valign="middle"height="50px"><th width="56px"class="regLabel"align="left">创建密码</th><td width="270px"align="left"><input type="password"class="regInpt"placeholder="6~20位字符组成，区分大小写"oninput="power(event)"></td><td align="left"><div id="pwdInfo"><div id="pwdString"class="content"><span></span><span></span><span></span></div><divclass="info"><spanclass="passleft">弱</span><span>中</span><spanclass="passright">强</span></div></div></td></tr><tr id="password1"><td></td><td><p style="color:red"></p></td></tr><!--确认密码--><tr valign="middle"height="50px"><th width="76px"class="regLabel"align="left">创建密码</th><td width="270px"align="left"><input type="password"class="regInpt"placeholder="确认密码"></td></tr><tr id="password2"><td></td><td><p style="color:red"></p></td></tr><tr valign="middle"height="50px"><th width="76px"class="regLabel"align="left"></th><td><divclass="agree"><input type="checkbox"checked="checked"class="overtrea">同意<aclass="vertpos"style="color: #0c79cc;"target="_blank"href="">美食客注册条款</a></div></td></tr><tr valign="center"align="center"><td width="300px"colspan="2"align="right"><inputclass="regbtn"type="button"value="立即注册"style="border-radius: 4px;font-weight: normal;"onclick="register()"></td></tr><tr valign="center"align="center"><th></th><td width="100px"align="left"><!--<a href=""class="loginApp qqapp"><img src="images/qq_icon_on24_22.png"alt=""></a><a href=""class="loginApp wbapp"><img src="images/sina_icon_on24_22.png"alt=""></a><a href=""class="loginApp dbapp"><img src="images/db_icon_on24_22.png"alt=""></a><a href=""class="loginApp tqqapp"><img src="images/tqq_icon_on24_22.png"alt=""></a>--><a href=""class="loginApp qqapp"></a><a href=""class="loginApp wbapp"></a><a href=""class="loginApp dbapp"></a><a href=""class="loginApp tqqapp"></a></td><td align="left"><a href="login.html"class="reg">登录美食客</a></td></tr></table></form></div><script>varauth=document.querySelector("#auth");varcode=["dcc9","766d","659c","a55c"];varcurrentCode=code[parseInt(Math.random()*code.length)];auth.setAttribute("src","images/"+currentCode+".png");functionregister(){// 获取表单数据varusername=document.querySelector("table > tbody > tr:nth-child(2) > td > input").value;varcodeTag=document.querySelector("body > div > form > table > tbody > tr:nth-child(4) > td:nth-child(2) > input").value;varpassword1=document.querySelector("body > div > form > table > tbody > tr:nth-child(6) > td:nth-child(2) > input").value;varpassword2=document.querySelector("body > div > form > table > tbody > tr:nth-child(8) > td > input").value;// 获取显示错误元素varshowUsername=document.querySelector("#username p");varshowCode=document.querySelector("#code p");varshowPassword1=document.querySelector("#password1 p");varshowPassword2=document.querySelector("#password2 p");showUsername.innerHTML="";showCode.innerHTML="";showPassword1.innerHTML="";showPassword2.innerHTML="";// 检测用户名if(username.length<3||username.length>12||username.replace(/[0-9A-z_]*/g,"")!=""){showUsername.innerHTML="用户名必须由3-12字母，数字或下划线组成";return;}// 比较验证码if(codeTag.toLowerCase()!=currentCode){currentCode=code[parseInt(Math.random()*code.length)];auth.setAttribute("src","images/"+currentCode+".png");showCode.innerHTML="验证码错误";return;}// 比较密码if(password1.length<6||password1.length>12||password1.replace(/[0-9]*/g,"")!=""){showPassword1.innerHTML="密码必须是由6-12位数字组成";return;}// 比较两次密码是否一致if(password1!=password2){showPassword2.innerHTML="密码不一致";return;}// 将表单数据转换成字符串拼接形式varformData=newURLSearchParams();formData.append("username",username);formData.append("password",password1);formData.append("status","register");// 发送请求fetch("http://159.75.89.136:3000/api_user",{method:'post',headers:{"Content-Type":"application/x-www-form-urlencoded",},body:formData,}).then(function(res){returnres.json()}).then(function(data){alert(data.message);// 接受后端回应的数据if(data.code==0){data.user_id=data.uesr_id;// 将登录信息保存在本地localStorage.setItem("user",JSON.stringify(data));// 登录成功location.href="./index.html";}});}functionpower(event){console.log(event.target.value);vartag1=document.querySelector("#pwdString > span:nth-child(1)");vartag2=document.querySelector("#pwdString > span:nth-child(2)");vartag3=document.querySelector("#pwdString > span:nth-child(3)");varpassword1=document.querySelector("body > div > form > table > tbody > tr:nth-child(6) > td:nth-child(2) > input").value;tag1.style.backgroundColor="";tag2.style.backgroundColor="";tag3.style.backgroundColor="";if(password1.length>11){tag1.style.backgroundColor="#de9516";tag2.style.backgroundColor="#1669de";tag3.style.backgroundColor="red";}elseif(password1.length>8){tag1.style.backgroundColor="#de9516";tag2.style.backgroundColor="#1669de";}else{tag1.style.backgroundColor="#de9516";}document.querySelector("#pwdString > span:nth-child(1)");}// 更新验证码functionupdateCode(){currentCode=code[parseInt(Math.random()*code.length)];auth.setAttribute("src","images/"+currentCode+".png");}</script></body></html>六、🏳️🌈 如何学习进步
- 看书、看博客、学课程或者看视频等
- 模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
- 思考学习别人思路后，脱离书本和博客，完全自己实现功能
- 自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
- 在别人的框架和要求下，写代码实现业务
- 自己负责别人设计的模块的实现
- 独立设计业务模块并开发实现
- 负责大项目框架设计和拆分，带领别人进行开发
- 其他高阶的架构和管理工作，已经不仅仅是代码能力了
七、🏴☠️ 更多干货
🌝 关注我 学习更多知识~
🌝 支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~
🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~
🌝 更多主题网页设计模板
