Giter Club home page Giter Club logo

web's People

Contributors

253867843 avatar

Stargazers

avatar avatar avatar

web's Issues

html_base

步骤一：页面结构层HTML

1. HTML --- 超文本标记语言

2. HTML不需要编译, 直接由浏览器执行

3. HTML大小写不敏感

4. HTML基本结构由 "标记" 组成的

<html>
<head>
    <title>标题</title>
</head>
<body> 
   网页主题内容
</body>
</html>

<html>...</html> --- HTML文件
<head>...</head> --- 头部信息
<body>...</body> --- 网页内容

5. 扩展名可以是: html/htm

6. 注释

<!-- hr是水平线 -->

7. DOCTYPE声明 --- 用于定义文档类型

<!DOCTYPE> 声明必须放在HTML文档第一行
<!DOCTYPE> 声明不是HTML标签

8.中文乱码 --- 网页编码设置

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

9. 文字和段落标签

标题标签: <h1></h1> ~ <h6></h6>
段落标签: <p></p>
align对齐属性值: left, right, center, jusitfy
换行标签: <br/>
预格式化标签: <pre></pre>保留空格和换行
加粗标签: <b></b> <strong></strong>
斜体标签: <i></i> <em></em>
下标: <sub>
上标: <sup>
下划线: <ins></ins>

10.特殊符号

< &lt;
> &gt;
注册 &reg;
版权 &copy;
商标 &trade;
空格 &nbsp;

11. 列表标签

1. 无序列表
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    ...
</ul>

type属性值:
disc: 圆点
square: 正方形
circle: 空心圆


2. 有序列表
<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    ...
</ol>

type属性值:
1: 数字1, 2...
a: 小写字母a,b ...
A: 大写字母A,B ...
i: 小写罗马数字i 
I: 大写罗马数组I


3. 定义列表
<dl>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表项描述</dd>
    
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    ...
</dl>

1.<dt>和<dd>是同级标签
2.一个<dt>可以有多个<dd>

12. 图像和超链接标签

图像标签: <img ... />
img属性: 
src: 显示图像的url
alt: 文本
height: 图像的高
width: 图像的宽

13. 超链接

<a href="">内容</a>
href: 链接地址, 可以是 "内部链接" 或 "外部链接"

属性:
href: 链接地址
target: 链接目标窗口_self(默认值, 当前页面下打开), _blank(在新页面下打开), _top, _parent
title: 链接提示文字(光标停留显示)
name: 链接命名(锚链接用)

空链接:
<a href="#">javascript</a>

刷新页面: 
<a href="">链接</a>

14. 超链接 --- 锚链接

实现在单个页面中, 不同位置的跳转

在同一个页面下: 
<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>

<a name="锚名1">内容</a>
<a name="锚名2">内容</a> 

1.定义锚的位置和锚名
2.设置寻找锚的链接

在不同页面下: 
网页1: <a href="网页名称#锚名"></a>
网页2: <a name="锚名">...</a>

15. 链接的扩展功能

邮件:
<a href="mailto:邮箱地址">反馈意见</a>

文件下载:
<a href="下载文件的地址">下载文件</a>

antd的Form表单使用

匿名写法

import {Form} from 'antd';
const CollectionCreateForm = Form.create({name: 'form_in_modal'})(
     class extends React.component {
          render() {
               const {form} = this.props;
               const {getFieldDecorator} = form;
               return (...)
          }
    }
)

wrappedComponentRef属性

class DeviceEdit extends React.Component {
     render () {
           ...
           <CollectionCreateForm
                   wrappedComponentRef={this.saveFormRef}
           />
     }

    saveFormRef = (formRef) => {
         this.formRef = formRef;
    }
}

<CollectionCreateForm>获取的是匿名组件class extends React.component的ref

非匿名写法:
     class Demo extends React.component {
          render() {
               const {form} = this.props;
               const {getFieldDecorator} = form;
               return (...)
          }
    }
   const EnhancedDemo = Form.create({name: 'demo'})(Demo);

<EnhancedDemo> === <CollectionCreateForm>
<EnhancedDemo>的wrappedComponentRef属性返回 >>> Demo
<CollectionCreateForm>的wrappedComponentRef属性返回 >>> 匿名组件

Mac MongoDB 安装

https://www.jianshu.com/p/bb77f8be67f4

1. 从官网上下载压缩包

2. 解压到安装目录

默认目录为/usr/local，解压完成后修改文件夹名称为(mongodb)删掉后面的版本号，这一步也可以使用终端来完成：

# 1. 解压文件
tar -zxvf mongodb-osx-ssl-x86_64-3.4.10.tgz

# 2. 新建mongodb文件夹
mkdir -p mongodb

# 3. 将mongodb拷贝到新文件夹
cp -R -n mongodb-osx-ssl-x86_64-3.4.10/ mongodb

3.将安装目录添加到系统环境变量中

(1) 在终端中输入：export PATH=/usr/local/mongodv/bin:$PATH
(2) 如果你的mongodb不在此路径中安装，那么将上面path后面的路径替换为mongodb的安装路径。
注意：这样添加环境变量的方式只在当前打开的终端中有用，要想永久配置该变量请使用下面方法：

(3) 我的做法是: 将名字修改为mongodb的文件夹, 复制到/usr/local/目录下
(4) /usr路径为: 打开命令行 cd .. cd ..

(5) 打开当前用户环境变量配置文件：在终端中输入sudo vi ~/.bash_profile
(6) 在文档中加入你的安装路径export PATH=$PATH:/usr/local/mongodv/bin，保存即可。（英文输入状态下按字母i，进行编辑；按esc后输入:wq保存离开

$  sudo vi ~/.bash_profile
export PATH=$PATH:/usr/local/mongodv/bin
~
~
~

(7) 终端中使用source .bash_profile更新配置，使配置文件生效（此步骤可以用重启终端代替）
这一步, 我采用重启终端
(8) 使用echo $PATH查看当前系统环境变量

$ echo $PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/mongodb/bin

(9) 此时mongodb已经开启, 输入mongo命令

React-Redux connect使用装饰器来写

由于使用antd-mobile, 在之前经过一些配置, 在这里对根目录下的config-overrides.js进行修改

const {
    override, 
    fixBabelImports, 
+   addDecoratorsLegacy
       } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css'
  }),
+ addDecoratorsLegacy()
);
+ 表示新增语句

html_build_web

搭建网页结构

2-1.div和span标签

  • div标签
1.div标签是一个区块容器标记, <div></div>之间是一个容器,
可以包括段落, 表格, 图片等各种HTML元素
  • span标签
1.没有任何意义, 为了应用样式
  • 块级标签
p, div, ol, ul, li, dl, dt, dd, h1~h6, form, hr
  • 行内标签
em, img, input, a, sup, sub, textarea, span

2-6.标签嵌套规则

  • 块级元素可以包含行内元素和某些块级元素
<div> --- 正确
    <h1></h1>
    <a></a>
</div>
  • 行内元素不能包含块级元素, 只能包含其他的行内元素
<a> --- 错误
    <h1>123</h1>
    <div>456</div>
</a> 
<span><em></em></span> --- 正确
  • 块级元素不能放在p标签内
<p> --- 错误, 但能够执行
<h1>666</h1>
<div>888</div>
</p>

会被解析成: 
<p></p> 
<h1>666</h1>
<div>888</div>
<p></p>
  • 特殊块级元素只能包含行内元素, 不能再包含块级元素
这些元素有: h1~h6, p, dt
  • 块级元素与块级元素并列, 行内元素和行内元素并列
<div><h1></h1><p></p></div> --- 正确
<div><span></span><a href=""></a></div> --- 正确
<div><h1></h1><span></span></div> --- 错误

2-10.熟悉网页结构, 分析别人制作的网页

1.对设计图进行观察与分析

导入/导出的几种写法

export

export const hello1 = () => {
   console.log('[const 变量函数]');
}

export function hello2(){
   console.log('[function 函数]');
}

import {hello1, hello2} from './mod2'

export default

export default function hello3() {
    console.log('[function 函数 export default]');
}
import hello3 from './mod2';

export default (state = defaultState, action) => {
   switch(action.type){
      default:
         return state;
   }
}
import mod2 from './mod2'l

引用所有*

import * as mod2 from './mod2';

mod2.hello1();
mod2.hello2();
mod2.hello3();
mode.hello4();

react项目中设置异步默认值

  • 把要作为默认值的参数, 请求数据后, 在redux中先处理好, 并设置相应的字段
const defautlState = fromJS({
    groupName: '' //  这个字段将作为默认值
});
  • 在组件中设置state
  • 在componentWIllReceiveProps()监听值变化, 同时设置到组件state中去.

对屏幕适配进行总结

对屏幕适配进行总结

  • 本文不是做网页端和手机端之间的任意适配.
    1.代码
<div className='container'>
    <div className='leftContent'>
        <item></item>
        <item></item>
        <item></item>
        <item></item>
        <item></item>
        ...
    </div>
    <div className='rightSidebar'>
    </div>  
</div>

2.rightSidebar宽度固定, 不随网页宽度的变化而变化
3.container和leftContent宽度根据网页宽度的变化而变化
4.css代码:

<div className='container'>...</div>
@media screen and (max-width: 1400px) {
    width: 980px;
}
width: 1160px;
上述代码表示: 
    当网页宽度<=1400px时, width === 980px
    当网页宽度>1400px时, width === 1160px
    以1400px作为分界线

-----
<div className='leftContent'>    
@media screen and (max-width: 1400px) {
    width: 720px;
}    
width: 900px;
上述代码表示:
    当网页宽度<=1400px时, width === 720px
    当网页宽度>1400px时, width === 900px
    以1400px作为分界线
    
-----    
<item>...</item>
item盒子模型宽度 = item宽度(160px) + marginRight(20px) 
    + 没有marginLeft + 没有padding + 没有border
    = 180px

所以, 屏幕适配的结果是能够让 <div className='leftContent'> 在一行中多放置一个<item>盒子模型

网页宽度 <= 1400px时,
720px/180px = 4个<item>盒子模型;

网页宽度 > 1400px时,
<div className='container'>由 1160px - 980px = 180px;
<div className='leftContent'> 由 900px - 720px = 180px;
180px === 正好等于一个<item>盒子模型的宽度               

在之后使用时, 需要简单计算
1.计算<item>盒子模型的宽度
2.以网页的多少宽度(上面是1400px)作为分界线
3.根据<item>盒子模型的宽度, 来计算 <= 1400px 时宽度 和 > 1400px 时宽度
after - before = <item>盒子模型宽度

使用es6语法

1.安装: npm install --save-dev babel-cli babel-preset-env

2.创建文件: .babelrc

{
    "presets": ["env"]
}

3.修改package.json

{
    "start": "nodemon --watch server --exec babel-node server/index.js"
}
--watch server >>> 监听 /server/index.js文件

4.运行

npm start 启动

不使用float, 实现靠做靠右布局

1.左侧 = 设备图标 + 设备id
2.右侧 = 设备设置 + 设备更多 按钮
3.html代码:

 <Header>
          <Icon type='desktop'/>
          <span className='title'>{data.id}</span>
          <span className='auto'></span> --- 关键代码
          <Icon type='setting' theme="filled" style={{marginRight: 5}} onClick={() => console.log('icon modify')}/>
          <Icon type='ellipsis' rotate={90} onClick={() => console.log('icon modify')}/>
</Header>

4.css代码:

export const Header = styled.div`
  display: flex;
  align-items: center; // 在交叉轴上的对齐方式
  max-height: 40px;
  min-height: 40px;
  border-bottom: 1px solid #545860;
  margin-bottom: 10px;
  color: #fff;
  .title {
    padding-left: 10px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .auto {
    margin-left: auto !important;    --- 关键代码
  } 
  
  // background: gold;
`;

5.实现效果
屏幕快照 2019-11-08 下午4 52 43

git错误总结

https://www.jianshu.com/p/1a5b25c86415

错误1:

Administrator MINGW32 /d/blog (dev)
$ git checkout master
error: Your local changes to the following files would be overwritten by checkout:
        .idea/workspace.xml
Please commit your changes or stash them before you switch branches.
Aborting

错误的原因是：直接在远程仓库包操作了，修改了github上面的东西，相当于服务器上面的东西，而本地没有修改，当想改变分支的时候，出现了改变分支的时候会重写文件，所以必须把修改的提交到版本库里面。或者是隐藏在你切换分支之前。

解决方法:

抛弃本地的修改，回到上一个版本
git reset --hard
然后，切换你的分支
git checkout master

react, js 对数组的处理

1.对数组中的数据进行更新(删除1个, 并用1个新元素来替代被删除元素)

代码来自: antd/表格/可编辑行/save()函数

save(form, key){
    form.validatorFields((err, row) => {
        if(err) {return}
        // 这里开始学习
       const newData = this.state.data; // 源数据
       const index = newData.findIndex((item => item.key === key));
       if(index > -1) {
          // 表示找到
          const item = newData[index];
          newData.splice(index, 1, { // 删除 index 元素, 并用一个新元素来替代被删除元素
                    ...item, // 原来的数据
                    ...row // 更新的数据
          })
       // 结束学习
          this.setState({data: newData, editingKey: ''});
       }else {
          // 表示没有找到
          newData.push(row);
          this.setState({data: newData, editingKey: ''});
       }
    })
}

React基础

第一部分: 简介(后续补上)

第二部分: 基础

第三章

1.占位符

import React, {Component, Fragment} from 'react';

class TodoList extends Component {
	render() { --- (1)
		return (
			<Fragment> ---(2)
				<div></div>
			</Fragment>
		)
	}
}

(1) 组件显示的内容通过render()函数来进行返回.
(2) 在JSX语法中, 我们要求一个组件render()函数返回的内容, 外层必须有一个包裹元素 --- 占位符.

2.React中响应式设计**和事件绑定

(1)响应式设计**

	this.state = {inputValue: ''};
	<input value= {this.state.inputValue}/>

(2)事件绑定

	<input onChange={this.handleInputChange} />
	handleInputChange() {
		// ...
	}

3.在React中:

(1)我们只需要操作数据, 不需要直接操作DOM.
(2)React会自动感知到数据的变化, 自动帮你去生成DOM, 将数据映射到页面上.
(3)例子: input输入框值改变 >>> 操作数据, 修改inputValue的数据.
(4)例子: 删除功能 >>> 操作数据, 删除list[]数组中的数据.

4.constructor():

(1))可以在constructor中用来"定义数据".
(2)当我们去使用这个组件的时候, constructor()这个构造函数会优于其他任何函数, 会自动的/优先的被执行.
(3)constructor()最优先被执行.

constructor(props) {
	super(props);
	this.state = {
		inputValue: ''
	};
}

5.JSX语法:

(1)在JSX语法中, 使用"JS表达式"或"JS变量", 需要加上"{}"
(2)
(3)
例子: JS表达式

	case1: 事件绑定
	<input onChange={this.handleChange}/>
	handleChange() {
		// ...
	}
	case2: 循环
	{
		this.state.list.map(()=> {...})
	}

