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


标签的嵌套混合使用。




目录
打赏
0
0
0
0
17
分享
相关文章
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
40 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
12天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
31 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
126 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
54 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
65 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
85 33
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
34 2
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
118 24
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
327 14

热门文章

最新文章

  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    29
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    66
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    7
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    36
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    67
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    31
  • 7
    巧用通义灵码,提升前端研发效率
    97
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    149
  • 9
    详解智能编码在前端研发的创新应用
    107
  • 10
    智能编码在前端研发的创新应用
    85