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>

最终效果展示:

 

本文转载于:猿2048➫https://www.mk2048.com/blog/blog.php?id=i0c0k0j&title=html 三列布局(两列自适应,一列固定宽度)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370702.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jsp常用动作

jsp:include 动态包含&#xff1b; jsp:forward 转发&#xff1b; jsp:useBean 实例化bean对象&#xff1b; jsp:setProperty 设置一个属性值 jsp:getProperty 获取一个属性值 jsp:param 动态传参数&#xff1b; jsp:plugin 生成一个插件 jsp:useBean 实例化一个对象…

单曲循环 翻译_歌单 | 单曲循环amp;热评

December2020/12/ 写在前面的话 /本来打算在跨年的时候才更文&#xff0c;但是吧又觉得空出这最后一个月有点苍白&#xff0c;然后最近一直夜半网抑云(敏感ing)就想到可以做一期分享歌单的推文&#xff0c;分享一些最近听得频繁的歌曲(还不是刷抖音刷出来的)。《暧昧》// 王菲徘…

python的字符串内建函数

python的字符串内建函数 字符串方法是从python1.6到2.0慢慢加进来的——它们也被加到了Jython中。 这些方法实现了string模块的大部分方法&#xff0c;如下表所示列出了目前字符串内建支持的方法&#xff0c;所有的方法都包含了对Unicode的支持&#xff0c;有一些甚至是专门用…

休息使用Jersey –包含JAXB,异常处理和客户端程序的完整教程

最近&#xff0c;我开始使用Jersey API开发一个Restful Web服务项目。 在线提供了一些教程&#xff0c;但是我遇到了异常处理方面的一些问题&#xff0c;而且在使用JaxB和提供异常处理方法的完整项目中找不到任何地方。 因此&#xff0c;一旦我能够使用带有异常处理和客户端程序…

python基于web可视化_独家 | 基于Python实现交互式数据可视化的工具(用于Web)

转自&#xff1a;数据派ID&#xff1a;datapi 作者&#xff1a;Alark Joshi 翻译&#xff1a;陈雨琳 校对&#xff1a;吴金笛 本文2200字&#xff0c;建议阅读8分钟。 本文将介绍实现数据可视化的软件包。 这学期&#xff08;2018学年春季学期&#xff09;我教授了一门关于数据…

SASS简介及使用方法

一、什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具&#xff0c;它允许你使用变量、条件语句等&#xff0c;使开发更简单可维护。这里是官方文档。 二、基本语法 1&#xff09;变量 sass的变量名必须是一个$符号开头&#xff0c;后面紧跟变量名…

【转】Java方向如何准备BAT技术面试答案(汇总版)

原文地址&#xff1a;http://www.jianshu.com/p/1f1d3193d9e3 这个主题的内容之前分三个篇幅分享过&#xff0c;导致网络上传播的比较分散&#xff0c;所以本篇做了一个汇总&#xff0c;同时对部分内容及答案做了修改&#xff0c;欢迎朋友们吐槽、转发。因为篇幅长度和时间的原…

numpy维度交换_“lazy”的transpose()函数——从numpy 数组的内存布局讲起

1 数组的两种内存布局方式行优先与列优先首先我们回顾一下&#xff0c;矩阵数据在内存中的两种布局方式&#xff1a;行优先&#xff08;row-major&#xff09;&#xff1a;以行为优先单位&#xff0c;在内存中逐行存储/读取&#xff1b;对于多维&#xff0c;意味着当线性扫描内…

云耀服务器切换系统,【计算】云耀服务器-常见操作汇总指南

通过上期的介绍&#xff0c;相信大家对于云耀云服务器的基本知识有了一个了解。云耀云服务器是一个具备独立、完整的操作系统和网络功能&#xff0c;可快速搭建简单应用的新一代云服务器。接下来&#xff0c;本期为大家带来关于云耀云服务器使用中的一些简单方法和小技巧。1.云…

机器学习应该准备哪些数学预备知识?

转 https://www.zhihu.com/question/36324957 https://www.zhihu.com/question/36324957/answer/139408269 机器学习应该准备哪些数学预备知识&#xff1f; 数据分析师&#xff0c;工作中经常使用机器学习模型&#xff0c;但是以调库为主。 自己一直也在研究算法&#xff0c;也…