例子: JS变量

	this.state = {inputValue: ''};
	<input value= {this.state.inputValue}/>
	inputValue表示"JS变量"

()
()
()
()

6.React的含义

(1)React在英文中是响应的意思.

7.e.target和e.target.value

(1)e.target: 表示框对应的DOM节点
(2)e.target.value: 表示框对应的DOM节点上的值
(3)例子:

	<input onChange={this.handleChange}/>
	handleChange(e) {
		console.log(e.target); --- <input>框对应的DOM节点
		console.log(e.target.value); --- <input>框对应的DOM节点上的值
	}

7.受控组件

(1)例子: 输入框中的数据变化
()
()

8.非受控组件

9.修改state

(1)推荐使用this.setState(() => {...}); 接收一个函数作为参数.

简单对象:
const value = e.target.value;
this.setState(()=>({
	inputValue: value
}));

接收一个参数prevState
this.setState((prevState) => ({
	list: [...prevState.list, prevState.inputValue],
}));
prevState: 表示你修改数据之前的数据是什么样的.
prevState === this.state

不使用es6写法
this.setState((prevState) => {
    const list = [...prevState.list];
    list.splice(index, 1);
    return {list}
});

10.绑定this

(1)将使用的函数都写在constructor()构造函数中

constructor(props) {
	super(props);
	this.handleInputChange = this.handleInputChange.bind(this);
}

<input onChange={this.handleInputChange}/>

(2)使用的函数带参数:

constructor(props) {
	super(props);
	this.handleDeleteItem = this.handleDeleteItem.bind(this);
}

<li onClick={() => this.handleDeleteItem(index)}/>

11.state唯一性

(1)操作数组: list: [...prevState.list, prevState.inputValue]
使用[...]表示从原来的list[]数组上拷贝一份, 然后在拷贝件上做修改.
(2)操作字符串: 直接修改

12.循环:

(1)循环是JS表达式:

	{
		this.state.list.map((item, index)=> {
			return <li>{item}</li>
		})
	}

(2)key值: 放在循环最外层的元素上.

	return <li key={item}>{item}</li>

(3)循环提取到一个函数中:

	<ul>
		{this.getTodoList()}
	</ul>
	
	getTodoList() {
		return this.state.list.map((item, index)=> {
			return <li>{item}</li>
		})
	}

13.组件和元素

(1)组件 --- 首字母大写
(2)元素 --- 首字母小写

14.注释

(1)JSX注释: {/JSX注释/}
(2)html注释:
(3)css注释: /css注释/

15.重命名

(1)class >>> className
(2)for >>> htmlFor

<label htmlFor="insertValue">输入</label>
<input id="insertValue"/>

16.不转义

(1)dangerouslySetInnerHTML

<li
	key={index}
	onClick={() => this.handleItemDelete(index)}
	dangerouslySetInnerHTML={{__html: item}}
>
</li>

{{}}: 
第一层{}表示是一个JS表达式
第二层{}表示JS表达式是一个对象

不转义存在XXS攻击的可能

17.组件间通信:

(1)父组件 >>> 子组件

<TodoItem content={item} index={index}/> --- 通过属性的方式传递
props >>> this.props.content
props >>> this.props.index

(2)子组件 >>> 父组件

本质上, 子组件调用父组件的方法来修改父组件的内容
流程:
1.子组件创建一个方法.
2.在子组件中调用父组件的方法.

<div onClick={this.handleClick}>
	...
</div>

handleClick() {
	const {deleteItem, index} = this.props;
	deleteItem(index);
}

18.围绕React衍生出的思考

(1)声明式开发
声明式开发 --- React会根据数据构建DOM, 节约大量DOM操作的代码.
命令式开发 --- Jquery, 直接操作DOM, 命令式编程, 60%~70%的DOM操作.
(2)可以与其他框架并存
React只负责<div id="root"></div>下的内容
(3)组件化
(4)单向数据流
(5)React视图层框架
视图层: 数据和页面渲染上的问题
组件间的传值, React并不关心
(6)函数式编程
方便测试, 前端自动化测试

** setState()是一个异步函数.

react生命周期

1.第一次渲染

  • componentWillMount
  • render
  • componentDidMount

2.卸载

  • componentWillUnmount

3.第二次渲染

  • componentWillMount
  • render
  • componentDidMount

4.State Change

  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

5.Props Change

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

redux-devtools-extension插件配置

调试工具

方式1:

import {createStore, applyMiddleware, compose} from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';

const composeEnhancers = 
     window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk), // 表示在创建store时， 会使用redux-thunk中间件
);

const store = createStore(reducer, enhancer);

export default store;

方式2:

const store = createStore(counter, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : f => f
));

css样式使用方法区别

类别 引入方法 位置 加载
行内样式 开始标签内style html文件内 同时
内部样式 <head>中<style>内 html文件内 同时
外部样式 <head>中<link> 引用 css样式文件
与html文件分离		 页面加载时, 同时加载css样式
导入式 在样式代码最开始处 css样式文件
与html文件分离		 在读取完html文件后加载

mongodb技巧总结

1.create_time字段定义

{
    "create_time": {type: Number, default: new Date().getTime()}
}

create-react-app下本地数据mock

  1. 在create-react-app项目下的public下， 新建api文件夹
  2. 在api文件夹下新建blackboardlist.json， 并输入模拟数据
  3. 删除package.json中代理, "proxy": "................................"
  4. 运行
 axios.get('/api/blackboardlist.json').then().catch();
 实际请求发送地址: http://localhost:3000/api/blackboardlist.json
 会捕捉到/public/api/blackboardlist.json, 并返回数据.
 这样就不需要使用Charles了

antd <Menu>组件 - 只展开当前父级菜单

点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。

  // 子菜单开关监听事件
  onOpenChange = (openKeys) => {
    let lastestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (this.rootSubmenuKeys.indexOf(lastestOpenKey) === -1) {
      this.setState({openKeys});
    } else {
      this.setState({
        openKeys: lastestOpenKey ? [lastestOpenKey] : []
      })
      ;
    }
  };

/*

  • 组件的onOpenChange属性:
  • 1.监听哪些组变化了
  • 2.举例
  • group1 --- 默认打开的
  • 192.168.1.111
  • group2
  • group3
  • 3.当点击group2, 会有2种变化
  • (1)group1关闭
  • (2)group2展开
  • 所以openChange(openKeys) >>> 返回变化的2种组名 >>> ['group1', 'group2']
  • 4.当点击group3, 会有2种变化
  • (1)group1关闭
  • (2)group3展开
  • 所以openChange(openKeys) >>> ['group1', 'group3']
  • 5.当点击group1, 没有变化
  • 所以openChange(openKeys) >>> [] 一个空数组
  • 6.返回数组解析:
  • [关闭的group名字, 展开的group名字]
  • 7.state控制group组的展开状态
  • state = {
  • openKeys: [''] // 单个展开的子菜单
  • openKeys: ['', ''] // 多个展开的子菜单
  • }
  • 8.点击已经展开项, openKeys = [];
  • 9.流程:
  • (1)找出openKeys中的展开项
  • openKeys: [当前展开项, 等待展开项]
  • state: {openKeys: [当前展开项]}
  • (2)判断展开项是否在this.rootSubmenuKeys数组中
  • 是 >>> 设置新的展开项 >>> this.state({openKeys: lastestOpenKey}) >>> 单个展开的子菜单
  • 不是 >>> 设置多个展开项 >>> this.state({openKeys}); // [group1, group5] >>> 多个展开的子菜单
  • 10.流程2: (点击已经展开项)
  • (1)openKeys, 比较特殊, 是一个[]
  • (2)展开项 === undefined
  • (3)判断展开项
  • 不是 >>> 设置多个展开项, 比较特殊[] >>> this.setState({openKeys}) >>> this.setState({openKeys: []}) >>> 当前没有展开项
  • */

css_bg_list

CSS背景和列表

CSS背景样式

  • background-color: 设置元素的背景颜色
  • background-image: 把图像设置成背景
  • background-position: 设置背景图像的起始位置
  • background-attachment: 设置背景图像是否固定或随页面滚动
  • background-repeat: 设置背景图像是否重复及如何重复
  • background: 简写属性

CSS列表样式

  • list-style-type: 设置列表项标志类型
  • list-style-image: 将图像设置成列表项标志
  • list-style-position: 设置列表项位置
  • list-style: 简写属性

2-1.background-color

  • 设置元素的背景颜色
background-color: 颜色 | transparent

(1)默认值: transparent
(2)颜色 === 颜色名/rgb/十六进制
(3)背景区包括padding, border, 但不包括margin

设置背景颜色为红色: 
background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);
  • border --- 如果不设置边框border的颜色, 边框border的颜色默认 === 字体的颜色

2-4.background-image

  • 把图像设置成背景
background-image: url | none;

(1)默认值: none
(2)url可以是绝对地址, 也可以是相对地址
(3)元素的背景占据了元素的全部尺寸, 包括padding, border, 但不包括margin
(4)默认地, 背景图像位于元素的左上角, 并在水平和垂直方向上重复.
  • 如果同时设置了background-color和background-image, 那么background-image会覆盖background-color
  • 两者都设置, 为了在background-image没有加载时, 此时可以显示背景颜色.

2-7.background-repeat

  • 设置背景图像的是否重复及重复方式
background-repeat: no-repeat | repeat | repeat-x | repeat-y

(1)默认值: repeat
(2)no-repeat: 背景图像不重复
   repeat: 背景图像水平方向和垂直方向上重复
   repeat-x: 背景图像水平方向上重复
   repeat-y: 背景图像垂直方向上重复
(3)只有在设置了background-image时, 才会生效

2-8.background-attachment

  • 设置背景图像是否固定或随页面滚动
background-attachment: scroll | fixed

(1)默认值: scroll
(2)scroll: 背景图片随滚动条滚动而滚动.
   fixed: 当页面其他部分滚动时, 背景图像不会移动

2-12.background-position

  • 设置背景图像的起始位置
background-position: 百分比 | 值
              top | right | bottom | left | center

(1)默认值: 左上角
(2)只写一个参数的话, 第二个默认为居中(水平居中/垂直居中)
(3)top: 顶部显示, 垂直方向0%, 水平居中
(4)bottom: 底部显示, 垂直方向100%, 水平居中
(5)left: 左侧显示, 水平方向0%, 垂直居中
(6)right: 右侧显示, 水平方向100%, 垂直居中
  • 如果不显示, 可能是由于background-position针对整个网页的

屏幕快照 2019-10-02 下午11 22 33

屏幕快照 2019-10-02 下午11 22 39

2-16.background简写属性

  • 简写属性
background: [background-color] [background-image]
            [background-repeat] [background-attachment]
            [background-position]
 
(1)各值之间用空格隔开, 不分先后顺序

3-1.list-style-type

  • 设置列表项标志类型
list-style-type: 关键字 | none;

(1)默认值:
    a.无序列表默认值: disc
    b.有序列表默认值: decimal
(2)无序列表:
    none: 无标记
    disc: 实心圆
    circle: 空心圆
    square: 实心方块
(3)有序列表:
    none: 无标记
    decimal: 从1开始整数
    lower-roman: 小写罗马字母
    upper-roman: 大写罗马字母
    lower-alpha: 小写英文字母
    upper-alpha: 大写英文字母

3-4.list-style-image

  • 将图像设置成列表项标志
list-style-image: url | none;

(1)默认值: none;
(2)url: 图像的路径

3-6.list-style-position

  • 设置列表项位置
list-style-position: inside | outside

(1)默认值: outside
(2)outside: 文本不环绕标志
   inside: 文本环绕标志

3-9.list-style简写属性

  • 简写属性
list-style: [list-style-type] [list-style-image]
            [list-style-position]

(1)各值之间用逗号隔开, 不分先后顺序
(2)list-style-image会覆盖list-style-type

4-1.课程总结

  • background-color和background-image不包含margin

md5 加密

实现md5加密

插件 utility

npm install --save-dev utility

编写方法

const utils = require('utility');

function md5Pwd(pwd){
   const salt = 'diadem_adinno_1234567890~!@#$%^&*()';
   return utils.md5(utils.md5(pwd+salt));
}

使用

UserModel.create({user, pwd: md5Pwd(pwd), phone, type}, ...)

CSS+HTML基础

Html和CSS的关系

1-1.学习web前端开发基础技术:

(1) HTML --- HTML是网页内容的载体. 网页内容包括: 文字, 图片, 视频等.
(2) CSS --- CSS样式是表现, 网页的外衣. CSS样式包括: 标题字体, 颜色变化, 为标题添加背景图片, 边框等.
(3) JavaScript --- 来实现网页上的特效效果. 有动画, 有交互的一般都是通过JavaScript来实现. 特效效果包括: 鼠标滑过弹出下拉菜单, 鼠标滑过表格背景颜色改变等.

1-2.HTML页面是由html标签组成的.

1-3.网页中每一个内容在浏览器中的显示, 都要存放在各种标签中.

总结: html标签 +网页内容 >>> 组成html页面 >>> 在浏览器中显示.

1-4.标签的语法:

(1) 标签一般成对出现, 有: 开始标签和结束标签.
<h1>12345678</h1>

Command Description
<h1> 开始标签
12345678 标签内容
</h1> 结束标签

(2) 标签可以嵌套.
(3) HTML标签不区分大小写.
(4) 常用标签:

	(1)<h1></h1> --- 标题标签
	(2)<p></p> --- 段落标签

1-5.认识html文件基本结构:

<html>
    <head></head>
    <body></body>
</html>
(1) <html></html> --- 根标签, 所有网页标签都在<html></html>中
(2) <head></head> --- 定义文档的头部, 是所有头部元素的容器. 
                  --- 头部元素有: <title>, <script>, <style>,<link>, <meta>
(3) <body></body> --- 网页主要内容, 有<h1>, <p>, <a>, <img>

1-6.认识head标签:

(1) title标签: 网页标题信息, 它会出现在浏览器的标题栏中.
(2) 网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么, 搜索引擎可以通过网页标题, 迅速
的判断出网页的主题.

1-7.HTML的代码注释:

<!--注释文字-->

2-1.语义化

(1) 记住学习html标签过程中, 学习两方面: 标签的用途和标签在浏览器中的默认样式.
(2) 语义化: 明白每个标签的用途

Command Description
文章的标题 标题标签
栏目名称 标题标签
文章中内容的段落 段落标签
文章中强调的文本 em标签

2-2.<body>标签, 网页上显示的内容放在这里

2-3.开始学习<p>标签

(1)<p>标签的用途: 显示文章段落, <p>段落文本</p>
(2)<p>标签在浏览器中的默认样式: <p>标签的段前段后都会有空白, 可以通过css样式来删除或改变它.

2-4.学习<hx>标签

