XHTML - Positional CSS for Layout

本课程是 XHTML Front-End Web Design with CSS 专项课程的一部分

位教师：EDUCBA

访问权限由 New York State Department of Labor 提供

3个模块

深入了解一个主题并学习基础知识。

8 小时完成

灵活的计划

自行安排学习进度

3个模块

深入了解一个主题并学习基础知识。

8 小时完成

灵活的计划

自行安排学习进度

您将获得的技能

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

11 项作业

授课语言：英语（English）

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

积累特定领域的专业知识

本课程是 XHTML Front-End Web Design with CSS 专项课程专项课程的一部分

在注册此课程时，您还会同时注册此专项课程。

向行业专家学习新概念
获得对主题或工具的基础理解
通过实践项目培养工作相关技能
获得可共享的职业证书

该课程共有3个模块

This course empowers learners to analyze, apply, and design modern web layouts using XHTML and CSS. Beginning with a critical examination of traditional layout techniques such as frames and tables, the course transitions into practical mastery of CSS float-based layouts, including multi-column designs and form alignment.

Through progressive modules, learners will construct responsive layouts using fluid and Jello layout techniques, organize content using semantic HTML lists, and develop interactive navigation menus purely with CSS. The final module guides learners to demonstrate control over page composition using absolute, fixed, and relative positioning strategies, while leveraging z-index for layering and visual hierarchy. By the end of the course, learners will be able to implement professional-grade web layouts with precision, semantic structure, and responsive behavior—without relying on outdated techniques or JavaScript.

This module introduces learners to the limitations of traditional HTML layout techniques and transitions into the use of CSS float properties for modern, flexible web designs. It explores the fundamentals of float behavior with block elements, images, paragraphs, and forms, leading up to practical multi-column layout construction.

涵盖的内容

10个视频4个作业

10个视频总计76分钟

Drawbacks Of Traditional Layout 7分钟
Binary Encoding And Flash Web Pages 8分钟
Float With The Block Level Element 8分钟
Float Attribute With Image 9分钟
Float With Paragraph 7分钟
Float With Paragraph Continues 6分钟
Float With Forms 11分钟
Creating A 2 Column Design 8分钟
Tuning Up The Borders 7分钟
Creating A 3 Column Design 6分钟

4个作业总计60分钟

Understanding Traditional Layout Challenges 10分钟
Mastering Floats with Common HTML Elements 10分钟
Complex Layouts Using Floats 10分钟
CSS Float-Based Layout Foundations 30分钟

This module deepens understanding of responsive design through advanced layout strategies like the Jello layout and the use of min-height. It progresses to building and styling list-based menus with vertical, horizontal, and nested list structures. Interactivity using hover effects and real-world menu techniques are also covered.

涵盖的内容

10个视频4个作业

10个视频总计82分钟

Using Min-Height Attribute 7分钟
Jello Layout 8分钟
Examples Jello Layout 9分钟
Extra Examples 11分钟
Vertical List 8分钟
Horizontal Lists 7分钟
Nested Lists 6分钟
Hover Effect 9分钟
Creating Menus with CSS 9分钟
Examples of Creating Menus with CSS 9分钟

4个作业总计60分钟

Responsive and Jello Layout Techniques 10分钟
Building Lists and Navigation Menus 10分钟
Real-World Menu Creation with CSS 10分钟
Advanced Layouts and Menu Structures 30分钟

This final module explores positioning strategies beyond float, including absolute, relative, and fixed positioning. Learners will understand layering with z-index and learn to construct complex layouts with precise control over element stacking and placement.