Heim > Artikel > Web-Frontend > HTML-Layout: Implementierungscode des dreispaltigen HTML-Layouts
HTML-Layout: Implementierungscode des dreispaltigen HTML-Layouts
- 不言Original
- 2018-08-07 11:38:154458Durchsuche
Der Inhalt dieses Artikels befasst sich mit dem HTML-Layout: Der Implementierungscode des dreispaltigen HTML-Layouts hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.
Zeichnet hauptsächlich einen vollständigen Layoutstil auf, um ungefähr drei Spalten auf der Seite zu erreichen, von denen die linke und rechte Spalte eine adaptive Breite und die mittlere eine feste Breite haben.
CSS-Stilcode:
/********************
*公共标签样式
********************//*********************
*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-Codelayout:
@{
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>Endgültige Effektanzeige:
Empfohlene verwandte Artikel :
div-Tag: Implementierung von horizontaler und vertikaler Zentrierung (mit Code)
Was ist responsives Layout? Implementierung eines responsiven HTML-Layouts
Welche gängigen Arten von HTML-Layouts gibt es? Analyse der drei Layoutmerkmale von HTML
Das obige ist der detaillierte Inhalt vonHTML-Layout: Implementierungscode des dreispaltigen HTML-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!