easy-css-layout

Demo

View the Demo Page

Foreword

Just for practice & backups

About color setting of style, there're some problems here, but I don't want to modify them.

If you want to practice by this demo

• First you need to view the demo in the Demo column & Writedown your code by yourself
• If you can't achieve these functions, you can view the source column

---

NavBar

Name	Source	Demo	Preview
NavBar01	navbar01	navBar01
NavBar02	navbar02	navBar02
NavBar03	navbar03	navBar03

---

SearchBox

Name	Source	Demo	Preview
Searchbox01	searchbox01	searchBox01
Searchbox02	searchbox02	searchBox02
Searchbox03	searchbox03	searchBox03

---

Button

Name	Source	Demo	Preview
Button01	button01	button01
Button02	button02	button02
Button03	button03	button03
Button04	button04	button04
Button05	button05	button05
Button06	button06	button06
Button07	button07	button07
Button08	button08	button08
Button09	button09	button09
Button10	button10	button10
Button11	button11	button11
Button12	button12	button12
Button13	button13	button13
Button14	button14	button14

---

Pagination

Name	Source	Demo	Preview
Pagination01	pagination01	pagination01
Pagination02	pagination02	pagination02
Pagination03	pagination03	pagination03
Pagination04	pagination04	pagination04

---

Icon

Name	Source	Demo	Preview
Arrow	arrow	arrow
Loading	loading	loading
Star-five	star-five	star-five
Download	download	download
Upload	upload	upload
Power	power	power
Search	search	search
Change	change	change
Change02	change02	change02
Scan	scan	scan
Scan02	scan02	scan02
Code	code	code
Moon-dark	moon-dark	moon-dark
Moon-light	moon-light	moon-light
Wifi	wifi	wifi
Link	link	link
Star-Six	star-six	star-six
Question-Mark	question-mark	question-mark
BlueTooth	bluetooth	bluetooth
Cloud	cloud	cloud
Exit	exit	exit

---

Loading

Name	Source	Demo	Preview
Loading01	loading01	loading01
Loading02	loading02	loading02
Loading03	loading03	loading03
Loading04	loading04	loading04
Loading05	loading05	loading05
Loading06	loading06	loading06
Loading07	loading07	loading07
Loading08	loading08	loading08
Loading09	loading09	loading09
Loading10	loading10	loading10
Loading11	loading11	loading11
Loading12	loading12	loading12
Loading13	loading13	loading13
Loading14	loading14	loading14
Loading15	loading15	loading15
Loading16	loading16	loading16
Loading17	loading17	loading17
Loading18	loading18	loading18
Loading19	loading19	loading19
Loading20	loading20	loading20
Loading21	loading21	loading21

---

Switch

Name	Source	Demo	Preview
Switch01	switch01	switch01
Switch02	switch02	switch02
Switch03	switch03	switch03
Switch04	switch04	switch04
Switch05	switch05	switch05

---

Checkbox

Name	Source	Demo	Preview
Checkbox01	checkbox01	checkbox01
Checkbox02	checkbox02	checkbox02
Checkbox03	checkbox03	checkbox03

---

Input

Name	Source	Demo	Preview
Input01	input01	input01

---

Container

Name	Source	Demo	Preview
Container01	container01	container01
Container02	container02	container02
Container03	container03	container03
Container04	container04	container04
Container05	container05	container05
Container06	container06	container06
Container07	container07	container07

---

Card

Name	Source	Demo	Preview
Card	card01	card01

---

Unclassified

Name	Source	Demo	Preview
Cube	cube	cube
LetterA-D	letterA-D	letterA-D
LetterE-H	letterE-H	letterE-H
LetterI-L	letterI-L	letterI-L
LetterM-P	letterM-P	letterM-P
LetterQ-T	letterQ-T	letterQ-T
LetterU-X	letterU-X	letterU-X
LetterY-Z	letterY-Z	letterY-Z
Concentric-circles	concentric-circles	concentric-circles

---

List

Name	Source	Demo	Preview
List01	list01	list01
List02	list02	list02
List03	list03	list03

---

Progress

Name	Source	Demo	Preview
Progress01	progress01	progress01
Progress02	progress02	progress02
Progress03	progress03	progress03