(1)<hx>标签的用途: 制作文章标题, <hx>标题文本</hx>
(2)<hx>标签在浏览器中的默认样式: 
<body>
    <h1>一级标题</h1> --- 重要等级最高, 字体样式加粗, 字体最大
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6> --- 重要等级最低, 字体样式加粗, 字体最小
</body>

2-5.学习<strong>和<em>标签

(1)<strong>和<em>标签的用途: 加强语气, <em>表示强调, <strong>表示更强烈的强调. 
                           <em>需要强调的文本</em>
                           <strong>需要强调的文本</strong>
(2)标签在浏览器中的默认样式: <em>的内容默认斜体表示, <strong>的内容默认粗体(加粗)表示.
                         可以通过css样式来删除或改变它.

2-6.使用<span>标签

(1)<span>标签的用途: 没有语义, 为文字设置单独样式. <span>文本</span>
(2)<span>在浏览器中的默认样式:

2-7.学习<q>标签

(1)<q>标签的用途: 短文本引用. <q>引用文本</q>
(2)<q>在浏览器中的默认样式: 给要引用的文本加上双引号

2-8.学习<blockquote>标签

(1)<blockquote>标签的用途: 长文本引用. <blockquote>引用文本</blockquote>
(2)<blockquote>标签在浏览器中的默认样式: <blockquote>的内容会前后**缩进**.

2-9.学习<br>标签

(1)<br>标签的用途: 在html中分行显示文本. <br/>, **空标签**
(没有html内容的标签, 只需要写一个开始标签)
(2)<br>标签在浏览器中的默认样式: 换行
(3)**注意: 在html中是忽略回车和空格的.**

2-10.学习空格&nbsp;

(1)&nbsp;的用途: 在html中显示空格. &nbsp;
(2)&nbsp;在浏览器中的用途: 空格
(3)**注意: 在html中是忽略回车和空格的.**

2-11.学习<hr>标签

(1)<hr>标签的用途: 添加水平横线. <hr/>, **空标签**(没有html内容的标签, 只需要写一个开始标签) 
(2)<hr>标签在浏览器中的默认样式: <hr/>默认样式为心跳比较粗, 颜色为灰色, 可以通过css样式来改变它.

2-12.学习<address>标签

(1)<address>标签的用途: 为网页加入地址信息. <address>联系地址信息</address>
(2)<address>标签在浏览器中的默认样式: <address>默认样式为斜体, 可以通过css样式来改变它.

2-13.学习<code>标签

(1)<code>标签的用途: 加入一行代码. <code>代码语言</code>
(2)<code>标签在浏览器中的默认样式: 单行代码
(3)代码:
<code>var i = i + 300;</code>

2-14.学习<pre>标签

(1)<pre>标签的用途: 加入多行代码. <pre>语言代码段</pre>
(2)<pre>标签在浏览器中中的默认样式: 多行代码. 
预格式化文本, **保留<pre>中内容的空格(&nbsp;)和换行符(<br/>**)
(3)代码:
<pre>    
var message="欢迎";
for(var i=1;i<=10;i++){
    alert(message);
}
</pre>

测试, 将html标签以表格的形式呈现

标签名字 用途 语法 默认样式 css修改 描述
<blockquote> 长文本引用 非空标签 前后缩进 描述 描述 
(1)空标签 --- <br/>, <hr/>, ...
(2)非空标签 --- <span>文本内容</span>, ...

3-1.使用<ul>标签

(1)<ul>标签的用途: 添加列表. ul-li是没有前后顺序的信息列表.
	<ul>
	   <li>信息</li>
	   <li>信息</li>
	   ...
	</ul>
(2)<ul>标签在浏览器中的默认样式: 每项<li>前都自带一个圆点.

3-2.使用<ol>标签

(1)<ol>标签的用途: 添加列表. ol-li是有前后顺序的信息列表.
	<ol>
	   <li>信息</li>
	   <li>信息</li>
	   ...
	</ol>
(2)<ol>标签在浏览器中的默认样式: 每项<li>前都自带一个序号, 序号从1开始.

3-3.学习<div>标签在排版中的作用

(1)<div>标签在排版中的作用: 在网页制作过程中, 可以把一些独立的逻辑划分出来,
 放在一个<div>标签中, 这个<div>标签的作用相当于一个容器. <div>...</div>
(2)确定逻辑部分: 它是页面上相互关联的一组元素.

3-4.给<div>命名

(1)给<div>命名的用途: 为了使划分出独立的逻辑部分更加清晰, 设置一个名称, 用id表示, id唯一. 
<div id="板块名称">...</div>

3-5.学习<table>标签

(1)<table>标签的用途: 制作表格. 
(2)<table>标签在浏览器中的默认样式: <table>表格默认没有表格线, 可以通过css样式改变它(添加表格线). <th>标签默认文本为粗体+居中.
(3)制作表格的四个元素: <table>, <tbody>, <tr>, <th>, <td>
a.<table>...</table>: 整个表格以<table>标签开始, 以</table>标签结束
b.<tbody>...</tbody>: 如果不加<tbody>, <thead>, <tfooter>表格结构, <table>表格加载完才显示.
                      如果加上<tbody>, <thead>, <tfooter>表格结构, <tbody>包含行的内容, 下载完, 优先显示. 
c.<tr>...</tr>: 表格的一行.
d.<td>...</td>: 表格的一列.
e.<th>...</th>: 表格的一列(表格表头).

(4)<thead>, <tfooter>和<tbody>使用方法相同: <th>标签写在<thead>标签中.
<table>
  <thead>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th> 
    </tr>        
  </thead>
  <tbody>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
    <tr>
      <td>三班</td>
      <td>32</td>
      <td>80</td>
    </tr>
   </tbody>
   <tfooter>
    <tr>
      <td>总计</td>
      <td>97</td>
      <td>254</td>
    </tr>
   </tfooter>
</table>

3-6.用css样式, 为表格加入边框.

(1)用途: 为表格加入边框.
(2)css代码: table tr th,td{border:1px solid #000;}

3-7.学习<caption>标签

(1)<caption>标签的用途: 对表格添加标题和摘要进行优化. 
					  a.摘要: 摘要的内容不会在浏览器中显示出来. 作用是增加表格的可读性(语义化), 使搜索引擎更好的读懂表格的内容. <table summary="表格简介文本"> 
					  b.标题: 描述表格内容. <table><caption>标题文本</caption>...</table>
(2)<caption>在浏览器中的默认样式: <caption>标签为表格加标题, 居中显示.
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
  <caption>2012年到2013年库存记录</caption>
  <tr>
    <th>产品名称 </th>
    <th>品牌 </th>
    <th>库存量（个） </th>
    <th>入库时间 </th>
  </tr>
  <tr>
    <td>耳机 </td>
    <td>联想 </td>
    <td>500</td>
    <td>2013-1-2</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>金士顿 </td>
    <td>120</td>
    <td>2013-8-10</td>
  </tr>
  <tr>
    <td>U盘 </td>
    <td>爱国者 </td>
    <td>133</td>
    <td>2013-3-25</td>
  </tr>
</table>

4-1.学习<a>标签

(1)<a>标签的用途: 链接到另一个界面. <a href="目标网址" title="鼠标划过显示的文本">链接显示的文本</a>
title作用: 方便搜索引擎了解链接地址的内容(语义化更友好)
(2)<a>标签在浏览器中的默认样式: <a>标签加入后, 文字颜色默认颜色为蓝色, 可以通过css样式修改.

4-2.在新建浏览器中打开链接

(1)<a>标签在默认情况下, 链接的网页是在当前浏览器窗口中打开.
(2)<a>标签在新的浏览器窗口中打开: <a href="目标网址" target="_blank">click here!</a>

4-3.使用mailto

(1)mailto的用途: 链接Email地址, 马上向Email地址发送邮件.
(2)mailto的用法: mailto后面有多个参数, 第一个参数以"?"开头, 后面的参数每一个都以"&"分隔.
(3)mailto放在<a>标签的href属性中使用:
a.subject: 邮件主题
b.body: 邮件内容
c.cc: 抄送
d.bcc: 密件抄送
e.mailto: 收件人

例子1:
<a href="
mailto:yy@imooc.com
?subject=观了不起的盖茨比有感。
&body=你好，对此评论有些想法。
">对此影评有何感想，发送邮件给我</a>

例子2:
<a href="
mailto:yy@imooc.com
?cc=xiaoming@imooc.com
&bcc=xiaoyu@imooc.com
&subject=邮件主题
&body=邮件内容
">对此影评有何感想，发送邮件给我</a>

4-4.学习<img>标签

(1)<img>标签的用途: 插入图片. <img src="图片地址" alt="下载失败时的替换文本" title="鼠标划过图片时显示的文本"/> 
(2)<img>在浏览器中的默认样式: <img>标签可以是jpg, png, gif

5-1.使用<form>表单标签, 与用户交互

(1)<form>表单标签的用途: 与用户进行交互. 
<form>表单可以把浏览者输入的数据传送到服务器端, 这样服务器端程序就可以处理表单传过来的数据.
<form method="传送方式" action="服务器文件"/>
(2)<form>表单标签在浏览器中的默认样式: 
a.<form>标签: <form>标签是成对出现的, 以<form>开始, 以</form>结束.
b.action属性: 浏览者输入的数据被传送到的地方.
c.method属性: 数据传送的方式(get/post)
(3)!!!注意!!!: 所有的表单控件(
	文本框: <input>标签,
	文本域: <textarea>标签,
	按钮: <button>标签 或 <input type="submit" value="提交"/>
	单选框: <radio>标签,
	复选框: <checkbox>标签	
)都必须放在<form></form>标签之间, 否则用户输入的信息不会提交到服务器上
(4)<form>表格标签2个属性: method, action

5-2.文本输入框, 密码输入框(使用<input>标签实现)

(1)文本输入框, 密码输入框的用途: 当用户在表单中输入字母, 数字等内容时. 
<form>
   <input type="text/password" name="名称" value="文本"/>
<form>   
(2)文本输入框, 密码输入框在浏览器中的默认样式:
type:
a.当type="text"时, 输入框为文本输入框.
b.当type="password"时, 输入框为密码输入框.

name: 为文本框命名, 以备后台使用.

value: 为文本框输入默认值.
(3)<input>标签作为输入框的3个属性: type, name, value

5-3.文本域, 支持多行文本输入(使用<textarea>实现)

(1)<textarea>标签的用途: 支持多行文本输入.  <textarea rows="行数" cols="列数">文本</textarea>
(2)<textarea>标签在浏览器中的默认样式: 
a.<textarea>标签:  <textarea>标签是成对出现的, 以<textarea>开始, 以</textarea>结束
b.cols: 多行输入域的列数
c.rows: 多行输入域的行数
!!!注意!!! cols和rows属性可以用css样式width和height来代替: col用widht代替, row用height代替.
(3)<textarea>标签可以输入默认值: <textarea>在这里输入默认值...</textarea>
(4)<textarea>的2个属性+默认值: cols, rows, 文本作为默认值

5-4.单选框, 复选框(使用<input>实现)

(1)单选框, 复选框的用途: 使用表单设计调查表.
<input type="radio/checkbox" name="名称" value="值" checked="checked"/>
(2)单选框, 复选框在浏览器中的默认样式:
type:
当type="radio"时, 控件为单选框.
当type="checkbox"时, 控件为复选框.

name: 为控件命名, 以备后台使用.

value: 提交数据到服务器的值.

checked: 当设置checked="checked"时, 该选项被默认选中.
(3)<input>标签作为单选框, 复选框的4个属性: type, name, value, checked
(4)同一组的单选按钮, name属性取值一定要一致, 才能起到单选效果.
<input type="radio" name="radioLove" value="喜欢" checked="checked"/>
<input type="radio" name="radioLove" value="不喜欢"/>
<input type="radio" name="radioLove" value="无所谓"/>

5-5.下拉列表框进行单选(使用<select>实现)

(1)<select>标签的用途: 有效的节省网页空间. 可以单选/多选. 
<form>
   <select>
      <option value="向服务器提交的值" selected="selected">显示的值</option>
      <option value="读书">读书</option>
	  ...
   </select>
</form>
(2)<select>标签在浏览器中的默认样式: 
(3)<select>/<option>的2个属性+文本:
value: 向服务器提交的值.
selected: 设置selected="selected", 该选项默认被选中.
文本: 显示的值

5-6.下拉列表框进行多选(使用<select>实现)

(1)<select>标签的用途: 多选.
(2)<select>标签多选设置: <select multiple="multiple"></select>

5-7.使用提交按钮, 提交数据(使用<input>标签)

(1)!!!表单中有2种按钮可以使用!!!: 提交按钮 和 重置
(2)提交按钮的用途: 当用户提交表单信息到服务器时. <input type="submit" value="提交"/>
type: 只有当type值设置为submit时, 按钮才有提交作用.
value: 按钮上显示的文字.
(3)代码:
<form method="post" action="save.php">
   <label for="myName">姓名:</label>
   <input type="text" name="myName" value=" "/>
   <input type="submit" value="提交" name="submit"/>
</form>

5-8.使用重置按钮, 重置表单信息(使用<input>标签)

(1)重置按钮的用途: 重置表单信息到初始状态. <input type="reset" value="重置"/>
type: 只有当type值设置为reset时, 按钮才有重置作用.
value: 按钮上显示的文字.
(2)代码:
<form method="post" action="save.php">
   <label for="myName">姓名:</label>
   <input type="text" name="myName" value=" "/>
   <input type="reset" value="重置" name="resetBtn"/>
</form>

5-9.form表单中的<label>标签

(1)<label>标签的用途: 没有特殊效果, 作用是为鼠标用户改进了可用性. <label for="控件id名称"></label>
如果你在<label>标签内点击文本，就会触发此控件。
就是说，当用户单击选中该<label>标签时，浏览器就会自动将焦点转到和<label>标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
(2)<label>在浏览器中的默认样式: 简单的说, 就是点击<label>标签, for对应id控件响应.
<form>
    <label>你对什么运动感兴趣:</label><br/>
    <label for="run">慢跑</label>
    <input type="checkbox" id="run" checked="checked"/><br/>
    <label for="mounting">登山</label>
    <input type="checkbox" id="mounting"/><br/>
    <label for="basketball">篮球</label>
    <input type="checkbox" id="basketball"/>
</form>

总结<input>标签在表单控件中的应用:

<form>
   // 用途1: 文本输入框, 密码输入框
   <input type="text/password" name="名称" value="文本默认值"/>
   // 用途2: 文本域, 多行输入
   <textarea rows="行数" cols="列数">文本(默认值)</textarea>
   // 用途3: 单选框, 复选框
   <input type="radio/checkbox" name="名称" value="提交到服务器的值" checked="checked"/>
   // 用途4: 提交按钮
   <input type="submit" value="提交"/>
   // 用途5: 重置按钮
   <input type="reset" value="重置"/>
</form>

react redux数据格式统一的问题

使用merge时, 要注意类型统一, 对数据进行fromJS(...)处理
1.如果值是简单类型:
当值为 number, string, boolean时, 不需要fromJS(...)处理了
state.merge({requestQuantity: state.get('requestQuantity') + 1});
state.merge({error: action.error});

2.如果值是复杂类型:
当值为 {}, [] 时, 需要使用fromJS(...)处理, 来保证数据类型统一 state.merge({[action.groupItem.group_id]: Immutable.fromJS(action.groupItem)}); // action.groupItem是一个{}
state.merge({[action.groupItem.group_id]: Immutable.fromJS(action.encodeIds)}); // action.encodeIds是一个[]

css_float

Float浮动

2-1.普通流介绍

  • css定位机制包括: 普通流(标准流) 浮动 绝对定位
  • 普通流:
默认状态: 元素自动从左往右, 从上往下排列

2-2.浮动的基础知识

  • 浮动会使元素向左或向右移动, 只能左右, 不能上下
  • 浮动元素碰到包含框或另一个浮动框, 浮动停止
  • 浮动元素之后的元素将围绕它, 之前的不受影响
  • 浮动元素会脱离标准流
浮动的基本语法:
    float: left; --- 左浮动
    float: right; --- 右浮动
    float: inherit; --- 继承父元素的浮动属性
    float: none; --- 不使用浮动

2-3.使用浮动后产生的问题

  • 高度塌陷

2-4.清除浮动(作用于自身)

  • clear: none | left | right | both;
设置了float的元素对其他相邻元素造成影响, 需要使用clear清除浮动, 
clear只会影响自身, 不会对其他相邻元素造成影响
  • 给设置浮动的元素清除浮动, 不能解决父容器高度塌陷的问题
.box01 {
    width: 100px;
    height: 100px;
    background-color: red;
    color: green;
    float: left;
    clear: both;
}

2-5.清除浮动(解决父容器高度塌陷)

  • 方法一: 在浮动元素后使用一个空元素
<div class="container">
    <div class="box01">11111</div>
    <div class="box02">22222</div>
    <div class="box03">33333</div>
    <div class='clear'></div>
</div>

.clear {
    clear: both; // 元素本身没有设置浮动
}
  • 方法二: 给浮动元素的父容器添加overflow: hidden;
zoom: 1; /*触发hasLayout兼容IE6、7*/

<div class="container">
    <div class="box01">11111</div>
    <div class="box02">22222</div>
    <div class="box03">33333</div>
    <div class='clear'></div>
</div>

.container {
    ...
    overflow: hidden;
    zoom: 1;
}
  • 方法三: 使用CSS3的:after伪元素
在浮动元素后, 添加了一个看不见的盒子
<div class="container clearfix">
    <div class="box01">11111</div>
    <div class="box02">22222</div>
    <div class="box03">33333</div>
</div>

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    zoom: 1;
}

