Maison > Article > interface Web > mise en page HTML : code d'implémentation de la mise en page HTML à trois colonnes

mise en page HTML : code d'implémentation de la mise en page HTML à trois colonnes

不言original: 2018-08-07 11:38:154477parcourir

Le contenu de cet article concerne la mise en page HTML : le code d'implémentation de la mise en page HTML à trois colonnes, qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Enregistre principalement un style de mise en page complet pour obtenir environ trois colonnes sur la page, dont les colonnes de gauche et de droite sont à largeur adaptative et celle du milieu est à largeur fixe.

Code de style CSS :

/********************
*公共标签样式
********************//*********************
*main 外边框自适应区域
***********************/.main {
    width: 100%;
    min-width: 1100px;
    padding-bottom: 30px;
    box-sizing: border-box;
    background-color: #FFF;
    border-radius: 6px;
    box-shadow: 0px 4px 6px 0px rgba(70, 95, 106,.25);
}/*title 标题 */.main-title {
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    color: #263135;
    background-color: #d1d6da;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}/*********************
*头部文号区：70px
***********************/.content_title {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    height: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 30px;
}/**********************
*区域块设置
**********************/.area {
    height:500px;
}.area_left {
    float: left;
    width: calc(50% - 75px);
    height: 100%;
    background-color: bisque;
}.area_center {
    float: left;
    width: 150px;
    height: 100%;
    background-color: black;
}.area_right {
    float: left;
    width: calc(50% - 75px);
    height: 100%;
    background-color: bisque;
}/**************************
*footer底部区域 
***************************/.footer {
    margin: 40px 0;
}/*  提交 */.submit {
    height: 40px;
}/* 提交按钮*/.submit-btn {
    height: 40px;
    width: 200px;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    font-size: 1.1em;
    background-color: #1bbc9b;
    cursor: pointer;
}/********************
*公共标签默认属性设置
********************/body {
    margin: 0;
    font-size: 15px;
    padding: 20px 20px 0 20px;
    margin-bottom: 0 !important;
    background-color: #f0f0f0;
}input {
    border: none;
}

Mise en page du code HTML :

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="x-ua-compatible" content="IE=9" />
    <title>三列布局</title>
    <!--页面样式-->
    <link href="~/Content/css/StyleTemplate/Index.css" rel="stylesheet" />

    <!--当前页面的逻辑  -->
</head>
<body>
    <!-- 主要区域 -->
    <div class="main">
        <!-- 主要区域 标题 -->
        <div class="main-title">
 
        </div>
        <div class="content">
            <div class="content_title">
                <div class="flLeft padigLeft_15">
                    <span class="fontBold">名称/文号：</span>
                    <input class="int" value="发文文号001" />
                </div>              
            </div>
            <div class="area">
                <div class="area_left">左边</div>
                <div class="area_center">中间</div>
                <div class="area_right">右边</div>
            </div>
        </div>
    </div>

    <!--footer  底部区域   -->
    <div class="footer">
        <div class="submit">
            <!--  提交 按钮 -->
            <a class="submit-btn" onclick="window.print()">
                流程转交
            </a>
        </div>
    </div>
</body>
</html>

Affichage de l'effet final :

Articles Liés

Voir plus