react练习项目

git-clone 出错
curl 56 OpenSSL SSL_read: error:14095126:SSL routines:ssl3_read_n:unexpected eof while reading, errno 0

https://www.cnblogs.com/qianshouxiuluo/p/11662616.html

大概实现了一下,用到express做后台,基础布局,和react-markdown

参考码云项目:
https://gitee.com/hancl/react_practice_demo
界面:
react练习项目_第1张图片react练习项目_第2张图片

强制删除:
npm install rimraf -g
rimraf node_modules

三栏布局:
react练习项目_第3张图片
1、float

.bgColor(@color){
     
  background-color: @color;
}

.fix{
     
  width: 18.75rem;
  height: 100vh;
  float: left;
  padding: 0;
  margin: 0;
}

.mainApp{
     
  width: 100vw;
  height: 100vh;
}

.siderA{
     
  .bgColor(rgba(218, 155, 38, 0.3));
  .fix;
}

.siderB{
     
  .bgColor(rgba(122, 236, 128, 0.438));
  .fix;
  left: 18.75rem;
}

.siderC{
     
  .bgColor(rgba(131, 89, 209, 0.3));
  height: 100vh;
  float: left;
  width: calc(100% - 37.5rem);
}

2、flex

.bgColor(@color){
     
  background-color: @color;
}

.fix{
     
  width: 18.75rem;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.mainApp{
     
  display: flex;
  flex-direction: row;
}

.siderA{
     
  .bgColor(rgba(218, 155, 38, 0.3));
  .fix;
}

.siderB{
     
  .bgColor(rgba(122, 236, 128, 0.438));
  .fix;
  left: 18.75rem;
}

.siderC{
     
  .bgColor(rgba(131, 89, 209, 0.3));
  height: 100vh;
  flex: 1;
}

经过几次修改,成了,侧边栏fix布局,现在怎么滑动边上的滚动条,导航栏都固定位置。
react练习项目_第4张图片

html{
     
  @media screen and (max-width:576px) {
     
    font-size: 11px;
  }

  @media screen and (min-width:576px) {
     
    font-size: 13px;
  }

  @media screen and (min-width:992px) {
     
    font-size: 16px;
  }
}

.bgColor(@color){
     
  background-color: @color;
}

.mainApp{
     
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
}

.fix-site{
     
  width: 30rem;
  height: 100vh;
  left: 0;
  padding: 0;
  margin: 0;
}

.sidediv{
     
  width: 15rem;
  height: 100%;
  float: left;
  position: fixed;
}

.siderA{
     
  .bgColor(rgba(218, 155, 38, 0.3));
  .sidediv;
}

.siderB{
     
  .bgColor(rgba(122, 236, 128, 0.438));
  .sidediv;
  left: 15rem;
}

.siderC{
     
  .bgColor(rgba(131, 89, 209, 0.3));
  height: 140vh;
  flex: 1;
}

关于使用node搭建服务器:https://blog.csdn.net/itkingone/article/details/79259490

axios:
cnblogs.com/zxk5211/p/web_21.html

你可能感兴趣的:(前端)