思维-网页技术设计大作业前端HTML+CSS+JS(精美完整)

简介: 思维-网页技术设计大作业前端HTML+CSS+JS(精美完整)

网页的结构与分解

主要分以下几个版块:

一:主页版块

二:登录版块

三:注册板块

四:个人设置板块

五:分享思维模块

六: 发现思维模块

七: 我的思维模块

八: 搜索模块

九: 帮助模块


首页1:本页面用了框架做了页头和页尾,且有图片轮播,使用了js技术。

头部:


a3f6d8a5c9154c7d8f2b12de9ff66a99.png


中间:


fb5eae8fa4c44a798e569757e74b5998.pngd7ebd26cf0f949fcb9e1b6df2caeac68.png7a117bc99ef847039131755e56b58447.png


尾部:


4d2ff4aabefa48ff98294b14ee5fa0af.png

2登陆:本页面主要是使用框架引用foot.html和header.html。然后使用的js技术进行登陆时的表单验证。


25e9adbbfe7349aa8f651b716ce7adfc.png


3注册:本页面主要是使用框架引用foot.html和header.html。然后使用的js技术进行登陆时的表单验证以及表格的混合使用。


a452a116ba504245a2a55d09916d329c.png


4首页2:本页面主要是CSS的四中布局的混合使用,实现图文混排。


04a0040e997147739a9154d85d7a6806.png7ec35786e2474179be25d5ced3b4c175.png3a90b35229944cf78ea36dd3dc44fc55.png


5个人设置:本页面主要是对表格的混合使用,表格与div标签的混合使用。


f83adcfe18214e94880c03c3a07fc977.png7aa6addcc5e440edb1dc7c4f170b6061.pngb40aa5b7e3db4d3785674268573e4c03.png


6分享思维:本页面主要是对表单的使用。


a67c93a20a984ec890465bbd878daa00.png6cd9362473fa462992787e67688c755f.pngb5a0492f45f8436bb246e4cd58be3839.png


7我的维度:本页面也是主要对CSS图文布局的使用。


094cd6546b4044018c158af5f152aa3a.png236d84af066e4e5d9b6658c7d764d89e.pngd1ce90c0b8c244209deb195b87aa7b08.png


8创意维度:本页面主要也是对css的四中方式布局的使用。


e49b4b6b31214dbea59c29c25aa57e23.pngf3272430f994484e84e00a4f3b3c4c9f.png


9帮助页面:本页面主要是对


a06d6173c7e3483bafc7c2258bf5a2ab.pngb18f6f56745d48dbbc434079e3b63e86.pngee5f1100d3db4d10b384916e78dcccbc.png


标签的嵌套混合使用。




相关文章
|
3天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
11 5
|
1天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
12 1
|
11天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
8天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
8天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
48 1
|
13天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
26 3
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
133 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
43 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
下一篇
无影云桌面