GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → airen → css-layout

airen / css-layout

Licence: other
旨在肖除混乱的CSS布局教程

Labels

csswebcss3layout

Projects that are alternatives of or similar to css-layout

flexbin
Pure CSS, flexible and gapless image gallery layout like Google Images and 500px.com
Stars: ✭ 93 (+416.67%)
Mutual labels:  css3, layout
Front End Daily Challenges
As of October 2020, 170+ works have been accomplished, challenge yourself each day!
Stars: ✭ 598 (+3222.22%)
Mutual labels:  css3, layout
Mylinearlayout
MyLayout is a powerful iOS UI framework implemented by Objective-C. It integrates the functions with Android Layout,iOS AutoLayout,SizeClass, HTML CSS float and flexbox and bootstrap. So you can use LinearLayout,RelativeLayout,FrameLayout,TableLayout,FlowLayout,FloatLayout,PathLayout,GridLayout,LayoutSizeClass to build your App 自动布局 UIView UITab…
Stars: ✭ 4,152 (+22966.67%)
Mutual labels:  css3, layout
Driveway
pure CSS masonry layouts
Stars: ✭ 607 (+3272.22%)
Mutual labels:  css3, layout
Responsive Grid Of Hexagons
CSS responsive grid of hexagons
Stars: ✭ 481 (+2572.22%)
Mutual labels:  css3, layout
Samsara
☸️ Continuous UI
Stars: ✭ 1,051 (+5738.89%)
Mutual labels:  css3, layout
webgui
Web Technologies based Crossplatform GUI Framework with Dark theme
Stars: ✭ 81 (+350%)
Mutual labels:  css3
bubble-layout
An Android ViewGroup that displays avatar bubbles... similar to the chat bubbles on Facebook Messenger.
Stars: ✭ 46 (+155.56%)
Mutual labels:  layout
midio
midio will work really hard to generate you endlessly interesting audio on the fly.
Stars: ✭ 21 (+16.67%)
Mutual labels:  css3
bpit-vue
vue effects component package 🚀
Stars: ✭ 16 (-11.11%)
Mutual labels:  css3
periodic-table
Interactive Periodic Table which I made with React.js and CSS Grid. I was trying to memorize all the elements and thought, hey can I make this peculiar layout with my current CSS skills? I finally did
Stars: ✭ 92 (+411.11%)
Mutual labels:  layout
diorama
An image layout algorithm
Stars: ✭ 17 (-5.56%)
Mutual labels:  layout
Dopefolio
Dopefolio 🔥 - Portfolio Template for Developers 🚀
Stars: ✭ 2,047 (+11272.22%)
Mutual labels:  css3
gogo
GoGo - Free Bootstrap template for chat bot landing page
Stars: ✭ 45 (+150%)
Mutual labels:  css3
css-pro-layout
CSS library for building responsive and customizable layouts
Stars: ✭ 53 (+194.44%)
Mutual labels:  layout
wwlayout
Swifty DSL for programmatic Auto Layout in iOS
Stars: ✭ 46 (+155.56%)
Mutual labels:  layout
Pacman-Game
This is a pacman game made using HTML, CSS and Javascript only.
Stars: ✭ 42 (+133.33%)
Mutual labels:  css3
react-hook-layout
Layouts in React.
Stars: ✭ 16 (-11.11%)
Mutual labels:  layout
bili-video
基于Vue2.5打造简洁视频WebApp
Stars: ✭ 75 (+316.67%)
Mutual labels:  css3
TableViewKit
Empowering UITableView with painless multi-type cell support and built-in automatic state transition animations
Stars: ✭ 105 (+483.33%)
Mutual labels:  layout
View All Similar Projects ➔

css-layout

学习CSS布局，一门旨在消除混乱的CSS布局教程！

这个课程将包括三个部分：CSS基础、基础CSS布局和高级CSS布局。

CSS 基础

为了能够创建良好的布局，我们需要了解一些基本的CSS知识。其中CSS选择器和CSS中单位是布局中必不可少的两个模块功能，所以我们会花一定的时间来介绍CSS这两个模块的内容。

CSS 选择器

CSS Selectors Level 3规范中提供的CSS选择器已非常强大，并且得到了众多浏览器的支持。为了能更好的掌握CSS布局，我们需要很好地理解如何选择文档中的元素。除此之外，将会向大家介绍CSS Selectors Level 4中一些选择器的使用。

CSS 长度单位