.clearfix {
    zoom: 1;
}

3-1.课程总结

  • 浮动会使元素左右移动
  • 浮动会使元素脱离普通流
  • 元素浮动后具备inline-block(行内块元素)属性
  • 清除浮动方法推荐
1.使用css3 :after 伪元素清除浮动
2.overflow: hidden 清除浮动

块元素特性总结:

  • 独占一行
  • 块元素可以设置宽/高
  • 块元素不设置宽度, 宽度默认为容器的100%
  • 常用的块元素
p, div, h1~h6, ol, ul, li, dl, dt, dd, form, hr

行内元素特性总结:

  • 与其他元素同行显示
  • 行内元素不可以设置宽/高
  • 行内元素的宽/高就是文字或图片的宽/高
  • 常用的行内元素
span, a, em, sup, sub, input, img, textarea

清除浮动的误区

  • 清除浮动分为:
    (1) 2-10.清除浮动元素(自身)的浮动, 它不能解决父容器高度塌陷的问题.
    (2) 2-11.清除浮动, 能够解决父容器高度塌陷的问题.

git上传项目到github

使用git上传代码到Github

  1. https://blog.csdn.net/jasonLee_lijiaqi/article/details/79947741

在github上创建项目, 并记录项目地址:

  1. 例如: https://github.com/253867843/woniu
  2. 例如: https://github.com/253867843/seeitv

使用git克隆项目

  1. 先在本地桌面见一个文件夹, 我们称为仓库, 作用: 是用来存放项目
  2. mkdir Github Repository
  3. cd Github Repository
  4. git clone [项目地址]
git clone https://github.com/253867843/woniu
git clone https://github.com/253867843/seeitv

更新代码

  1. git status
  2. git add *
  3. git commit -m "更新说明"
  4. git pull
  5. git push origin master

当有文件被删除时

  1. git add -A

准备工作

Github配置

  1. 打开webstorm，在file-settings中直接搜索github，然后输入自己github的账号密码
  2. Auth Type选择Password
  3. 点击Test, 出现"connection successful"提示框, 表示配置成功

Git配置

  1. 打开webstorm，在file-settings中直接搜索git, 将git的安装路径输入
  2. 点击Test, 出现"connection successful"提示框, 表示配置成功

SSH配置

  1. 打开命令行, 输入ssh-keygen -t rsa -C "你的邮箱", ssh-keygen -t rsa -C [email protected]
  2. 找到文件, Your public key has been saved in /home/dcj/.ssh/id_rsa.pub.
  3. cat /home/dcj/.ssh/id_rsa.pub >>> 读取密钥, 邮箱不要
  4. 复制密钥
  5. 找到自己github下的/setting/SSH and GPG keys/New SSH key
  6. 添加Title和SSH, Title填写自己的使用地点, 例如: homePC, companyPC等等.

从github上克隆项目

  1. VCS/Checkout from Version Control/Git
  2. 选择你要克隆clone项目的地址, 例如: https://github.com/253867843/seeitv
  3. 选择保存目录, 项目名字不要重复
  4. 指定下载的项目名字

将新项目上传到github

  1. VCS/Import into Version Control/Share Project on Github
  2. 输入描述, 点击Share, 开始上传
  3. 完成上传

将已有项目上传到github

  1. 选中想要上传的文件代码, 右键Git/Commit Files(或者点击/VCS/Commit)
  2. 添加描述说明
  3. 点击Commit And Push
  4. 点击Push

从github上更新已有项目

  1. /VCS/Update Project

解决右键项目, 没有Git选项的问题

  1. 打开/File/Settings/Version Control/
  2. 点击右侧绿色"+"号箭头, 选择你的项目

react登录成功和路由认证下的加载数据

  • 保证登录成功的情况下 和 路由认证下的加载数据loadData(), 获得的返回数据相同
  • react-router的组件,会直接访问路由, 不会从认证路由开始.
    所以希望有默认状态的情况下:
    1.制作好 默认状态 对应的路由
    2.在登录成功后, 利用获得的返回数据, 写一个工具函数util.js, 拼装好redirectTo, 保存在redux中
    3.login组件监听到redux变化, 使用redirectTo 跳转到默认状态的组件页面

html_form

1-1.表单介绍

  • 工作原理
1.访问一个包含表单的页面, 输入数据后"提交"表单
2.浏览器将用户在表单中输入的数据进行打包, 并发送给服务器
3.服务器接收数据并转由程序处理
  • 表单语法:
<form>
    表单元素
</form>

1.form本身不可见, 相当于一个容器
2.表单元素包括: 文本框, 单选框, 复选框, 按钮, 列表
  • HTML表单:
<input> --- 表单输入标签
<select> --- 菜单和列表标签
<option> --- 菜单和列表项目标签
<textarea> --- 文字域标签

2-1.input标签

语法: 
<input type='类型属性' name='名称'/>

text --- 文字域
password --- 密码域 
file --- 文件域
checkbox --- 复选域
radio --- 单选域
Button --- 按钮
Submit --- 提交按钮
Reset --- 重置按钮
Hidden --- 隐藏域
image --- 图像域
  • input标签, text单行文本域属性
语法:
    <form>
        <input type='text' name='...' value='' size='...' maxlength='...'/>
        <input type='password' name='...' value='...' size='...' maxlength='...'/>
    </form>
1.name --- 文字域名称(用于表单元素命名, 数据处理时, 通过name名称来区分) 
2.maxlength --- 指定用户输入的最大字符长度
3.size --- 指定文本框input宽度, 以字符个数为单位, 默认是20个字符
4.value --- 指定文本框的默认值
5.placeholder --- 提示字段
  • input标签, 文件域
语法:
    <form>
        <input type='file' name='...'/>
    </form>
  • input标签, 单选框
语法:
    <form>
        <input type='radio' name='...' value='...' checked/>
        男<input type='radio' name='sex' value='man' checked/>
        女<input type='radio' name='sex' value='woman'/>
    </form>

1.同一组, name值要相同
2.value值'man'和'woman'会被传递给服务器
  • input标签, 复选框
语法: 
    <form>
        <input type='checkbox' name='...' value='...' checked/>
    </form>

1.name值不受限制, 但最好一组对应一个名字, 方便服务器通过name来区分组
读书<input type='radio' name='dx' value='read' checked/>
跳舞<input type='radio' name='dx' value='dance'/>
唱歌<input type='radio' name='dx' value='sing'/>
2.value值会被传递给服务器
  • input标签, 按钮
语法: 
    <form>
        <input type='button' name='...' value='来点我' /> --- 普通按钮
        <input type='submit' name='...' value='...' /> --- 提交按钮
        <input type='reset' name='...' value='...' /> --- 重置按钮
    </form>
  • input标签, 图像域(图像提交按钮)
语法: 
    <form>
        <input type='image' name='...' src='imageUrl' />
    </form> 
1.image定义图像形式的提交按钮
  • input标签, 隐藏域(不想给用户看到, 又想传递给服务器)
语法: 
    <form>
        <input type='hidden' name='...' value='...' />
    </form>
  • input标签, 隐藏域(不想给用户看到, 又想传递给服务器)

3-1.下拉菜单和列表标签 --- select和option

语法: 
    <select name='city' multiple size='6'>
        <option value='...'>文本显示</option>
        <option value='...'>选项</option>
        <option value='...'>选项</option>
        ...
    </select>

1.value的值会传递给服务器
2.<select>标签属性: 
    name: 设置下拉菜单和列表的名称
    multiple: 设置可选择多个选项
    size: 设置列表中可见选项的数目
3.<option>标签属性:
    selected: 设置选项初始选中状态
    value: 定义送往服务器的选项值
4.<select>标签设置了multiple属性和size属性 --- 列表
  <select>标签没有设置multiple属性和size属性 --- 下拉菜单

3-2.分组下拉菜单和列表标签 --- optgroup

语法:
    <select name=''>
        <optgroup label='组1'>
            <option value='...'>选项</option> 
            <option value='...'>选项</option>
            ...    
        </optgroup>
        <optgroup label='组2'>
            <option value='...'>选项</option> 
            <option value='...'>选项</option>
            ...    
        </optgroup>
        ...
    </select>

4-1.文字域标签 --- textarea

语法:
    <textarea name='...' rows='...' cols='...'>
        内容
    </textarea>

5-1.表单属性 --- form

语法: 
    <form action='...' method='...' name='...'>
        表单元素
    </form>

form表单的enctype属性值:
1.默认地，表单数据会编码为 "application/x-www-form-urlencoded".
2.就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
3.一共有这三种：
  （1）application/x-www-form-urlencoded：在发送前编码所有字符（默认）    
  （2）multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
  （3）text/plain：空格转换为 "+" 加号，但不对特殊字符编码。

屏幕快照 2019-10-26 下午5 19 44

总结:

1.value值是传递给服务器的值
2.name值也是传递给服务器的值, 用来分组(radio/checkbox)

html_table

表格

1.表格的操作
2.表格的属性
3.表格的跨行, 跨列的操作
4.表格的嵌套

1.表格的基本结构

<table>表格
<caption>表格标题
<tr>行
<th>列, 表格头, 内容居中, 加粗显示
<td>列, 单元格

<table> 表格开始
    <caption>表格标题</caption>
    <tr>
        <th>...</th> 表格头, 内容居中, 加粗显示
    </tr>
    <tr> 行标签
        <td>...</td> 列标签, 单元格
        ...
    </tr>
    <tr>
        <td>...</td>
        ...
    </tr>
</table> 表格结束

2.表格结构标签 --- 加载一部分, 显示一部分

表格划分三部分:
1.thead: 表头
2.tbody: 表格主体(数据主体)
3.tfoot: 脚注
三个标签需要同时存在, 同时使用


<table>
    <caption>...</caption>
    <thead>
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>主体</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>脚注</td>
        </tr>
    </tfoot>
</table>

3.表格属性table

属性:
width: 表格宽度
align: left, center, right; 表格相对周围元素的对齐方式
border: 表格边框宽度
bgcolor: 表格背景颜色
cellpadding: 单元格和内容之间的空白 px
cellspacing: 单元格和单元格之间的空白
frame: 外边框的显示属性
rules: 内边框的显示属性

4.表格属性tr

属性:
align: left, center, right 水平对齐方式
valign: top, middle, bottom, baseline 垂直对齐方式
bgcolor: 背景颜色 
颜色设置方式: 颜色名称, 十六进制， rgba(...)

5.表格属性td, th

属性:
align: 单元格内容的水平垂直
valign: 单元格内容的垂直对齐
bgcolor: 单元格的背景颜色
width: 单元格的宽度
height: 单元格的高度

如果tr设置过了align和valign, 就不需要在td, th中设置了

6.thead, tbody, tfoot标签属性

属性:
align: left, center, right, thead, tbody, tfooter内容的水平对齐
valign: top, middle, bottom, thead, tbody, tfooter内容的垂直对齐
tbody, tr, td
如果在tbody中设置了属性, 就不需要在tr, td再次设置了

7.表格跨行, 跨列

跨列属性colspan
<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>
改为 
<table>
    <tr>
        <td colspan="2">...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>
删除当前行的下一列

跨行属性rowspan
<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>
改为
<table>
    <tr>
        <td>...</td>
        <td rowspan="2">...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>
删除下一行的第二列

8.表格嵌套

表格嵌套必须写在<td>...</td>标签内
<td>
    <table>表格嵌套
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</td>

react-router路由跳转, 路由追加的问题

解决: 将this.props.location.pathname 改为 this.props.match.path

<Route path={`${this.props.match.path}/deviceSetting`} component={DeviceSetting}/>
this.props.history.push(`${this.props.match.path}/deviceSetting`);

不要这么写:
<Route path={`${this.props.location.pathname}/deviceSetting`} component={DeviceSetting}/>
this.props.history.push(`${this.props.location.pathname}/deviceSetting`);

css_box_module

盒子模型

1-1.课程介绍

  • 盒子模型概念
  • 高/宽设置
  • 边框设置
  • 内边距设置
  • 外边距设置
  • 盒子的计算
  • 元素的显示方式

2-1.盒子模型的概念

  • 网页中每个元素都可以看作一个盒子
  • 盒子有:
    • 外边距 --- margin
    • 边框 --- border
    • 内边距 --- padding
    • 内容 --- content

3-1.盒子模型的属性

1.width属性

宽度: 
    width: 长度值 | 百分比 | auto
 
