如何实现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; }三列布局 名称/文号:左边中间右边
最终效果展示:
关于如何实现html三列布局就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网页标题:如何实现html三列布局
网站路径:http://scyanting.com/article/jeescj.html