html 三列佈局（兩列自適應，一列固定寬度）

-Advertisement-

不做過多解釋：主要是記錄一個完整的佈局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少代碼奉上： CSS樣式代碼： html代碼佈局：最終效果展示： ...

不做過多解釋：主要是記錄一個完整的佈局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。

不多少代碼奉上：

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;
}

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>

最終效果展示：

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

js之單例模式

單例模式是指一個類，只有一個實例。實現的思路是，創建實例時候加判斷，如果有實例則返回，如果沒有就new一個，並返回。第一步：創建類。第二步：使用return結果，這裡有判斷。第三部：將1、2整合第四步：創建實例方式 ...
碼畜寫淘寶商品廣告效果

運行效果如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淘寶商品廣告效果</title> <style type="text/css"> li { list-style:none; } #box { width:448p ...
node(1) hello world

1 //一使用require指令來載入http模塊 2 var http = require('http'); 3 //二使用http.createServer()的方法創建伺服器 4 http.createServer(function(request,response){ 5 //發送HTTP... ...
關閉當前界面

今天做項目遇到關閉當前頁面出現提示，而無法關閉當前頁面，在度娘的一番教導之下終於找到了這個方法。 ...
vue UI 告別webpack配置

vue-cli 3.0 的候選版本也已經發佈多時了。vue-cli 3.0 版本為我們提供了集創建、管理、分析為一體的可視化界面vue ui，媽媽再也不用擔心我不懂配置啦~讓我們來一起嘗嘗鮮吧~ ...
鬥魚擴展--讓你看到更多內容(七)

代碼可以在 https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA 處下載下麵我們一步優化頁面，在一個頁面上減少廣告的同時，也能獲取更多的信息。我直接上代碼了，都是可以在Console 內直接運行的。 RoomObj.js 裡加入了一個對象方法。兩個 ...
告別webpack配置！vue UI

vue-cli 3.0 的候選版本也已經發佈多時了。vue-cli 3.0 版本為我們提供了集創建、管理、分析為一體的可視化界面vue ui，媽媽再也不用擔心我不懂配置啦~讓我們來一起嘗嘗鮮吧~ ...
js遍曆數組

ES5 寫法arr.forEach(function(value,index){ console.log(index+'--'+value);}) ES6 寫法for( let i of arr){ console.log(i);} ...