网站开发小技巧总结

一、对于css的编写

1、使用less预编译器，提高开发效率

.header{
  padding: 26px 0;
  .left{
    float: left;
    .logoimg{
      width: 110px;
      height: 75px;
      max-width: 100%;
      display: inline-block;
      vertical-align: middle;
      margin-right: 17px;
    }
    .r{
      margin-top: 25px;
      display: inline-block;
      vertical-align: middle;
      .logotxt{
            font-size:22px;
            font-weight:bold;
            color:rgba(51,51,51,1);
      }
      .en{
        margin-top: 14px;
        font-size:14px;
        font-family:"Arial";
        font-weight:bold;
        color:#666666;
        letter-spacing: 8px;
      }
    }
  }
  .right{
    float: right;
    margin-top: 35px;
    .navBar{
      position:relative; 
      z-index:999; 
      .nav{
        .m{
          float: left;
          position:relative;
          h3{
            a{
              display: block;
              padding:17px;
            font-size:16px;
            font-weight:400;
            color:rgba(19,19,19,1);
            }
          }
          .wpsub{
            width: 685px;
          }
          .wal{
            left: -342px !important;
          }
          .sub{
            background-color: #fff;
            display: none;
            padding: 10px 5px 0;
            box-sizing: border-box;
            position:absolute; 
            left:-1px;
           top:60px;
            z-index: 999;
            .sitem{
              float: left;
              width: 70px;
              margin:0 13px 20px;
              img{
                width: 100%;
                height: 63px;
              }
              .txt{
                text-align: center;
              }
            }
            li{
              a{
                text-align: center;
                width: 98px;
                height:35px; 
                line-height:35px;
                color: #333;
                display:block;
                &:hover {
                  color: #ff0000;
                }
              }
            }
          }
        }
       
        .on h3 a{
          color: #fff;
          background-color: rgba(208, 11, 13, 1);
        }
      }
      
    }
  }
}

2、别忘记消除margin和padding

*{
  margin: 0;
  padding: 0;
}

3、编写公共css文件，把全局样式放在里面

.inner{
  width: 1200px;
  margin: 0 auto;
}
.mt50{
  margin-top: 50px !important;
}
.icon {
  width: 20px;
  height: 22px;
  fill: currentColor;
  overflow: hidden;
}

 

 4、页面布局推荐使用flex

 

二、前端开发使用的小图标

阿里巴巴矢量图标库

使用建议：1、先使用在线图标，当项目开发完成时，在进行一次下载

　　　　　　优点：可以在线实时看到图标样式，并进行修改

　　　　　　缺点：在线图标会使得网页加载过慢，影响查看开发样式效果

　　　　2、直接下载图标，使用一次下载替换一次

　　　　　　优点：页面刷新快，对于样式修改查看效果方便，不用等待过长的加载时间

　　　　　　缺点：每次使用新的图标需要重新下载图标并进行更新原来的样式库才能看到图标效果