了解CSS中的长度单位，主要是了解其中的相对单位，如em和rem；视窗单位，比如vw、vh、vmax和vmin；绝对单位，比如px和pt。在CSS的布局中，应该使用哪个CSS长度单位，为什么？

CSS布局入门

介绍CSS布局的实战技能，也是一些CSS布局的入门知识。在学习CSS布局的基本技能，有一些简单的要求，比如说，你需要一个文本编辑器和一个浏览器。

CSS 盒模型

CSS盒模型的解释，通过对CSS盒模型的了解，你可以知道如何使用盒模型；了解到margin和padding的工作原理以及margin的重叠。

CSS 定位

如何使用绝对定位（absolute）、相对定位（relative）、固定定位（fixed）和 sticky。

堆叠内容

介绍 CSS中的堆叠内容（Stacking Content）和z-index属性。

浮动

浮动是什么？如何通过浮动来布局？

Display属性

在UI元素使用display属性的block、inline和inline-block，以及在布局中使用这些。同时向大家展示这些属性值和display:table的对比。

开始使用Flexbox

Flexbox入门指南，你将学习如何构建UI元素，比如导航、卡片。

Responsive Design

了解媒体查询和流体网格。我们将创建一个响应式布局，并学习如何最好的在响应式设计中使用图像。

浏览器兼容性

在这里，我们将介绍使用新的CSS技术而不需要将人和旧的浏览器连接在一起对跨浏览器和设备的测试。 学习如何在接受新的CSS技术时做出正确的决定。

调试CSS布局问题

常见问题的解释。学习在浏览器中调试问题的技巧，并找出如何隔离问题以寻找帮助。

高级CSS布局

对于CSS布局来说，我们正处于一个激动人心的时刻，一切都在迅速变化，这节内容会让你跟上时代的发展。大部分内容将会让你就可以立马使用上，当然我们也会了解一些目前只在规范中，并未得到所有主流浏览器的兼容的布局属性和方法。

多列布局

多列布局属性已经有好几年的时间了，但几乎没有引起太多人的注意。虽然多列布局有一定的限制性，但是这个规范有一些非常有意思的用例，而且这些用例也值得我们学习。

高级Flexbox

在CSS布局入门中我们学习了Flexbox的一些基础入门的知识，可以做一些布局的事情。接下来我们学习如何使用Flexbox来创建更复杂的用户界面和布局。

CSS Shapes

在Web中打破矩形这样规则的布局一直以来都是件痛苦的事情。在这一节中，我们将会学习如何使用CSS Shapes来摆脱这些四四方方的盒子限制，实现一些更有艺术性的布局风格，比如杂志风格，不规则布局等。

CSS 网格布局

即将到来的CSS Grid布局，让你掌握一种全新的布局方式。

Box Alignment

Box Alignment的规范将应用在Flexbox、Grid和Block布局中的对齐属性上。这是一个垂直对齐的模块。

其他有趣的新特性

Exclusions和Regions以及其他新兴的相关特性模块。

CSS Layout 大纲

前面提到的过的三部分内容的大纲都在下面，后续将会逐步完成这三部分内容。下面的大纲将会不定期的更新。

CCSS 基础

  • CSS 选择器
    • 基础选择器
    • 组合选择器
    • 属性选择器
    • 伪类选择器
    • 伪元素选择器
    • 选择器使用技巧
  • 长度单位
    • 绝对单位
    • 相对单位
    • 视窗单位

CSS 布局入门

  • 简介
    • 开始
  • CSS 盒模型
    • CSS标准盒模型
    • 切换盒模型
    • 内距padding
    • 边框border
    • 外距margin
  • CSS 定位
    • 定位
    • 相对定位
    • 绝对定位
    • 固定定位
    • 粘性定位
  • 堆叠内容
    • 堆叠内容
    • 控制堆叠
  • 浮动
    • 浮动基础知识
    • 浮动布局
    • 清除浮动方法
    • 使用浮动创建一个导航栏
  • Display属性
    • display属性
    • 扩大链接的可点击区域
    • inline-block
    • display:table
  • Flexbox入门
    • Flexbox简介
    • align-items属性
    • justify-content属性
    • flex-wrap
    • 使用order控制Flex项目顺序
  • Responsive Design
    • Responsive Design介绍
    • 媒体查询
    • 响应式图像
    • 弹性网格
    • 使用calc()
    • 你应该使用哪种方法来进行响应式布局
  • 浏览器兼容性
    • 浏览器兼容性
    • 可访问性
    • 浏览器前缀
    • 使用新的CSS特性做为增加
    • 跨浏览器兼容测试

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].