Web前端布局总体架构

1.布局由四个部分组成，导航栏，底部，中间部分分为上下两个部分，其中上部分高度500px，下部分高度400px，宽度采用自适应，利用%比调节，距离左右距离10%；

body{
    margin: 0;padding: 0;  //清除全局的margin样式
}
.top{
    height: 50px;
    background: chartreuse;
}
.main{
    width: 90%;
    margin: 0 auto; //0表示上下,auto表示左右

}
.up{
    width: 100%;
    height: 500px;
    border-color: black;
    border-style: solid;
    border-width: 1px;
}
.down{
    width: 100%;
    height: 400px;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    margin-top: 20px;
}
.foot{
    height: 50px;
    background: salmon;
    margin: 0 auto;
}

2.标签script脚本尽量后放，放在/body标签前即可，不然会阻塞DOM文档的解析；
3.字体要求,输入框宽度要求百分比或者固定像素
（1）场景描述：16px
（2）按钮中的字体：14px
（3）input框周围字体：16px
（4）表格中字体：14px
（5）图中字体：14px

body{
    margin: 0;padding: 0;  //清除全局的margin样式
    font-size: 20px;
    font-family: "微软雅黑";
    color: #333;
}
.top{
    height: 50px;
    background: chartreuse;
}
.main{
    width: 90%;
    margin: 0 auto; //0表示上下,auto表示左右

}
.up{
    width: 100%;
    height: 500px;
    border-color: black;