最大宽度:
    max-width: 长度值 | 百分比 | auto

最小宽度: 
    min-width: 长度值 | 百分比 | auto

max-width: 宽度的最高限制
width: 400px;
max-width: 300px;
最终显示宽度 === 300px;

width: 400px;
max-width: 500px;
最终显示宽度 === 400px;

当宽度width > max-width时, 显示宽度 === max-width;
当宽度width <= max-width时, 显示宽度 === 宽度width;

min-width: 宽度的最小限制
width: 400px;
min-width: 300px;
最终显示宽度 === 400px;

width: 200px;
min-width: 300px;
最终显示宽度 === 300px;

当宽度width >= min-width时, 显示宽度 === 宽度width;
当宽度width < min-width时, 显示宽度 === min-width;
  • 宽度的百分比, 这个宽度是父元素的百分比
  • 当一个元素同时设置了 max-width 和 min-width,
    且 max-width < min-width, 显示效果是 min-width

2.height属性

高度: 
    width: 长度值 | 百分比 | auto
 
最大高度:
    max-width: 长度值 | 百分比 | auto

最小高度: 
    min-width: 长度值 | 百分比 | auto

3-9.哪些元素可以设置width和height属性

  • 块级元素 可以设置width和height属性
<p>, <div>, <h1>~<h6>, <ul>, <li>, <ol>, <dl>, <dt>, <dd>
  • 替换元素 可以设置width和height属性
<img>, <input>, <textarea>
  • 如果块级元素不设置宽度, width: 100%
  • 如果块级元素不设置高度, 高度由内容决定
  • 总结:
    • width和height属性设置的是'内容'的宽度和高度
    • width和height属性设置对块级元素和替换元素有效
    • max-width/height和min-width/height有浏览器兼容问题

3-13.border边框属性

  • 边框宽度(border-width)
  • 边框颜色(border-color)
  • 边框样式(border-style)

1.border-width

语法:
    border-width: thin | medium | thick | 长度值

2.边框缩写:

语法: 
    border: [宽度] | [样式] | [颜色]

3-18.padding填充属性

1.设置元素的内容与边框之间的距离(内边距, 填充)

padding-top: 长度值 | 百分比
padding-right: 长度值 | 百分比  
padding-bottom: 长度值 | 百分比
padding-left: 长度值 | 百分比

2.padding值不能为负值
3.盒子在网页中占的空间, 不单单与width和height属性有关, 还与padding有关
4.padding属性缩写:

padding: 值1;
padding: 值1 值2; 上下 左右
padding: 值1 值2 值3; 上 左右 下 
padding: 值1 值2 值3 值4; 上 右 下 左

3-23.margin外边距属性

1.设置元素与元素之间的距离(外边距), 4个方向(上, 右, 下, 左)

margin-top: 长度值 | 百分比
margin-right: 长度值 | 百分比  
margin-bottom: 长度值 | 百分比
margin-left: 长度值 | 百分比

2.margin值可以设置为负值
3. margin:

margin: 值1;
margin: 值1 值2; 上下 左右
margin: 值1 值2 值3; 上 左右 下 
margin: 值1 值2 值3 值4; 上 右 下 左

4.默认情况下, 相应HTML块级元素存在外边距

body, h1~h6, p, ...

5.声明margin属性, 覆盖默认样式:

body,h1,h2,h3,h4,h5,h6,p {margin: 0;}

6.margin值为auto, 实现水平方向居中显示效果

  • 由浏览器计算外边距

7.外边距属性

  • 垂直方向, 两个相邻元素都设置外边距, 外边距会发生合并.
  • 合并后外边距的高度 === 两个发生合并外边距的高度中最大值
    margin

3-29.盒子模型计算

1.盒子在页面中所占的宽度 = 左边距 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边距

  • 盒子实际宽度 = 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框, margin设置的是盒子与盒子之间的距离.
    2.盒子在页面中所占的高度 = 上边距 + 上边框 + 上填充 + 内容宽度 + 下填充+ 下边框 + 下边距
  • 盒子实际高度 = 上边框 + 上填充 + 内容宽度 + 下填充+ 下边框, margin设置的是盒子与盒子之间的距离.
    box_pic

3.按哪种盒子模型来解析

  • 如果没有Doctype文档类型声明, 各浏览器按照自己的方式解析
  • 如果右Doctype文档类型声明, 按照标准盒子模型来解析
    parse

4-1.display属性

1.Html元素分类

块级元素, 占一行
<p>, <div>, <h1>~<h6>, <ul>, <li>, <ol>, <dl>, <dt>, <dd>

行内元素(内联元素), 一行显示
<span>, <a>, <em>等

2.解决行内元素, 水平排列时, 存在间隙

<head>
    <style type='text/css'>
        .one {
            font-size: 0;
        }
        div {
            display: inline;
            font-size: 16px;
        }
    </style>
</head>

<div class='one'>
    <div>display属性-div</div>
    <div>display属性-div</div>
    <div>display属性-div</div>
</div>

3.display属性

  • inline: 元素将显示为内联元素, 元素前后没有换行符(无法设置宽度/高度; 外边距只能设置左右, 不能设置上下)
  • block: 元素将显示为块级元素, 元素前后会带有换行符
  • inline-block: 行内块元素, 元素呈现为inline, 具有block相应特性
  • none: 元素不会被显示

4.一个例子:

<head>
    <style type='text/css'>
        span {
            display: none;
        }
        a:hover span { // a:hover span
            display: inline-block;
        }
    </style>
</head>

<a href='#'>指我...
    <span>和你捉迷藏</span>
</a>

4-6.案例应用

4-8.课程总结

box_pic
inherit

antd-mobile组件使用

antd-mobile按需加载

安装: 
npm install antd-mobile --save

文档:
https://mobile.ant.design/docs

全局加载:
import {Button} from 'antd-mobile';
import '../node_modules/antd-mobile/dist/antd-mobile.css';

按需加载:
1.安装react-app-rewired和customize-cra插件
npm install react-app-rewired customize-cra --save-dev

2.修改package.json文件
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

3.安装react-scripts插件
npm install react-scripts

4.在项目根目录下创建文件config-overrides.js

5.安装babel-plugin-import插件(用于按需加载)
npm install babel-plugin-import --save-dev

6.在config-overrides.js中添加代码
+ const { override, fixBabelImports } = require('customize-cra');
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd-mobile',
+     style: 'css',
+   }),
+ );

7.使用antd组件
import { Button } from 'antd-mobile';
  • Antd安装和配置
1.安装antd
npm install antd -D

2.高级配置
npm install react-app-rewired customize-cra -D

3.修改package.json文件
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    ...
}

4.按需加载
npm install babel-plugin-import -D

5.自定义主题
npm install less less-loader -D

6.在根目录添加config-overrides.js文件
const {override, fixBabelImports, addLessLoader} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color': '#1DA57A'} // 主题颜色
    })
);

React Router路由

React Router路由

  1. 疑问: exact可以在子路由上使用吗? 回答: 可以
  2. 疑问: Switch可以在子路由上使用吗? 回答: 可以

React-防止内存泄漏处理

/**

  • 解决
  • Can't perform a React state update on an unmounted component.
  • This is a no-op, but it indicates a memory leak in your application.
  • To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method”
  • 的错误.
  • 意思为：我们不能在组件销毁后设置state，防止出现内存泄漏的情况
  • 过程(原因)分析:
  • 当我们点击组件A后，组件A需要3秒的时间才能获取到数据并重新更新num的值，
  • 假如我们在这3秒内点击一次组件B，表示卸载组件A，但是组件A的数据请求依然还在，
  • 当请求成功后，组件A已经不存在，此时就会报这个警告(大概意思就是：你组件都没了，你还设置个啥)
  • 本问题出现的原因就是：我们应该在组件销毁的时候将异步请求撤销
  • 解决方法:
  • 1.在axios上有撤销异步请求的方法，但是我们有这么多组件，每次都要撤销岂不是太麻烦了
  • 2.我们可以利用一个‘开关的**’，在组件销毁的时候给this上挂载一个属性，每次发送请求的时候，我们判断一下这个属性是否存在(还是麻烦，每次都要判断)
  • 3.基于思路2，我们不想每次判断，因此是不是应该将其封装，利用修饰器对componentWillUnmount和setState进行改装
  • 第3条使用高阶组件, 暂时看不懂
  • 当前使用第2条的解决方案: 成功
  • 使用第2条的核心**是:
  • 1.设置this._isMounted来当 "开关", 在每次this.setState(...)之前, 判断组件是否已经被卸载了
  • 2.this._isMounted初始值为false
  • 当组件挂载完毕后, 置为true, 可以操作this.setState(...)
  • 当组件卸载完毕后, 置为false, 不能操作this.setState(...)
  • 3.这个方法的缺点是: 要在每个this.setState(...)操作前都要加上判断: this._isMounted && this.setState(...)
  • https://segmentfault.com/a/1190000017186299
  • */

代码:

import React from 'react';

class A extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: true
    };
  }

  render() {
    return (
      <div>
        A组件:
        <button onClick={() => this.setState((prevState) => ({isShow: !prevState.isShow}))}>toggle</button>
        {this.state.isShow && <B/>}
      </div>
    )
  }
}

export default A;

class B extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
    this._isMounted = false;
  }

  render() {
    return (
      <div>
        B组件:
        <button onClick={() => this.getNum()}>发送异步请求</button>
        <h3>{this.state.num}</h3>
      </div>
    )
  }

  getNum() { // 作用: 用来修改发送异步请求, 来修改num
    setTimeout(
      () => {
        if (this._isMounted) { // 每次操作this.setState(...)时, 都需要进行判断
          this.setState(() => ({
            num: Math.random()
          }));
        }
      }, 3000);
  }

  componentDidMount() {
    this._isMounted = true; // 挂载完毕后, 置true, 可以操作this.setState(...)
  }

  componentWillUnmount() {
    // 卸载
    this._isMounted = false; // 卸载完毕后, 置false, 不能操作this.setState(...)
  }

  // 在本例子中：
  // 1.当我们点击组件A时，会控制组件的A的卸载与装载
  // 2.当我们点击组件B时，会发送一个异步请求，请求成功后会更新num的值。
}

CSS+HTML基础2

6-1.认识CSS样式

(1) CSS全称为"层叠样式表", 主要用于定义HTML内容在浏览器内的显示样式, 如文字大小, 颜色, 字体加粗等.

6-2.CSS样式的优势

(1) 编写一条css样式语句, 使得3个span标签包括的字体颜色都改变了.

6-3.CSS代码语法

(1) CSS样式 = 选择符 + 声明; 声明 = 属性 + 值

	例子: p {color: blue}
	p >>> 选择符
	{color: blue} >>> 声明
	color >>> 属性
	blue >>> 值

(2) 选择符: 又叫选择器, 指明网页中要应用样式规则的元素. 样式规则就是CSS
(3) 声明: 在英文大括号"{}"中的就是声明. 属性和值之间用英文冒号":"分隔.

6-4.CSS注释代码

(1) Html中使用注释: <!--注释语句--> 
(2) CSS中使用注释: /*注释语句*/

7-1.内联式css样式, 直接写在现有的HTML标签中

7-2.嵌入式css样式, 写在当前的文件中

7-3.外部式css样式, 写在单独的一个文件中

(1) CSS可以写在哪些地方? --- 内联式, 嵌入式, 外部式.
(2) 内联式css样式: 就是把CSS代码直接写在现有的HTML标签中.

<p style="color:red">这里文字是红色.</p> --- 单条css样式
<p style="color:red;font-size:12px">这里文字是红色.</p> --- 多条css样式
<p style={{"color":"red"}}>这里文字是红色.</p> --- --- 单条css样式, react写法
<p style={{"color":"red", "font-size":"12px"}}>这里文字是红色.</p> --- --- 多条css样式, react写法

(3) 嵌入式css样式: 写在<style type="text/css"></style>标签之间.

<style type="text/css">
span{
	color:red;
}
</style>
嵌入式css样式必须写在<style>标签中, 一般情况下在<head>标签下.

(4) 外部式css样式: 又叫外联式, 就是把css代码写在一个单独的外部文件中, 这个css样式文件以".css"为扩展名.

在<head>标签内
不在<style>标签内
使用<link>标签
<link href="main.css" rel="stylesheet" type="text/css"/>

7-4.三种方法的优先级

(1) 内联式 > 嵌入式(<style>标签) > 外部式(标签)
(2) 嵌入式 > 外部式条件:

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
   color:red;
}

(3) 外部式 > 嵌入式条件:

<style type="text/css">
span{
   color:red;
}
<link href="style.css" rel="stylesheet" type="text/css">

(4) 简单来说, 就是--就近原则(离设置元素越近的级别越高)

8-1.什么是选择器?

(1) 每一条css样式由两部分组成:

	选择器 {
		样式(声明 = 属性 + 值)
	}

(2) "选择器"指明了{}中的"样式"的作用与网页中的哪些元素.

8-2.标签选择器

(1) 标签选择器就是html代码中的标签.

例如: <body>, <h1>, <p>, <img>
p {font-size: 12px; line-height: 1.6em;}

8-3.类选择器

(1) 语法: .类型选择器名称{css样式代码;}

<span class="stress">胆小如鼠</span>
.stress {color: red;}

8-4.ID选择器

(1) 语法: #ID选择器名称{css样式代码;}

<span id="setGreen">公开课</span>
#setGreen{color:green;}

8-5.类选择器和ID选择器的区别

(1) 相同点: 可以应用于任何元素
(2) 不同点:
1.ID选择器只能在文档中使用一次. 类型选择器可以使用多次.
2.可以使用类型选择器为一个元素同时设置多个样式. ID选择器不行(可以写, 但无效).

.stress{
	color:red;
}

.bigsize {
	font-size:25px;
}
<span class="stress bigsize">三年级</span>
<span id="stress bigsize">三年级</span> --- 不会报错, 但是没有效果.

8-6.子选择器

(1) 语法: > , 用于选择指定标签元素的第一代子元素. (!!!重点, 是第一代)

.food > li{
	border: 1px solid red;
}

8-7.后代(包含)选择器

(1) 语法: 空格 , 用于选择指定标签元素下的后辈元素. (!!!重点, 是所有后代)

.food li{
	border: 1px solid red;
}

8-8.通用选择器

(1) 语法: * , 匹配html中所有标签元素.

* {
	font-size:20px;
}

8-9.伪类选择器

(1) 语法:给html不存在的标签(标签的某种状态)设置样式.
(2) 给html中的标签元素的鼠标划过状态设置字体颜色.

a:hover {
	color:red;
	font-size:20px;
}

8-10.分组选择器

(1) 语法: ,(没错就是逗号) 想为html中多个标签元素设置同一个样式.

第一段全部文字颜色设置为绿色同时把第二段文字中的“简单”文字颜色设置为绿色
.first,#second span{color:green;}

9-1.继承

(1) 什么是继承性: 样式不仅应用于某个html标签元素, 而且还应用于它的后代.
(2)color有继承性:

