h5编辑器,h5制作,h5设计
2024年08月26日
基于vue2.0, github star 690+, 一款小众的UI框架fish-ui，直接上截图：
2024年08月26日
VSC 官方blog宣布 发布2018年8月版本 Visual Studio Code 1.27。版本在此版本带了了很多重要更新，主要亮点包括：
编辑器设置：用于发现，搜索和修改VS代码设置的全新编辑器设置UI。
自定义菜单栏：Windows和Linux上的完全可用标题和菜单栏。
2024年08月26日
每一门技术的出现都是为了解决现存的问题，同样的，Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档 中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解，那么就可以很快
2024年08月26日
#
使用less.js编译
<!--第一步，引入less文件--> <link rel="stylesheet/less" href="01.less"> <!--第二部：引入less.js文件--> <script src="less.js"></script>
2024年08月26日
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
2024年08月26日
Less是一种流行的CSS预处理器，它扩展了CSS的功能，使得样式表更易于维护和组织。以下是Less的主要语法特性：
1. 变量
使用@符号定义变量：
```less
@primary-color: #4CAF50;
2024年08月26日
- home.jsx文件
import React from "react";
// less
import "./style.less";
// 组件
import AsideView from "./AsideView";
import ContentView from "./ContentView";
import HeaderView from "./HeaderView";
// antd
import { Layout } from "antd";
const { Sider, Header, Content } = Layout;
export default class Home extends React.Component {
constructor(props) {
super(props)
this.state = {
isCollapsed: true
}
}
toggleCollapsed = () => {
this.setState({ isCollapsed: !this.state.isCollapsed })
}
render() {
const {isCollapsed} = this.state
return (
<Layout style={{ height: "100vh" }}>
<Header style={{ padding: "0" }} >
<HeaderView isCollapsed={isCollapsed} toggleCollapsed={() => this.toggleCollapsed()}/>
</Header >
<Layout>
<Sider collapsed={isCollapsed}>
<AsideView />
</Sider>
<Content>
<ContentView />
</Content>
</Layout>
</Layout>
);
}
}
- HeaderView.jsx文件
import React, { Fragment } from "react";
// icon
import {
MenuFoldOutlined
} from '@ant-design/icons'
// css
import "./style.less";
export default class HeaderView extends React.Component {
constructor(props) {
super(props)
this.state = {
isCollapsed: props.isCollapsed
}
}
onCollapseIconClick = () => {
this.props.toggleCollapsed()
}
componentWillReceiveProps(props) {
const {isCollapsed} = props
this.setState({isCollapsed})
}
render() {
const {isCollapsed} = this.state
return (
<div className="header_container">
<div className={isCollapsed ? 'close' : 'logo'}>
<div className="logo_img">logo</div>
</div>
<div className="header_content">
<MenuFoldOutlined onClick={this.onCollapseIconClick} style={{fontSize: '24px', marginLeft: '10px'}}/>
header
</div>
</div>
);
}
}