Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
[2024最新]HTML和CSS完整网站项目实训课程 |中文简体字幕
Rating: 5.0 out of 5(4 ratings)
17 students

[2024最新]HTML和CSS完整网站项目实训课程 |中文简体字幕

从零开始只用HTML和CSS实现一个网站的网站
Last updated 7/2024
Chinese (Simplified)

What you'll learn

  • 从头到尾完成一个实际项目,从零开始体验完整的网站开发流程,从最基本的HTML结构到元素的CSS样式设置,以及交互细节与不同设备的响应式处理
  • 学习如何制作响应式网站,适应不同设备和屏幕尺寸,体验真实项目当中的各种响应式处理问题,理解响应式开发的核心逻辑,确保用户在各种设备上的良好体验
  • 课程中的项目有十几个不同版式的布局结构组成,涵盖各种常见的布局与样式的开发需求,通过这些布局和版式练习,掌握各种常见的网页布局方式
  • 通过项目不仅可以深入练习各种不同的选择器的使用技巧,也可以提升元素样式处理能力,同时还能熟悉各种交互效果的实现方式,大大提高自己的CSS开发能力
  • 项目中会实现多页面跳转,核心要完成网站的首页和注册登录页,这两个页面都要完成样式和布局结构,以及响应式处理,同时页面之间可以随意的进行跳转和切换
  • 网站开发完之后,在网站上线前需要进行一些必要的的设置和处理,在项目中,我们也会带着大家在做好这一切之后,一起把网站部署上线,让其他用户可以访问

Course content

1 section60 lectures11h 44m total length
  • 课程介绍2:03
  • 项目整体介绍与准备7:45
  • 首页整体结构处理6:12
  • 实现导航栏区域11:35
  • 第一板块 基本结构与背景10:52
  • 左侧内容结构与元素16:06
  • 右侧内容结构与元素设置9:00
  • 右侧可交互任务小图10:57
  • 遗留的两个小问题5:54
  • 第二板块 处理基本结构5:17
  • 人物图片部分处理8:36
  • 重复的文字小结构部分12:49
  • 第三板块 点击选项切换内容10:50
  • 细节与选项条的处理8:49
  • 完善内容区域结构与样式12:35
  • 第四板块 基本结构和样式15:00
  • 完成第四板块剩余部分16:13
  • 第五板块14:36
  • 第六板块19:54
  • 第七板块12:49
  • 第八板块 网格基本逻辑15:41
  • 实现网格每一行内容13:01
  • 第九板块上半部分14:33
  • 第九板块剩余部分11:53
  • 第十板块上面部分 输入框与切换按钮18:41
  • 第十板块 完成夹克卡片与基本交互15:55
  • 价格按钮与卡片价格联动10:01
  • 第十一板块10:30
  • 第十二板块 人物照片多列放置7:58
  • 第十三板块上半部分8:49
  • 第十三板块剩下部分11:10
  • 导航栏二级目录18:29
  • 各个板块添加一些交互18:53
  • 页面跳转链接添加6:26
  • 移动端导航栏的基本逻辑14:51
  • 导航栏次级菜单的折叠11:57
  • 完善整体样式效果10:59
  • 导航栏断点调整17:59
  • 第一板块响应式调整116:20
  • 第一板块响应式调整213:12
  • 第二板块响应式调整115:49
  • 第二板块断点调整设置212:54
  • 第三板块响应式调整20:53
  • 第四板块响应式调整14:35
  • 第五板块响应式调整5:17
  • 第六板块的响应式调整15:14
  • 第七板块响应式调整10:51
  • 第八板块响应式调整8:14
  • 第九板块响应式调整111:29
  • 第九板块响应式调整25:46
  • 第十板块的响应式调整10:45
  • 第十一板块响应式调整5:29
  • 第十二板块响应式调整4:50
  • 第十三板块响应式调整11:54
  • 移动端hover处理14:52
  • 注册登录页面基本结构和逻辑12:52
  • 实现账号密码登录模块13:50
  • 注册登录页剩余部分10:05
  • 首页的加载效果10:20
  • 项目最后的处理3:29

Requirements

  • 掌握基本的HTML和CSS知识

Description

欢迎来到HTML和CSS完整项目实操课程!

你是不是有这样的困惑,经过一段时间的学习,好像已经掌握了不少HTML和CSS的知识,但却依然不知道如何动手实现一个完整的网站?

那这个课程就是为了帮助刚开始接触网站开发(前端开发)的初学者设计的,通过它你能够系统地练习HTML和CSS,掌握实际的开发技能。

本课程将带你从零开始,完成一个完整的网站项目。通过这种整体性的实际开发训练,你将彻底解决学完知识点却不知道如何应用的问题。

Who this course is for:

  • 网站开发技术的初学者
  • 想尝试完成一个完整的纯HTML和CSS项目
  • 前端技术爱好者