p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
p中的文本和span中的文本都会变成红色.

(3)border没有继承性:

p{border:1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
p设置了边框, 子元素span没起到作用.

9-2.特殊性

(1) 什么是特殊性: 为同一个元素设置了不同的css样式代码, 元素会启用哪一个css样式呢?
(2) 权值: 浏览器根据权值来判断使用哪种css样式的. 权值高的, 就使用哪种css样式.
(3) 权值规则:

  1. 标签的权值为1
  2. 类型选择器的权值为10
  3. ID选择器的权值为100
  4. 继承的权值为0.1(最低)
p{color:red;} --- 标签的权值为1 --- 权值1
p span{color:green;} --- 标签的权值为1 --- 权值=1+1=2
.warning{color:white;} --- 类型选择器的权值为10 --- 权值10
p span.warning{color:purple;} --- 标签选择器 + 标签选择器 + 类型选择器 --- 权值=1+1+10=12
#footer .note p{color:yellow;} --- ID选择器 + 类型选择器 + 标签选择器 --- 权值=100+10+1=111

(4)例子:

 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。学校举办的活动我也没勇气参加。</p>

p{color:red;} --- 标签选择器的权值为1
.first{color:green;}/*因为权值高显示为绿色*/ --- 类型选择器为10
span{color:pink;}/*设置为粉色*/ --- 标签选择器的权值为1

提问: 胆小如鼠的字体颜色是什么?
1. .first的权值>p标签权值, 所以p中的字体颜色为绿色.
2. color属性有继承性,  继承的权值为0.1(绿色, 继承自.first) < 1(粉红色, span标签)
3. span设置了粉红色, 胆小如鼠为粉红色.

p span{color:purple;} --- 标签选择器 + 标签选择器 --- 权值=1+1=2 > span(权值1)
4. span最终为紫色.

9-3.层叠

(1) 什么是层叠: 在html中, 对于同一个元素有多个css样式存在, 且权值相同时, 最后面的css样式会被应用.
(2) 就近原则:

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

(3) 先前的css样式优先级: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
(4) css应用顺序: 权值计算 >>> css优先级(就近原则).

9-4.重要性

(1) 设置最高的权值: !important;
(2) !important样式 > 用户自己设置的样式 > 网页制作者的样式 > 浏览器默认样式

p{color:red!important;} --- 权值最高, 字体为红色
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

10-1.文字排版---字体

(1) 使用css样式为网页中的文字设置字体, 字号, 颜色等样式属性.

body{font-family:"Microsoft Yahei";} --- 兼容性好

(2) 不要设置不常用的字体. 因为如果用户本地电脑上没有安装你设置的字体, 就会显示浏览器默认的字体.

10-2.文字排版---字号, 颜色

<span class="stress">胆小如鼠</span>
.stress{font-size:20px;color:red;}

10-3.文字排版---粗体

10-4.文字排版---斜体

10-5.文字排版---下划线

10-6.文字排版---删除线

(1) 使用css样式来改变文字的样式: 粗体, 斜体, 下划线, 删除线
(2) 粗体:

<a>胆小如鼠</a>
a{font-weight:bold;}

(3) 斜体:

<a>胆小如鼠</a>
a{font-style:italic;}

(4) 下划线:

<a>胆小如鼠</a>
a{text-decoration:underline;}

(5)删除线:

<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> 
.oldPrice{text-decoration:line-through;}

10-7.段落排版---缩进

10-8.段落排版---行间距(行高)

10-9.段落排版---中文字间距, 字母间距

10-10.段落排版---对齐

(1) 缩进:

<p>1922年的春天</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。</p>
p{text-indent:2em;}

(2) 行间距(行高) --- 行高有专门的章节描述

<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。</p>
p{line-height:2em;}

(3) 中文字间距, 字母间距

<h1>hello world!你好</h1>
字母与字母之间的间距:
h1{letter-spacing:20px;}

单词与单词之间的间距:
h1{word-spacing:50px;}

(4) 对齐: 为块状元素(block)中的文本,图片设置居中样式吗? !!!注意了,是块状元素中的

<div><img src="...jpg"/></div>
居左:
div{text-align:left;}
居中:
div{text-align:center;}
居右:
div{text-align:right;}

11-1.元素分类

(1) 块状元素block:

1. <div>, <p>, <h1>...<h6>
2. <ol>, <ul>, <li>, <table>, <form>
3. <address>, <blockquote>

(2) 内联元素inline:

1. <a>, <span>, <i>, <br>, <label>
2. <em>, <strong>, <q>, <var>, <cite>, <code>

(3) 内联块状元素inline-block:

<img>, <input>

11-2.块级元素

(1) 设置display:block;就是将元素显示为块级元素.

将内联元素a转换为块级元素, 从而使a元素具有块级元素的特点.
a{display:block;}

(2) 特点:

1.每个块级元素都从新一行开始, 并且其后的元素也另起一行.(独占一行)
2.元素的width, height, line-height和padding-top, padding-bottom可设置.
3.块级元素在width不设置的情况下, width=100%父容器.

11-3.内联元素

(1)设置display:inline;将元素设置为内联元素.

将块状元素div转换为内联元素, 从而使div具有内联元素的特点.
div{display:inline;}

(2)特点:

1.和其他元素在一行上.
2.元素的width, height, padding-top和padding-bottom不可设置.
3.元素的宽度就是它包含的文字或图片的宽度, 不可改变.

11-4.内联块级元素

(1) 设置display:inline-block;将元素设置为内联块状元素.
(2) 特点:

同时具备内联元素, 块状元素的特点.
1.和其他元素都在一行上.
2.元素的width, height, line-height, padding-top和padding-bottom都可设置.

11-5.什么是盒模型

(1) 哪些元素具有盒模型的特征

<div>, <ul>, <ol>, <p>, <h>, <table>的**块级元素**都具有盒子模型的特征.

(2) 图解:

--------------------           --------------------
        | padding-top                   | padding-top
    ----------                      ----------
left|   内容  |right  (margin) left |  内容  |right
    ----------                      ----------
        | padding-bottom                | padding-bottom
--------------------           --------------------
内容 : 文字, 图片, 或者另一个标签.
给**内容**设置height高度, 注意是**内容**的高度, 不是**div标签**的高度.
div标签实际高度 = padding-top + 内容height + padding-bottom
div标签实际宽度 = padding-left + 内容width + padding-right

11-6.盒模型--边框1

11-7.盒模型--边框2

(1) 有3个属性: 粗细, 样式和颜色.

border: 2px solid red; 
1.粗细:border-width: 2px; --- thin|medium|thick
2.样式:border-style: solid; --- dashed: 虚线| dashed: 虚线| solid: 实线
3.颜色: border-color: red; --- 十六进制颜色

(2) border设置一个方向的边框:

1.border-top: 1px solid red;
2.border-right: 1px solid red;
3.border-bottom: 1px solid red;
4.border-left: 1px solid red;

11-8.盒模型--宽度和高度

(1) 盒模型宽度width和高度height和我们平常所说的物体的高度和宽度理解是不一样的.

结合上面盒模型的元素: <div>, <ul>, <ol>, <p>, <h>, <table>这些盒模型的宽度width和高度height, 
并不是直接等于设置时的宽度width和高度height.
div{
    width: 200px; --内容宽度
    height: 200px;--内容高度
    ...
}

(2) css定义的宽width和高height, 指的是纯内容.
(3) 图片:
image

(4) 例子: 盒模型宽度计算

div{
    width: 200px;
    padding: 20px;
    border: 1px solid red;
    margin: 10px;
}
盒模型 = margin-left + border-left + padding-left + width内容宽度 + padding-right + border-right + margin-right
      = 10px + 1px + 20px + 200px + 20px + 1px + 10px = 262px

图片:
image

(5) 盒模型的宽度和高度是通过计算得出的, 不是直接通过width和height指定的.

11-9.盒模型--填充

(1) 元素内容与边框之间是可以设置距离的, 称之为'填充'.
(2) 填充有上右下左.

padding: 10px; 上右下左
padding: 10px 5px;  上下 左右
padding: 5px 10px 5px; 上 左右 下
padding: 5px 10px 5px 10px; 上 右 下 左

11-10.盒模型--边界

(1) 元素与其他元素之间的距离可以使用margin来设置.
(2) 边界有上右下左

margin: 10px; 上右下左
margin: 10px 5px; 上下 左右
margin: 5px 10px 5px; 上 左右 下
margin: 5px 10px 5px 10px; 上 右 下 左

12-1.css布局模型

(1) 布局模型和盒模型是css最基本, 最核心的概念.
(2) 布局模型建立在盒模型基础上.
(3) css包含3种基本的布局模型:

1.流动模型(Flow)
2.浮动模型(Float)
3.层模型(Layer)

12-2.流动模型1

12-3.流动模型2

(1) 流动模型(Flow)是默认的网页布局模式.
(2) 默认状态下的HTML网页元素都是根据流动模型来分布网页内容的.
(3) 流动模型(FLow)的2个特征:

  1. 在流动模式(Flow)下, 块级元素都会在所处的包含元素内, 从上到下按顺序垂直延伸分布, 因为在默认状态下, 块级元素的宽度为100%.
    所以, 块级元素都会以行的形式占据位置.
  2. 在流动模式(Flow)下, 内联元素都会在所处的包含元素内, 从左到右按顺序水平分布.

12-4.浮动模型

(1) 任何元素在默认情况下是不能浮动的, 但可以使用css定义为浮动.
(2) 简单的用法: 让两个块级元素并排显示.
(3) 稍后会有专门的float章节.
(4) 例子分析:

div{
	border:2px red solid;
    width:200px;
    height:400px;
	float:left;
}
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>

1.当设置#div1{float:left;}和#div2{float:right;}
(1)div1和div2同时浮动float, 脱离文档流, 此时body中没有其他标签, 高度崩塌, 为0.
(2)div1左浮动, 靠左显示;div2右浮动, 靠右显示.

2.当设置#div1{float:left;}
(1)结果, 只显示div1, 找不到div2了, 这是怎么回事呢?
(2)div1左浮动, 脱离文档流, 此时body中还有div2标签, 高度没有崩塌, 为div2标签的高度400px. 
(3)由于div1左浮动, 且width和height都与div2相同, 所以脱离文档流的div1会覆盖在div2上.

3.当设置#div2{float:right;}
(1)结果, 第一行div1靠左显示, 第二行div2靠右显示.
(2)div2右浮动, 脱离文档流, 此时body中还有div1标签, 高度没有塌陷, 为div1标签的高度400px;
(3)分析不出来... 后续补上
(4)

12-5.层模型

12-6.层模型--绝对定位

12-7.层模型--相对定位

12-8.层模型--固定定位

(1) 层模型: 像photoShop的图层编辑功能.
(2) 为了让html元素在网页中精确定位
(3) 层模型有3种:

1.绝对定位: absolute
2.相对定位: relative
3.固定定位: fixed

(4)绝对定位:
a.非常重要: position: absolute;会将元素脱离文档流.
b.脱离文档流后, 使用top, right, bottom, left属性相对于最接近的一个具有定位属性的父包含块进行绝对定位.
定位属性可以是: position: absolute; 也可以是position:relative;
c.如果不存在这样的包含块, 则相对于body元素.

(5)相对定位:
a.非常重要: position: relative;元素仍在正常文档流中.
b.在正常文档流中, 使用left、right、top、bottom属性确定元素在正常文档流中的偏移位置.
c.相对定位完成的过程是首先按浮动float方式生成一个元素, 并且元素像层一样浮动了起来, 然后相对于以前的位置移动.
移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动.
image

(6)相对定位的实现过程:
总结:
1.确定元素类型的自身排列特性(block, inline, inline-block元素是如何排列的) --- 位置1
2.确定在元素位置1的基础上, 浮动float:left/right;的情况 --- 位置2
3.设置postion:relative;相对定位
如果没有float, 在位置1的基础上, 开始偏移.
如果有float, 在位置2的基础上, 开始偏移.
4.后续元素的排列, 是根据位置1排列的.

(7)固定定位:
1.与absolute定位相似, 但固定定位是相对于网页窗口的.
absolute是相对于最接近的具有定位属性的父包含块
2.由于网页窗口固定, 它不会随浏览器窗口的滚动条滚动而变化.
3.代码:

#div1{
    position: fixed;
    bottom: 0;
    right: 0;
}

12-9.Relative和Absolute组合使用.

(1) 使用position:absolute;相对于其他元素定位.
(2) 规范:

  1. 参照元素必须是定位元素(设置position:absolute的元素)的前辈元素.
  2. 参照元素必须加入position:relative; --- 这条不准确, position:absolute;也是可以的.
  3. 定位元素加入position:absolute;, 再使用top, bottom, left, right来进行偏移定位.
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

13-1.盒模型代码简写

13-2.颜色值缩写

(1) 如果每两位值相同, 可以缩写一半.

