微信绑定网站,网站建设单选题,更改wordpress标签分割符合,网页设计基础作业不做过多解释#xff1a;主要是记录一个完整的布局样式#xff0c;实现页面大致三列其中左右两列是自适应宽度#xff0c;中间固定宽度效果。
不多少代码奉上#xff1a;
CSS样式代码#xff1a; /*********************公共标签样式********************//************…不做过多解释主要是记录一个完整的布局样式实现页面大致三列其中左右两列是自适应宽度中间固定宽度效果。
不多少代码奉上
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-equivx-ua-compatible contentIE9 /
title三列布局/title
!--页面样式--
link href~/Content/css/StyleTemplate/Index.css relstylesheet /
!--当前页面的逻辑 --
/head
body
!-- 主要区域 --
div classmain
!-- 主要区域 标题 --
div classmain-title
/div
div classcontent
div classcontent_title
div classflLeft padigLeft_15
span classfontBold名称/文号/span
input classint value发文文号001 /
/div
/div
div classarea
div classarea_left左边/div
div classarea_center中间/div
div classarea_right右边/div
/div
/div
/div
!--footer 底部区域 --
div classfooter
div classsubmit
!-- 提交 按钮 --
a classsubmit-btn onclickwindow.print()
流程转交
/a
/div
/div
/body
/html 最终效果展示 本文转载于:猿2048➫https://www.mk2048.com/blog/blog.php?idi0c0k0jtitlehtml 三列布局两列自适应一列固定宽度
