Web前端布局总体架构

最新推荐文章于 2025-07-07 11:51:13 发布

原创最新推荐文章于 2025-07-07 11:51:13 发布 · 6.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #布局

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Web前端布局的整体架构，包括导航栏、底部和中间的上下两部分，使用百分比实现自适应宽度和间距。强调了脚本放置、字体大小规范、BEM命名规则、避免表格排版、清晰的目录结构、简化样式层次、缓存策略、动画应用、HTML结构层次和Webpack打包优化等关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
    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;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
.describe_p{
    line-height: 1.42857143;
    color: #333;
    font-size: 16px;
}

.common_singleBtn-center{
    display: block;
    margin: 0 auto;
}
.common_btn-left{
    display: block;
   position: absolute;
   left: 40%;
   margin-top: 5%;
}
.common_btn-right{
    display: block;
    position: absolute;
    right: 40%;
    margin-top: 5%;
}

.common_form{
    height: 20px;
    width: 20%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    vertical-align: middle;
 }

.search_input{
    padding-left: 2%;
}

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>上下布局</title>
        <link rel="stylesheet" type="text/css" href="../css/common/common3.css"/>   
    </head>
    <body ng-app="myApp"> 
    <div class="top"></div>
    <div id="" class="main" ng-controller="ctrl">
     <div class="up">
        <div  ng-include="'up/up.html'"></div>
     </div> 

     <div id="" class="down">
        <div ng-include="'down/down.html'"></div>
     </div>

    </div>
    <div class="foot"></div>


<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
 <script>
var app = angular.module('myApp',[]);
app.controller("ctrl",function($scope){});
</script>
    </body>
</html>

<!DOCTYPE html>

<html ng-app="myApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <body ng-app="myApp">
        <div class="search_input">
        <p class="describe_p">请输入姓名</p>
        <label>姓名：</label><input type="text" class="common_form">
        </div>

        <div class="search_input">
        <p class="describe_p">请输入身高和体重</p>
        <label>身高：</label><input type="text" class="common_form">
         <label>体重 : </label><input type="text" class="common_form">
        </div>

        <div class="search_input">
        <p class="describe_p">请输入身高和体重</p>
        <label>身高：</label><input type="text" class="common_form">
        <span style="position: relative;left: 10%;">
         <label>体重 : </label><input type="text" class="common_form">
         </span>
         <br /> <br />

         <label>身高：</label><input type="text" class="common_form">
         <span style="position: relative;left: 10%;">
         <label>体重 : </label><input type="text" class="common_form">
         </span>
        </div>
      <input type="button" class="btn btn-default common_btn-left" id="" value="普通按钮样式" />
      <input type="button" id="" class="btn btn-primary common_btn-right" value="特殊按钮样式" />
    </body>
</html>

4.样式命名规范采用BEM，一个简单又极其严格的命名规范，即块（Blocks）代表高级的类，元素（element）是块的子模块，修饰符（modifier）代表不同的状态；

<div class="search">
<input class="search_btn search_btn-active"/>
</div>

5.不用table进行排版；
6.变量命名采用骆驼峰式命名方法
7.目录结构清晰，模块化；
目录结构模块化
8.样式层次结构尽量简单;
9.js 和 cs 缓存
10.动画尽量使用在绝对定位和固定定位的元素上；
11.html文档结构层次尽量少，最好不深入6层；
12.使用webpack打包css和js文件，可将不同脚本打包在一起并放进同一文件中，减少http请求和当个文件解析；