p{color:#000000;}  >>> p{color:#000;}
p{color:#336699;}  >>> p{color:#369;}

13-3.字体简写

(1) 缩写:

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

缩写为:
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

**至少指定font-size和font-family属性**
常用:
body{
    font:12px/1.5em  "宋体",sans-serif;
}

14-1.颜色值

(1) 设置颜色的方法: 英文命令颜色, RGB颜色, 十六进制颜色

英文命令颜色: p{color:red;}
RGB颜色: p{color:rgb(133,45,200);} --- 现在还有rgba, 多了一个透明度.
十六进制颜色: p{color:#00ffff;}

14-2.长度值

(1) 像素, em, %百分比

1.像素px
2.em: p{font-size:12px;text-indent:2em;} >>> text-indent = 2 * 12 = 24px;
**特殊情况**：当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>

css:
p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3.百分比: p{font-size:12px;line-height:130%} >>> line-height = 12 * 130% = 15.6px;

15-1.水平居中设置-行内元素

(1) 水平居中分为2种情况:

  1. 行内元素inline, inline-block
  2. 块级元素block
    a.定宽块级元素
    b.不定宽块级元素
    (2) 如果需要水平居中的元素为文本, 图片等行内元素时, 水平居中是通过给父元素设置text-align:center;来实现的.
<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

.txtCenter{
    text-align:center;
}

css_base

Css第一章

1.Html, CSS, JavaScript之间的关系

1.HTML --- 是网页内容的载体
2.CSS样式 --- 是表现, 外观控制
3.JavaScript --- 是行为, 用来实现网页特效效果

2.手机开发

css3 + html5

3.css样式规则

css规则 = 选择器 + 声明

h1 {color:red;font-size:14px;}
h1 >>> 选择器
color:red; >>> 声明
font-size:14px; >>> 声明
color: 属性; red: 值;
font-size: 属性; 14px: 值

4.css注释

(1)html注释: <!-- html注释 -->
(2)css注释: /* css注释 */

5.如何使用css样式(4种)

1.行内样式(内联样式)

在开始标签内添加style样式属性:
<p style="color:red;">内容</p>

2.内部样式(嵌入样式)

<head>
    <style type="text/css">
           样式...
    </style>
</head>

3.外部样式(link链入)

把css样式代码写在独立的一个文件中, xxx.css
引入:
<head>
    <link href="xxx.css" rel="stylesheet" type="text/css"/>
</head>

4.导入式(@import)

<head>
    <style type="text/css">
          @import 'xxx.css'
          或者
          @import url(xxx.css)
    </style>
</head>

5.css样式使用方法区别

类别 引入方法 位置 加载
行内样式 开始标签内style html文件内 同时
内部样式 <head>中<style>内 html文件内 同时
外部样式 <head>中<link> 引用 css样式文件
与html文件分离		 页面加载时, 同时加载css样式
导入式 在样式代码最开始处 css样式文件
与html文件分离		 在读取完html文件后加载

6.css使用方法的优先级

1.行内(内联)样式 > 内部(嵌入)样式 > 外部(外联)样式

(1)内部(嵌入)样式 和 外部(外联)样式 的优先级取决于 所处位置的先后
(2)最后定义的优先级越高(就近原则)

<style type="text/css">
</style>
<link href="xxx.css" rel="stylesheet" type="text/css"/>

外部样式 > 内部样式

---
<link href="xxx.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
</style>

内部样式 > 外部样式

7.css选择器

1.标签选择器

以html标签作为选择器:
p,h1,h2,h3,h4 {font-size:30px;}

2.类class选择器

为html标签添加class属性
<p class="red">内容</p>

设置css样式:
.red {color:red;}

可以对不同类型的元素的同一个名称的类选择器设置不同的样式规则:
p.red {font-size: 50px;}
h1.red {font-size: 30px;}

不同类型的元素: p, h1
同一个名称的类选择器: .red

同一个元素可以设置多个类, 用空格隔开
<p class="red fsize">内容</p>

3.id选择器

为html标签添加id属性
<p id="p1">内容</p>

设置css样式:
#p1 {color: red;}

4.全局选择器

所有标签设置样式:
* {
    color: blue;
    ...
}

5.群组选择器

集体统一设置样式: 
p,h1,h2,h3,h4 {font-size: 30px;}

6.后代选择器

使用后代选择器设置, 之间用空格隔开
<p><em>CSS</em>层叠样式</p>

p em {font-size: 40px;}

(1)跨越一层或多层
(2)祖先/后代关系 包括 父/子关系
(3)Html是根元素, 是所有标签的祖先

8.伪类

1.伪类的4种状态

伪类 说明
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬停状态
:active 激活的链接

2.:active

表示激活, 按下鼠标之后, 松开鼠标之前
按住不放

3.:hover和:active可以用于其他元素

p:hover {font-size:20px;} // 字体变大
p:active {...}

4.伪类的顺序

:link > :visited > :hover > :active

注意:
(1)a:hover必须置于a:link和a:visited之后, 才有效
(2)a:active必须置于a:hover之后, 才有效

5.在一个文档中, 设置多种链接样式

<a class="one">内容</a>
<a class="two">内容</a>

a.one:link {...}
a.two:link {...}

9.css继承和层叠

1.从父元素那继承 '部分' css属性:

  • font-size
  • color
  • border

2.css层叠

  • 可以定义多个样式
  • 不冲突时, 多个样式可以层叠为一个
  • 冲突时, 按不同样式规则优先级来应用样式
  • 多个样式应用于同一个元素, 就近原则
h1 {color: red;}
h1 {color: blue;}
蓝色覆盖红色

10.css使用方法优先级

1.行内样式 > 内部样式 > 外部样式

  • 内部样式 和 外部样式 的优先级取决于所处位置的先后
  • 最后定义的级别越高, 就近原则

11.css权值优先级规则

1.在同一个样式表中:

  • 权值相同, 就近原则
  • 权值不同, 应用权值高的css样式

2.选择器权值

  • 标签选择器: 权值为1
  • 类选择器/伪类: 权值为10
  • ID选择器: 权值为100
  • 通配符选择器: 权值为0
  • 行内样式: 权值为1000

3.选择器优先级

  • ID选择器(100) > 类选择器(10) > 标签选择器(1)

4.类选择器 --- 同一个元素应用多个class定义的样式:

.classBlue {color: blue;}
.classYellow {color: yellow;}

<div class="classBlue classYellow">内容</div>
<div class="classYellow classBlue">内容</div>

两个<div>标签, 结果都为黄色.

它取决于.classBlue样式和.classYellow样式的位置, 就近原则.

5.!important规则

  • 优先级最高
div {color: red !important;}

层叠时, 先看样式是否冲突:

  • 不冲突, 合并样式
  • 冲突 >>> 使用样式(行内样式, 还是其他) >>> 权值
    • 权值相同, 就近原则
    • 权值不同, 使用权值高的css样式
  • 带有!important的优先级最高

12.css样式命名的规则

  • 采用英文字母, 数字, '_' 和 '-'命名
  • 小写字母开头
  • 数字, '_' 和 '-'开头
  • 单字, 连字, 下划线和驼峰
单字
.special {...}

连字
.main-title {...}

下划线
.main_title {...}

驼峰
.mainTitle {...}

13.css样式命名(页面结构)

名称 命名
页头 header
页面主体 main
页尾 footer
内容 content/container
容器 container
导航 nav
侧栏 sidebar
栏目 column
页面外围控制 wrapper
左右中 left right center

14.css样式命名(导航)

名称 命名
导航 nav
主导航 mainnav
子导航 subnav
顶导航 topnav
边导航 sidebar
左导航 leftsidebar
右导航 rightsidebar
菜单 menu
子菜单 submenu
标题 title
摘要 summary

15.css样式命名(功能)

名称 命名
标志 logo
广告 banner
登录 login
登录条 loginbar
注册 register
搜索 search
功能区 shop
标题 title

Mac Homebrew /usr/local写入权限问题

https://blog.csdn.net/u014358608/article/details/80058520

在使用brew命令的时候，会遇到错误提示

Error:/usr/local is not writable.

并建议执行命令：

$ sudo chown -R $(whoami) /usr/local

但是系统还是会提示

chown: /usr/local: Operation not permitted

现在问题就卡住了，因为执行brew update之类的命令，需要对/usr/local进行写入操作。但是操作用户无法像对普通文件夹操作一样，通过chown获得write权限。由于/usr/local是系统文件夹，macOS限制了对其的操作权限。

归根到底，是下面的机制在作怪：

Rootless

苹果从 OS X El Capitan 10.11 系统开始使用了 Rootless 机制，可以将该机制理解为一个更高等级的系统的内核保护措施，系统默认将会锁定 /system、/sbin、/usr 这三个目录。

在终端输入

$ csrutil status

收到系统提示

System Integrity Protection status：enabled
说明rootless默认打开，此时无法通过sudo命令，对/system、/sbin、/usr 这三个目录进行修改。

打开、关闭Rootless机制

重启 Mac
开机时后按下 Command+R，进入恢复模式。
在上面的菜单实用工具中找到并打开 Terminal
输入如下命令：

$ csrutil disable

此时rootless已经关闭，退出恢复模式，正常进入系统。在终端输入

$ csrutil status

收到系统提示

System Integrity Protection status：disabled
rootless已关闭，可通过

$ sudo chown -R $(whoami) /usr/local

修改local权限。
建议修改完成之后，为了系统安全，将rootless重新开启。开启方式同关闭方式一样，在恢复模式的Terminal输入：

$ csrutil enable

即可。

float概念

float浮动基础

1-1.float的属性值:

float: left | right | inherit | none

1-2.float作用于需要浮动的元素自身:

浮动元素 === 设置了浮动的元素
每个属性(left|right|inherit|none)值影响浮动元素(设置了float的元素)在其父元素或文档(html文档)内摆放.

1-3.浮动的特性

特性1:
(1)浮动会脱离文档流, 漂浮在标准流之上, 和标准流不是一个层次.
(2)脱离文档流, 不占据原来的空间, 还会覆盖下一层元素, 通过设置z-index来修改.
(3)浮动会导致父元素高度塌陷(当父元素中没有其他元素时).
关键词: 脱离文档流  高度塌陷
特性2:
(1)左浮动会尽量靠近父元素的顶部和左边
(2)右浮动会尽量靠近父元素的顶部和右边
(3)浮动元素接近于父元素的顶部优先于左边
(4)浮动元素接近于父元素的顶部优先于右边
(5)多个浮动元素尽可能并排排列, 当父元素宽度不能容纳它们时, 才会移到下面
特性3:
(1)第一个定义左浮动的元素会最靠近左边
(2)第一个定义右浮动的元素会最靠近右边
特性4: div元素布局为基础
(1)使用float出发点 : 如何在一行显示多个div元素.
(2)如果div元素A是浮动的, 如果A元素上一个元素也是浮动的, 那么A元素会跟随在上一个元素的后面
   (如果一行放不下2个元素, 那么A元素会被挤到下一行)
   如果div元素上一个元素是标准流中的元素, 那么A的相对垂直位置不会改变, 也就是说A的顶部总是和上一个元素的底部对齐.
(3)元素浮动后, 标准流和标准流组成新的标准流
                        浮动流和浮动流组成新的浮动流

1-4.float与文字环绕效果

(1)文字环绕效果: 浮动元素 + 内联元素

1-5.清除浮动

(1)clear: left | right| both
   clear: left;表现为： 清除浮动的元素(不是设置float的元素), 的 顶部 边缘必须在(设置了)左浮动的元素 底边 的下面
   clear: right;表现为: 清除浮动的元素(不是设置float的元素), 的 顶部 边缘必须在(设置了)右浮动的元素 底边 的下面
   clear: both;表现为： 清除浮动的元素(不是设置float的元素), 的 顶部 边缘一定会在(设置了)浮动元素的 下方
(2)对于CSS的清除浮动(clear), 一定要牢记: 这个规则只能影响使用清除的元素本身, 不能影响其他元素

1-6.在float中, 哪些情况会使得元素换行显示

(1)当一行中的多个元素都设置了float浮动, 且width不够时, float元素会换行显示.
(2)当一行中: 浮动元素 + 浮动元素 + 普通元素...时, 普通元素设置了清除浮动后(clear: left|right|both), 清除浮动的元素会换行显示.
(3)当(普通元素, 浮动元素)时, 会把浮动元素往下推, 会换行显示.

1-7.float和position: absolute;的相同点和不同点

(1)float和position: absolute;都会脱离文档流， 不占据原来的那层空间， 还会覆盖下一层元素
(2)float和position: absolute;都会将元素变为块级元素, 相当于给元素设置了display: block;

使用Charles实现本地数据模拟

Charles配置

1.项目使用端口号: 3000
mock-0
2.代码中发起请求axios.get('/api/blackboardlist'), 实际使用端口号
3.在package.json配置{"proxy":"localhost:5000"}, 将请求从
localhost:3000/api/blackboardlist
代理为
localhost:5000/api/blackboardlist
向5000端口发出数据请求
mock-1
4.Charles的"Proxy Settings"中配置"HTTP Proxy"的Port端口号为5000,
并勾选"Enable transparent HTTP proxying"
mock-2
5."Tools" >>> "Map Local Settings" >>> "Add"添加映射 >>> 在Host中输入
localhost:5000/api/blackboardlist
"Map To" >>> Local path >>> 在本地选择要映射的文件, 并勾选Case-sensitive
"OK" >>> "OK"
mock-3
6. 完成

1.在写json时， 不要输入多余的","逗号.

正确 >>> [{"href": "/联系我们", "text": "联系我们"}] >>> [Object Array]
错误 >>> [{"href": "/联系我们", "text": "联系我们"},] >>> 不能识别类型, [Object Undefined]

markdown语法学习

markdown语法学习

1.markdown默认会解析HTML标签

解决方法:

(1) 当是单个html标签时:

`<h1>标签内容</h1>`

(2) 当是多个html标签时:

    ```javascript
    function fancyAlert(arg) {
      if(arg) {
        $.facebox({div:'#foo'})
      }
    }
    // 或多个html标签
    <html></html>
    <head></head>
    <body></body>
    ```

在react中使用videojs

在实现云端推流项目时, 需要使用到视频播放器, 检索到一个网站, 其中比较详细的列出很多的播放器

https://ithelp.ithome.com.tw/users/20104221/ironman/2067?page=2

1.react中使用原生的videojs组合

https://ithelp.ithome.com.tw/articles/10209345?sc=iThelpR

2.使用react插件video-react

https://github.com/video-react/video-react

3.我实际使用的还是videojs播放器, 对其在react环境下做封装

splayer组件对videojs封装

1.安装

npm install video.js --save-dev

import videojs from 'video.js';
import '../../../node_modules/video.js/dist/video-js.css'; // 必须导入
导入, 设置videojs宽/高起作用
不导入, 会展示videojs一些测试组件

2.创建video.js

1.<video>标签 + data-setup='{}'属性

2.<video>标签 + className='video-js' >>> 使用video.js样式

3.使用js来创建video.js

videojs('播放器DOM_ID', 播放器设置, 响应函数) 

播放器DOM_ID === <video id='xxx'>

4.事件

this.video = videojs('播放器DOM', 播放器设置, 响应函数);

this.video.on('play', () => { 
    console.log('play');
});

this.video.on('pause', () => {
    console.log('pause');
})

this.video.on('ended', () => {
    console.log('ended'); // 影片播放结束
});

等等, 还有一些其他事件

5.实战: 使用React来封装一个videojs组件

5-1.定义组件

import React from 'react';
import videojs from 'video.js';
import '../../../node_modules/video.js/dist/video-js.css'; // 必须导入
import PropTypes from 'prop-types';

class SPlayer extends React.Component {
    constructor(props) {
        super(props);
        this.player = React.createRef();
    }

    static propTypes = {
        url: PropTypes.string.isRequired,
        width: PropTypes.string.isRequired,
        height: PropTypes.string.isRequired
    };

    render() {
        return (
            <video
                className='video-js'
                data-setup='{}'
                ref={this.player}
                autoplay // 自动播放
                controls // 显示控制条
            />        
        )
    }

    componentDidMount() {
        const videoNode = this.player.current;
        const {eventOn} = this.props;
        this.video = videojs(videoNode, {
            sources: [{
                src: this.props.url
            }],
            width: this.props.width
            height: this.props.height
        });

        // 事件监听
        Object.keys(eventOn).forEach((item) => {
            this.video.on(item, () => {
                eventOn[item]
            });
        });
    }

    componentWillUnmount() {
        if(this.video) {
            this.video.dispose();
        }
    }
}

export default SPlayer;
// src, width, height属性的值, 都通过父级元素传递进来

// 也可以为这些属性指定默认值
SPlayer.defaultProps = {
    url: '', 
    width: '',
    height: ''
};
补充1.videojs(参数1, 参数2, 参数3);
  • 参数1: 使用React.createRef()来获取播放器的dom节点
  • 参数2: 设置播放器的参数配置
补充2.组件卸载时, 销毁videojs播放器
补充3.必须导入videojs库的css文件
  • 导入后, 设置videojs宽/高, 起作用
  • 不导入, 设置videojs宽/高, 不起作用, 并显示一些测试空间

5-2.定义接口

  • 也就是SPlayer的配置参数通过属性传递进来
使用prop-types + 定义传入videojs属性 
例如: 上面的url, width, height

// 定义
static propTypes = {
    url: PropTypes.string.isRequired,
    width: PropTypes.string.isRequired,
    height: PropTypes.string.isRequired
};

// 使用
const videoNode = this.player.current();
this.video = videojs(videoNode, {
    sources: [{
        src: this.props.url
    }],
    width: this.props.width,
    height: this.props.height
},'回调函数');

// 设置默认值
SPlayer.defaultProps = {
    url: '',
    width: '',
    height: '',
    ...
    定义其他字段
};

5-3.事件监听

    定义时: 
    {
        事件名称: function() {...}
    }

    最终:
    .on(事件名称, function() {...})
  • 实现
<SPlayer 
   ... 值是一个对象{}
    eventOn={
        {
            play: () => {
                console.log('play');
            },
            pause: () => {
                console.log('pause');
            }
        }
    }
/>

componentDidMount() {
    ...
    const {eventOn} = this.props;
    // 监听事件
    Object.keys(eventOn).forEach((item) => {
        this.video.on(item, () => {
            eventOn[item]
        });
    })
}

5-4.在父元素操控播放器组件

<div>
    <SPlayer
        ...
        ref={player => this.SPlayer = player}    
    />
    <button onClick={this.videoPlay}>播放</button>
    <button onClick={this.videoPause}>暂停</button>
</div>

ref: 表示获取到了SPlayer组件的DOM


this.videoPlay = () => {
    this.SPlayer.video.play();
};

this.videoPause = () => {
    this.SPlayer.video.pause();
};

CSS字体和文本样式

CSS字体和文本样式

1-1.课程介绍

  • 文字
1.颜色
2.字体
3.字体大小
4.加粗
等等
  • 文本
1.行高
2.对齐方式
3.文本装饰

2-1.font-family字体属性

  1. 使用css样式设置文字样式
  • 文字样式属性
字体: font-family
文字大小: font-size
文字颜色: color
文字粗细: font-weight
文字样式: font-style
  • font-family字体属性
语法: font-family: [字体1],[字体2],[...]
h1 {font-family: "宋体"}
p {font-family: "Times new Roma"}

说明:
1.多个字体用英文","逗号隔开
2.引号嵌套, 外使用双引号, 内使用单引号
p {font-family: "微软雅黑","宋体","黑体"}
浏览器一次寻找: 
(1)微软雅黑
(2)宋体
(3)黑体
(4)浏览器默认字体
  • font-family属性值: 具体字体名, 字体集
1.serif字体集: 宋体, 黑体, 其他... --- 用于标题
2.sans-serif字体集: 宋体, 黑体, 其他... --- 用于大段字体

2-5.font-size文字大小

1.定义元素内文字大小

  • font-size文字大小
语法:
    font-size: 绝对单位|相对单位
 
(1)绝对单位: 在不同浏览器下呈现不同的样式, 所以不推荐使用
(2)相对单位: px像素/em/百分比% --- 受显示器分辨率影响
    * em/百分比%都是针对父元素来设置字体大小
    * 字体大小是可以继承的, 继承的是父元素的计算值

2-8.color文字颜色

1.定义元素内文字颜色

  • color文字颜色
语法: color: 颜色名|十六进制|rgb
h1 {color: red}
p {color: rgb(0~255, 0~255, 0~255)}, 超过255修正为255, 小于0修正为0
p {color: rgb(0%~100%,0%~100%,0%~100%)}, 超过100%修正为100%, 小于0修正为0
div {color: #008800} #开头, 六位, 0~F 
简写为: div {color: #080}

2-11.文字样式

1.font-weight文字加粗

语法: font-weight: normal | bold | bolder | lighter | 100~900
加粗效果:
(1)bold === bolder
(2)700~900

2.font-style文字斜体

语法: font-style: normal | italic | oblique

3.font-variant字体变形

小型大写字母
语法: font-variant: normal | small-caps

2-16.font属性(简写)

语法: 
    font: font-style font-variant font-weight 
        font-size/line-height font-family

1.只有同时指定font-size和font-family, font属性才会起作用
2.有书写顺序
3.font属性之间使用空格隔开, font-family字体,字体集, 使用','隔开

3-1.文本对齐方式(text-align)

1.text-align: 设置元素内文本的水平对齐方式

语法: 
    text-align: left| right | center | justify
    
(1)text-align是可以继承的
(2)设置text-align的元素必须是块级元素
div{ // div中的内容会水平居中
    ... 
    text-align: center;
}    
span { // 无效, 因为span不是块级元素
    ...
    text-align: center;
}
img { // 无效, 因为img不是块级元素
    ...
    text-align: center;
}

3-5.行高(line-height)

1.line-height: 设置元素中文本的行高

语法: 
    line-height: 长度值 | 百分比
    
(1)浏览器有默认的行高, 不同浏览器默认行高不一样 
(2)line-height是可以继承的
(3)继承的是计算后的值, 不是直接把em或%的值继承过来

3-10.vertical-align属性

1.vertical-align: 设置元素内容的垂直方式

语法:
    vertical-align: baseline | sub | sup | top | middle | bottom
        | text-top | text-bottom | 长度 | 百分比

(1)vertical-align
    对行内元素生效,
    对单元格元素生效, 
    对块级元素不生效
(2)vertical-align: 15px; 上移
   vertical-align: -15px; 下移
(3)vertical-align: 100%; 上移
   vertical-align: -100%; 下移
(4)如果指定了line-height: 1.5em; vertical-align: 100%; 
100% === 1.5em
  • 文字基线:
半行高 --- top
顶线 --- text-top
中线 --- middle
基线 --- baseline 
底线 --- text-bottom
半行高 --- bottom
  • 单行文字垂直居中
height: 40px;
line-height: 40px;
  • 多行文字垂直居中
解决: 使用单元格元素包裹, 注意在单元格外部还需要指定display: table;
代码: 

<head>
    <style type='text/css'>
        .wrap {
            width: 100%;
            height: 600px;
            border: 1px solid blue;
            display: table; // 指定表格, 为display: table-cell指定
        }
        .content {
            display: table-cell; // 指定单元格
            vertical-align: middle; // 垂直居中
            text-align: center； // 水平居中
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="content">
            <img src='./logo.png' alt=''/>
            <h1>Welcome to WebSite</h1>
            <h2>CSS层叠样式, 用于网页样式设置, 使网页更美观.</h2>
        </div>
    </div>
</body>

3-13.文本样式其他属性

1.word-spacing: 设置元素内单词之间的间距
2.letter-spacing: 设置元素内字母之间的间距
3.text-transform: 设置元素内文本的大小写

capitalize: 首字母大写
uppercase: 大写
lowercase: 小写
none: 没有任何设置效果

4.text-decoration: 设置元素内文本的装饰

underline: 下划线 
overline: 上划线
line-through: 删除线
blink: 闪烁效果
none: 没有任何效果

(1)text-decoration可以应用到所有元素上: 块级元素, 行内元素t
(2)text-decoration不能继承
(3)1个汉字 === &nbsp;&nbsp;&nbsp;&nbsp;

4-4.课程总结

  • 已知可以继承的css属性
color, font-size, text-align, line-height

屏幕快照 2019-09-24 下午2 38 09
屏幕快照 2019-09-24 下午2 38 25

js代码技巧总结

1.数组遍历使用forEach

this.state.chat.chatMsg.forEach((v) => {...})

2.对象遍历使用for...in...

for(let m in models) {...}

3.字典

let msgGroup = {};
this.props.chat.chatMsg.forEach((v) => {
     msgGroup[v.chat_id] = msgGroup[v.chat_id] || []; // 如果字典不存在, 则创建一个[]
     msgGroup[v.chat_id].push(v); // 如果字典存在, 则把v添加到数组中
})

最终结果, 形如: 
{
     msgGroup: {
         'xxx':[{...},{...},{...}],
         'yyy':[{...},{...},{...}],
         ...
     }
}

在DOM根节点上为组件绑定事件处理函数

作用: 点击组件外的网页部分, 触发click事件, 组件隐藏

  state = {
    displayMenu: false
 };

  // 切换displayMenu状态
  showDropdownMenu = (event) => {
    event.preventDefault();
    this.setState({displayMenu: true}, () => {
      // 在DOM根节点上为组件绑定事件处理函数
      document.addEventListener('click', this.hideDropdownMenu);
    });
  };

  hideDropdownMenu = () => {
    // 在这里解绑组件在DOM根节点上绑定的事件
    this.setState({displayMenu: false}, () => {
      // 注意事件的绑定解绑不能传递匿名函数
      document.removeEventListener('click', this.hideDropdownMenu);
    });
  };

  render() {
     return (
        <DropDownWrapper onClick={this.showDropdownMenu}>
               ....
               {this.state.displayMenu ? '显示下拉组件' : ''}
        </DropDownWrapper>
     )
  }

react Table组件 样式修改

  • 修改表头颜色
1.在列名数据源中添加className属性:
const columns = [
      {
        title: '',
        dataIndex: 'icon',
        key: 'icon',
        render: () => (
          <Icon type='appstore'/>
        ),
        className: 'column-money'
      },
      {
        title: 'Id',
        dataIndex: 'id',
        key: 'id',
        className: 'column-money'
      },
      {
        title: 'Domain',
        dataIndex: 'domain',
        key: 'domain',
        className: 'column-money'
      },
      {
        title: 'Port',
        dataIndex: 'port',
        key: 'port',
        className: 'column-money'
      },
      {
        title: 'RecvServicePort',
        dataIndex: 'recvServicePort',
        key: 'recvServicePort',
        className: 'column-money'
      },
      {
        title: 'State',
        dataIndex: 'state',
        key: 'state',
        className: 'column-money'
      },
      {
        title: 'EMessage',
        dataIndex: 'eMessage',
        key: 'eMessage',
        className: 'column-money'
      }
]

2.在index.html中添加
<head>
   <style type='text/css'>
      th.column-money {
         background: rgb(25,31,39) !important;
         color: #a5b2c7 !important;
      }
   </style>
</head>
  • 修改tr背景颜色和字体颜色
1.<Table dataSource={data} columns={columns} rowClassName='trStyle'/>
2.index.html
<head>
   <style type='text/css'>
     .trStyle {
         background: rgb(25,31,39) !important;
         color: #fff !important;
      }
   </style>
</head>
  • 修改tr悬停背景颜色
1.index.html
<head>
   <style type='text/css'>
        .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
            background-color: rgb(17, 21, 25) !important;
        }

        .ant-table-body .ant-table-row-hover {
            background: rgb(17, 21, 25) !important;
        }

        .ant-table-body .ant-table-row-hover > td {
            background: rgb(17, 21, 25) !important;
        }
   </style>
</head>

学习路径

1.完成ES6的Promise部分
2.winston日志插件
3.urllib请求插件
4.正则表达式学习 https://juejin.im/post/59b5e50f51882519777c4815
5.webpack学习
6.fxqueue项目整理
7.postcss语法学习
8.redux-immutable
9.immutableJS
10.ES6按图片部分, 快速看完
11.JavaScript高级设计
12.redux开发是实例详解
13.redux-thunk, 项目中放在configureStore.js中
14.什么是函数式编程? http://www.ruanyifeng.com/blog/2012/04/functional_programming.html
15.redux中间件 --- Logger for Redux
16.Redux进阶之路总结
17.JavaScript高级程序设计
18.icon图标设计: https://fontawesome.com/start
在react下使用有2种方式:
(1)使用react-fontawesome插件: https://www.npmjs.com/package/@fortawesome/react-fontawesome
(2)在线引用all.css文件, , 官网用法.
/**

  • 写到icon
  • 1.使用了Font Awesome的icon
  • 2.Font Awesome旨在与内联元素一起使用. !!!注意了是和内联元素一起使用!!!3
  • 3.目前使用在线的css
  • 4.需要知道两个信息, 才能引用图标: 名称 + 前缀(fas/fab)
  • 5.Font Awesome图标自动集成CSS大小和颜色.
  • 6.Font Awesome图标有一些样式:
  • (1)Sizing Icons(尺寸)
  • (2)Fixed-Width Icons(定宽)
  • (3)Icons in a List(队列)
  • (4)Rotating Icons(旋转)
  • (5)Animating Icons(动画)
  • (6)Bordered + Pulled Icons(有边界+拉扯???)
  • (7)Stacked Icons(堆积, 图层重叠)
  • (8)Power Transforms(缩放, 位移, 旋转&翻转)
  • (9)Masking(好像也是覆盖方面的)
  • (10)Layering, Text, & Counters(图层, 文字, 计数器的一些组合, 又是层叠?)
  • (7), (9), (10)看上去差不多
  • */

19.矢量图在线制作工具: http://app.inker.co/
20.获取元素的display值, 本来使用里测试float和absolute是否会让元素block化.
https://yevon-cn.github.io/2012/03/09/get-calced-css-style.html
21.程序员技能图谱 https://github.com/TeamStuQ/skill-map

ImmutableJS列表路径:
1.CSDN --- immutable日常操作之深入API --- https://blog.csdn.net/yuzhongzi81/article/details/77689778

css列表路径:
1.慕课网css基础
(1)relative
(2)absolute
(3)float
(4)line-height
(5)vertical-align
(6)
2.掘金 --- 干货!各种常见布局实现+知名网站实例分析 --- https://juejin.im/post/5aa252ac518825558001d5de

前端列表路径:
1.掘金 --- 前端学习路径 --- https://zhuanlan.zhihu.com/p/21935921
2.segmentfault --- 前端好文整理2019你值得拥有 --- 网站地址: https://segmentfault.com/a/1190000017577802
--- github: https://github.com/FightingHao/codingDream

css伪类的4种状态

伪类 说明
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬停状态
:active 激活的链接 
:link > :visited > :hover > :active
(1)a:hover 必须置于 a:link 和 a:visited之后, 才生效
(2)a:active 必须置于 a:hover之后, 才生效
(3)伪类对大小写不敏感

react 解决antd下Form表单输入框, 输入一次, 重新渲染一次的问题

  • 将Form表单单独写在一个匿名组件中
  • 匿名组件中所有的处理函数都从父组件传递下去
class Login extends React.Component {
    render() {
       ...
       <LoginInputForm
              onSubmit={this.handleSubmit}
       />
   }

  handleSubmit = () => {...}
}

// 匿名Form组件
const LoginInputForm = Form.create({name: 'login_input_form'})(
   class extends React.Component {
      render() {
          const {getFieldDecorator} = this.props.form;
          const {onSubmit} = this.props;
          return (
               <Form onSubmit={onSubmit}>
               </Form>
          )
      }     
   }
);

解决了重复渲染的问题

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.