|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/css-layout-techniques/
课程评论：没有评论
课程名称：CSS 布局技巧 课程概述：在当今的网页设计中，设计复杂的页面布局是网页设计师和前端开发人员的重要任务。通过设计布局和定位内容来构建网页是网页设计和开发中的关键。元素在网页上的正确定位不仅使网页结构更加清晰，还使内容更易于查看和理解。本课程《CSS 布局技巧》旨在教授您常见的布局和定位方法，帮助您以几乎任何想象不到的方式在网页上定位元素。 在本课程中，您将学习使用显示方法、浮动、定位技术以及最新的 CSS 布局模型 Flexbox 来构建布局。课程内容从基础的 CSS 定位技巧入手，逐步深入到高级概念。您将了解以下内容： - 元素的默认显示方式 - CSS 中块级元素与行内元素的区别 - 如何使用 CSS display 属性更改元素的显示方式 - CSS 盒子模型的工作原理及其属性如宽度、高度、外边距、内边距和边框的使用 - 如何使用 box-sizing 属性修改 CSS 盒子模型的工作方式 - 如何使用 CSS position 属性进行静态、固定、绝对和相对定位 - 如何结合 CSS position 属性使用 left、top、right 和 bottom 属性 - 如何使用浮动和清除属性定位元素 - 如何设计 CSS Flexbox 布局 在“知识转化为行动（应用您的知识）”部分，您将应用在课程中学到的知识，从头开始构建布局和定位元素。在“与现实项目的 CSS 定位（实践操作）”部分，您将进行实际操作，实践实现 CSS 定位技巧并应用于真实项目。 通过本课程的学习，您将能够设计和定制网页布局，改变文档的正常流向，使用不同的 CSS 布局属性更改页面的大小、位置和布局。如果您想掌握 CSS 定位技巧，不妨加入我们的课程，轻松高效地提升您的网页设计能力！
Nowadays, web designers and front-end developers have to build complex page layouts. Structuring webpages by designing layouts and positioning content is very important when it comes to web design and web development. When the elements are positioned correctly in a webpage, the webpage becomes more structured and the content becomes easily visible and digestible. Web designers and developers take advantage of different CSS layout techniques to structure webpages as they need. CSS layout techniques allow us to define the placement of elements on a web page, that is to control where they are positioned with respect to their default position as per normal flow, the other elements around them, their parent container, or the main viewport/window. Suppose you want to create your own multi-column web site. But if you do not know where to start from or how to proceed, this course is for you. This course "CSS Layout Techniques" teaches you how to work with the common layout and positioning methods used in web design. In this course, you will learn different techniques to position elements on a webpage in nearly any imaginable way. Throughout the course, you will learn how to build layouts using display methods, floats, positioning techniques and even Flexbox which is the latest CSS layout model. At the end of the course, you will apply your positioning skills by working on real-world projects. You can decide which technique to use based on the content and goals of your webpage because some techniques are better than others in some context. In this course, you start from the basics of CSS positioning techniques and gradually move to advanced concepts in CSS positioning. You will understand, How elements are displayed by default?How block-level elements are different from inline elements in CSS?How to change the way an element is displayed using CSS display property?How CSS box model works?How to use CSS box model properties such as width, height, margin, padding and border?How to change the way CSS box model works using box-sizing property?How to use the CSS position property for static, fixed, absolute and relative positioning?How to use left, top, right and bottom properties along with CSS position property?How to position elements using float and clear properties?How to design CSS flexbox layout? In the "Knowledge into Action (Apply Your Knowledge)" section, you will apply what you have learnt in this course to build layout and position elements from scratch. In the "CSS Positioning with Real-World Projects (Hands-On Practices)" section, you will do hands-on practices where you will practically implement CSS positioning techniques in some real-world projects. By the end of this course, you will be able to Design layouts Customise webpage layouts Change the normal flow of the document Use different CSS layout properties to change the size, position and layout of a page. So, what are you waiting for? Join this course and learn CSS positioning techniques in an easy and efficient way!!
