思维-网页技术设计大作业前端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


标签的嵌套混合使用。




相关文章
|
2月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
38 1
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
38 1
简单几行代码CSS实现网页自动打文字效果
|
23天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习中的图像识别技术深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第27天】本文将介绍深度学习中的图像识别技术,包括其原理、应用领域及未来发展。我们将探讨如何通过神经网络实现图像识别,并分析其在医疗、交通等领域的应用。最后,我们将展望图像识别技术的发展前景。
|
2月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
40 4
|
2月前
|
运维 Cloud Native JavaScript
云端新纪元:云原生技术深度解析深入理解Node.js事件循环及其在异步编程中的应用
【8月更文挑战第27天】随着云计算技术的飞速发展,云原生已成为推动现代软件开发和运维的关键力量。本文将深入探讨云原生的基本概念、核心价值及其在实际业务中的应用,帮助读者理解云原生如何重塑IT架构,提升企业的创新能力和市场竞争力。通过具体案例分析,我们将揭示云原生技术背后的哲学思想,以及它如何影响企业决策和操作模式。
|
2月前
|
JavaScript 开发者 UED
Vue.js 错误处理与调试:跟上技术潮流,摆脱开发困扰,成为代码大神不是梦!
【8月更文挑战第30天】在 Vue.js 开发中,错误处理与调试至关重要。本文将对比 Vue 的全局错误捕获机制 `Vue.config.errorHandler` 和组件内 `watch` 监听数据变化的方式,并介绍 Vue 开发者工具、控制台打印 (`console.log`) 以及代码断点 (`debugger`) 等调试方法。此外,还将探讨如何通过自定义错误页面提升用户体验。通过这些技巧的对比,帮助开发者灵活选择适合的策略,确保应用稳定性和开发效率。
41 0
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 响应式变革来袭!结合热点技术,探索从 Object.defineProperty 到 Proxy 的奇妙之旅,触动你的心
【8月更文挑战第30天】在 Vue.js 中,响应式系统自动追踪并更新数据变化,极大提升了开发体验。早期通过 `Object.defineProperty` 实现,但存在对新旧属性处理及数组操作的局限。Vue 3.0 引入了 `Proxy`,克服了上述限制,提供了更强大的功能和更好的性能。实践中,可根据项目需求选择合适的技术方案,并优化数据操作,利用懒加载等方式提升性能。
32 0
下一篇
无影云桌面