Materialize|Materialize CSS
https://materializecss.com/
遇到的问题:
- because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
- 参考答案链接:
https://stackoverflow.com/questions/48521971/mime-type-error-when-adding-a-css-file-to-angular/49269425#49269425 - 不需要修改 index.html,按照官网添加下面代码就会报上面的错
0. 总结: Class 1. set background color
- 只需要修改 angular.json
"styles": [
"src/styles.css",
"node_modules/materialize-css/dist/css/materialize.min.css"
],
- class: card-panel
- 使用方法:
class="card-panel teal lighten-2"
class="card-panel dark"
- class: colorName-text
- 使用方法: apply a text color ,just append
-text
to the color class
class="teal-text text-lighten-2"
class="dark-text text-darken-2"
- class: container
set the body content's width to the window width of ~xxx%
.s 90%
.m 85%
.l 70%
.xl 70% - 使用方法:
ASD
- vertical align
1.1 class:valign-wrapper
1.2 使用方法:div class="valign-wrapper">
- horizon text align
2.1 class:
left-align
right-align
center-align
2.2 使用方法:
This should be right aligned
5. quickly float things 【Materialize|Materialize CSS】which is used to avoid specificity issues
- class:
left
,right
- 使用方法:
div class="left">
div class="right">
- class:
class="brand-logo center"
设置logo 居中
设置 navbar links 居中 - 使用方法:
6.2 Active Items
- 增加类active 到 li 标签表示当前页
- class:
class="active"
- 使用方法:
- JavaScript
6.3 Extended Navbar with Tabs 要实现增加拓展的组件到 navbar,需要增加 类
nav-extended
到外层的nav tag- class:
nav-extended
- 使用方法:
6.4 Fixed Navbar
- To make the navbar fixed , you have to add an outer wrapping div with the class
navbar-fixed
. - This will offset your other content while making your nav fixed.
- You can adjust the height of this outer div to change how much offset is on your content.
- class:
navbar-fixed
- 使用方法:
6.5 Navbar 下拉菜单
- To add a navbar dropdown menu, add the
ul
dropdown structure into the page. - Add an element to trigger the dropdown menu
- Make sure to supply the
id
of the dropdown structure to thedata-target
attribute of the dropdown trigger. - class:
navbar-fixed
- 使用方法:
---\***** 分割线\*****---## 1. Color
> 1. background color:``` class="card-panel teal lighten-2"```
> 2. text color:```class="blue-text text-darken-2"```
// Background Color
This is a card panel with a teal lighten-2 class
// Text color ,To apply a text color, just append ' -text ' to the color class like this
This is a card panel with dark blue text
## 2. Grid
> - standard 12 column fluid responsive grid system.
> 1. 用 grid 布局网页
> 2. container 设置为窗口宽度的 70% ,将网页内容居中。
The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.
> 3.grid 网页布局原理:
无论浏览器多大尺寸,一行grid 就是相同宽度的12 列
> 4. 所有的column 必须包含在同一个row 里面,且必须增加class```col ``` 到你内部的div 里面来增加这些 column。
> 5.```offset-s6``` 意思是偏移 6行
> 6. ```div class="col s7 push-s5"``` , ```class="col s5 pull-s7``` push 向右推,pull 向左拉
> 7.```class="section"``` used for simple top and bottom padding
> 8. ```class="divider"``` are 1 pixel lines that help break up your content.(水平分割线)
> 9. ### 1.columns contained inside arow
this div is 6-columns wide on all screen sizes
### 2.push and pull
This div is 7-columns wide on pushed to the right by 5-columns.
5-columns wide pulled to the left by 7-columns.
### 3.offset
6-columns
6-columns
### 4.section and divider
section1
stuff
### 5.Promotion Table
3 个等尺寸的div, 定义每个div 的宽度为4-columns
Promo Content 1 goes heres
Promo Content 2 goes heres
Promo Content 3 goes heres
### 6.Side Navigation Layout
Grey navigation panel
Teal page content
### 7.create responsive layouts
How to layout elements using our grid system. Show you how to design you layouts so that they look great on all screen sizes.
**Screen Sizes**
| | Mobile Devices | Tablet Devices | Desktop Devices| Large Desktop Devices |
:-: | :-: | :-: | :-: | :-: |
|screen sizes|<= 600px |<= 600px | > 992px | > 1200px |
class prefix | .s | .m | .l| .xl
container width| 90% | 85% | 70% | 70%
number of columns| 12 | 12 | 12 |12|
where s signifies the screen class-prefix (s = small, m = medium, l = large)
#### 7.1 adding responsiveness
-同时适用大屏幕和小屏幕
I am always full-width (col s12)
I am full-width on mobile (col s12 m6)
#### 7.2 Responsive Side Navigation Layout
L
推荐阅读
- 画解算法(1.|画解算法:1. 两数之和)
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- ts泛型使用举例
- https请求被提早撤回
- 拒绝可以很艺术,或者很行为艺术。
- www和https://又被Chrome地址栏隐藏了
- 3.css浮动
- AnyProxy抓取http/https请求
- 计算机网络基础TCP\HTTP\HTTPS
- IOST任务教程