html布局帮手 php,html布局：html三列布局的实现代码

本篇文章给大家带来的内容是关于html布局：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;

}

最终效果展示：

相关文章推荐：