react usecontext_Vue3原理实战运用,我用40行代码把他装进了React做状态管理

前言vue-next是Vue3的源码仓库&#xff0c;Vue3采用lerna做package的划分&#xff0c;而响应式能力vue/reactivity被划分到了单独的一个package中。如果我们想把它集成到React中&#xff0c;可行吗&#xff1f;来试一试吧。使用示例话不多说&#xff0c;先看看怎么用的解解馋吧…

Spring MVC –自定义RequestMappingHandlerMapping

在xml bean定义文件中使用<mvc&#xff1a;annotation-driven />配置Spring MVC时&#xff0c;在内部将一个名为RequestMappingHandlerMapping的组件注册到Spring MVC。 该组件或通常是HandlerMapping组件负责将请求URI路由到处理程序&#xff0c;这些处理程序是使用Requ…

css的三个特性 背景透明设置

关于行内元素&#xff08;补充一点&#xff09; 行内元素只能容纳文本或其他行内元素。&#xff08;a特殊a里面可以放块级元素&#xff09; 例子&#xff1a; 关于行高tip: 选择器的嵌套层级不应大于3级&#xff0c;位置靠后的限定条件应尽可能的精确。 属性定义必须另起一行…

比较容易犯的一些智障错误(不定时修改)

无论在什么学习中&#xff0c;在成长的过程中&#xff0c;注定要犯一些错误&#xff0c;有些比较高级的错误&#xff0c;有些是比较智障的错误。那么在oi的学习中&#xff0c;我们最讨厌的就是一些智障的小错误&#xff0c;因为如果是大错误的话一般情况下在测试样例的时候都是…

ccs安装多版本编译器离线_大数据分析:学习工具JDK,在线安装指南

hadoop是使用Java语言开发的并且Hadoop运行需要有Java环境的支持&#xff0c;因此在安装hadoop之前需要安装Java开发环境即JDK(Java Development Kit)。安装前首先向大家介绍以一下本文会用到的几个词&#xff1a;JAVA_HOME:一是为了方便引用&#xff0c;比如&#xff0c;JDK安…

HTML基础入门学习准备篇

在学习前端的开始&#xff0c;让我们一起来了解什么是HTML5时代的大前端开发和全栈开发的定义传统的前端&#xff1a;切图-标签和样式-实现效果H5时代的前端&#xff1a;一、需要各端的兼容开发二、可以用于APP开发和移动站点的开发三、Ajax服务器端技术开发四、高级设计模式和…

asp.net尚未在web服务器上注册_最新版Web服务器项目详解 00 项目概述

点 击 关 注 上 方&#xff02;两猿社&#xff02;设 为&#xff02;置 顶 或 星 标&#xff02;&#xff0c;干 货 第 一 时 间 送 达。互 联 网 猿 | 两 猿 社TineyWebServerLinux下C轻量级Web服务器&#xff0c;助力初学者快速实践网络编程&#xff0c;搭建属于自己的服务器…

python正则r的作用_Python正则表达式,这一篇就够了!

原标题&#xff1a;Python正则表达式&#xff0c;这一篇就够了&#xff01;大多数编程语言的正则表达式设计都师从Perl&#xff0c;所以语法基本相似&#xff0c;不同的是每种语言都有自己的函数去支持正则&#xff0c;今天我们就来学习 Python中关于 正则表达式的函数。re模块…

服务器微信了早上好,每天早上好的问候语 微信早安问候语合集66句

1、没有伞的孩子&#xff0c;必须努力奔跑&#xff01;早安&#xff01;2、你不能改变过去&#xff0c;但你可以改变未来。早安&#xff01;3、坚持了才叫梦想&#xff0c;放弃了就只是妄想。早安&#xff01;4、忘掉失败&#xff0c;不过要牢记失败中的教训。早安&#xff01;…

如何得到某个文件的旧版本

下载某个文件的旧版本 如果想要得到某个文件的旧版本&#xff0c;只需在该文件上单击右键&#xff0c;选择Updata to revision…即可。 系统会提示输入版本号。 例如要下载soc_1的第五个版本&#xff0c;只需填入5即可。如图7。 查看完版本5的文件后&#xff0c;如果想在此回到…