布局十八般武艺先生都在那里了,css布局使用

CSS 布局十八般武艺先生都在此地了

2017/03/25 · CSS ·
布局

原稿出处: 码蜂社   

目录

目录

  • 常用居中
    1. 笔直居中
    2. 水平居中
    3. 笔直水平居中
  • 单列布局
  • 双列&三列布局

 

CSS布局

布局是CSS中八个着重部分,本文总计了CSS布局中的常用技巧,包含常用的档次居中、垂直居中方法,以及单列布局、多列布局的有余兑现格局(包含古板的盒模型布局和比较新的flex布局达成),希望能给需求的伙伴带来一些声援。

  1. 常用居中方法
    • 水平居中
    • 笔直居中
  2. 单列布局
  3. 二列&三列布局
    • float+margin
    • position+margin
    • 圣杯布局(float+负margin)
    • 双飞翼布局(float+负margin)
    • flex布局
  4. 总结

常用居中

CSS布局

目录

  1. 常用居中方法
    • 水平居中
    • 垂直居中
  2. 单列布局
  3. 二列&三列布局
    • float+margin
    • position+margin
    • 圣杯布局(float+负margin)
    • 双飞翼布局(float+负margin)
    • flex布局
  4. 总结

1. 常用居中艺术
居中在布局中很普遍,大家只要DOM文档结构如下,子成分要在父成分中居中:

笔直居中

单行文本垂直居中

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
   line-height: 200px;
}

图表垂直居中

<div class="parent">
    ![](image.png)
</div>

.parent {
    line-height: 200px;
}
.parent img {
    vertical-align: middle;
}

table方法

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
    display: table;
    height: 100px;
}

.child {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

flex方法

<div class="parent">
    <div class="child">child</div>
</div>

.parent {
   display: flex;
   align-items: center;
}

css translate

.parent {
    height: 100px;
    /*不设置高度则要设置如下*/
    /*position:relative;*/
}

.child {
    /*不设置高度则要设置绝对定位*/
    /*position:absolute;*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

布局是CSS中3个非同儿戏片段,本文统计了CSS布局中的常用技巧,包涵常用的品位居中、垂直居中方法,以及单列布局、多列布局的七种兑现格局(包蕴古板的盒模型布局和比较新的flex布局完结),希望能给须求的伴儿带来一些协助。

1.常用居中艺术

居中在布局中很常见,大家假使DOM文档结构如下,子成分要在父成分中居中:

XHTML

<div class=”parent”> <div class=”child”></div>
</div>

1
2
3
<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>
水平居中
<div class="parent">
     <div class="child">child</div>
</div>

行内成分:对父成分设置text-align:center;

定宽块状成分: 设置左右margin值为auto;

不定宽块状成分:
设置子成分为display:inline,然后在父成分上设置text-align:center;

css3 translate

.parent {
position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

通用方案: flex布局,对父成分设置display:flex;justify-content:center;

.parent,
.child {
    border: 1px solid red;
}
.child {
     /*display: inline;*/
}
.parent {
     /*text-align: center;*/
    display: flex;
    justify-content: center;
}```
#####水平垂直居中

position: absolute/fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background: red;

position: fixed/absolute;
width: 160px;
height: 160px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: pink;

position: absolute;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: green;

#### 单列布局
![](http://upload-images.jianshu.io/upload_images/2065390-25c6a8e53ff1f2f9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
特征:**定宽、水平居中**
常见的单列布局有两种:
一种是header、content、footer宽度都相同,其一般不会占满浏览器的最宽宽度,但当浏览器宽度缩小低于其最大宽度时,宽度会自适应。
一种是header、footer宽度为浏览器宽度,但content以及header和footer里的内容却不会占满浏览器宽度。

对于第一种,对header、content、footer统一设置width或max-width,并通过margin:auto实现居中。

<div class=”layout”>
<div id=”header”>头部</div>
<div id=”content”>内容</div>
<div id=”footer”>尾部</div>
</div>

.layout {
    /* width: 960px; */
    /*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
}

对于第二种,header、footer的内容宽度为100%,但header、footer的内容区以及content统一设置width 或 max-width,并通过margin:auto实现居中。

<div id=”header”>
<div class=”layout”>头部</div>
</div>
<div id=”content” class=”layout”>内容</div>
<div id=”footer”>
<div class=”layout”>尾部</div>
</div>

.layout {
    /* width: 960px; */
    /*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
}


#### 二列&三列布局
![](http://upload-images.jianshu.io/upload_images/2065390-06862f5dabd3ef11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
二列布局的特征是侧栏固定宽度,主栏自适应宽度。三列布局的特征是两侧两列固定宽度,中间列自适应宽度。
之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲同工之妙。对于传统的实现方法,主要讨论上图中前三种布局,经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局,对于flex布局,实现了上图的五种布局。
######a. float+margin
**原理说明**:设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应。

<div id=”content”>
<div class=”sub”>sub</div>
<div class=”extra”>extra</div>
<div class=”main”>main</div>
</div>

**布局步骤**:
对两边侧栏分别设置宽度,并对左侧栏添加左浮动,对右侧栏添加有浮动。
对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

.sub{ width: 100px; float: left;}
.extra{ width: 200px; float: right;}
.main{ margin-left: 100px; margin-right: 200px;}

**一些说明**:
注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。  
这种布局方式比较简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较重要的主面板。

**二列的实现方法**
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。
######b. position+margin
**原理说明**:通过绝对定位将两个侧栏固定,同样通过外边距给两个侧栏腾出空间,中间列自适应。

<div class=”sub”>left</div>
<div class=”main”>main</div>
<div class=”extra”>right</div>

**布局步骤**:
对两边侧栏分别设置宽度,设置定位方式为绝对定位。
设置两侧栏的top值都为0,设置左侧栏的left值为0, 右侧栏的right值为0。
对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

.sub, .extra { position: absolute; top: 0; width: 200px;}
.sub { left: 0;}
.extra { right: 0; }
.main { margin: 0 200px;}

**一些说明**:
本方法不限制DOM书写顺序,先写主面板会使主面板部分优先渲染(一般主面板会比侧栏内容重要)。
与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定。
如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠。

**二列的实现方法**
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。
######c. 圣杯布局(float + 负margin)
**原理说明**:
主面板设置宽度为100%,主面板与两个侧栏都设置浮动,常见为左浮动,这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容,在外层设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局,调整两个侧栏到相应的位置。

<div id=”bd”>
<div class=”main”></div>
<div class=”sub”></div>
<div class=”extra”></div>
</div>

**布局步骤**:
三者都设置向左浮动。
设置main宽度为100%,设置两侧栏的宽度。
设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
设置main的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度。

<style>
.main {
float: left;
width: 100%;
}

.sub {
    float: left;
    width: 190px;
    margin-left: -100%;
    position: relative;
    left: -190px;
}

.extra {
    float: left;
    width: 230px;
    margin-left: -230px;
    position: relative;
    right: -230px;
}

#bd {
    padding: 0 230px 0 190px;
}

</style>

**一些说明**
DOM元素的书写顺序不得更改。
主面板部分优先渲染(一般主面板会比侧栏内容重要)。
当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。

**二列的实现方法**
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的padding-right值,其他操作相同。反之亦然。
######d. 双飞翼布局(float + 负margin )
**原理说明**:
双飞翼布局和圣杯布局的思想有些相似,都利用了浮动和负边距,但双飞翼布局在圣杯布局上做了改进,在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言,main的margin值变化便不会影响两个侧栏,因此省掉了对两侧栏设置相对布局的步骤。

<div class=”main-wrap”>
<div class=”main”>#main</div>
</div>
<div class=”sub”></div>
<div class=”extra”></div>

**布局步骤**:
三者都设置向左浮动。
设置main-wrap宽度为100%,设置两个侧栏的宽度。
设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
设置main的margin值给左右两个子面板留出空间。

<style>
.main-wrap {
float: left;
width: 100%;
}

.sub {
    float: left;
    width: 190px;
    margin-left: -100%;
}

.extra {
    float: left;
    width: 230px;
    margin-left: -230px;
}

.main {
    margin: 0 230px 0 190px;
}

</style>

**一些说明**
主面板部分优先渲染(一般主面板会比侧栏内容重要)。
圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局,以及对应的left和right值。
通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 190px;,可以实现sub+extra+main的布局。

**二列的实现方法**
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置main-wrap的margin-right值,其他操作相同。反之亦然。
######e. flex布局

[Flex 布局教程:语法篇 - 阮一峰的网络日志](http://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2015/07/flex-grammar.html%3Futm_source%3Dtuicool)
[Flex 布局教程:实例篇 - 阮一峰的网络日志](http://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2015/07/flex-examples.html)
以下是五种布局的flex布局代码:

<div class=”layout”>
<aside class=”aside”>侧边栏宽度固定</aside>
<div class=”main”>主内容栏宽度自适应</div>
布局十八般武艺先生都在那里了,css布局使用。</div>
<div class=”layout”>
<div class=”main”>主内容栏宽度自适应</div>
<aside class=”aside”>侧边栏宽度固定</aside>
</div>
<div class=”layout”>
<aside class=”aside”>左边边栏宽度固定</aside>
<div class=”main”>主内容栏宽度自适应</div>
<aside class=”aside”>左侧边栏宽度固定</aside>
</div>
<div class=”layout”>
<aside class=”aside”>第三个侧面栏宽度固定</aside>
<aside class=”aside”>第二个侧面栏宽度固定</aside>
<div class=”main”>主内容栏宽度自适应</div>
</div>
<div class=”layout”>
<div class=”main”>主内容栏宽度自适应</div>
<aside class=”aside”>首个侧面栏宽度固定</aside>
<aside class=”aside”>第二个侧面栏宽度固定</aside>
</div>

<style>
.layout {
display: flex;
}

.main {
    flex: 1;
}

.aside {
    width: 200px;
}

</style>

目录

水平居中

子成分为行内元素如故块探花素,宽度一定还是幅度未定,选取的布局方案不相同。上面举行分析:

行内成分:对父成分设置text-align:center;
定宽块状成分: 设置左右margin值为auto;
兵慌马乱宽块探花素:
设置子元素为display:inline,然后在父成分上安装text-align:center;
美高梅开户网址,通用方案:
flex布局,对父成分设置display:flex;justify-content:center;

水平居中
子成分为行内元素如故块探花素,宽度一定还是幅度未定,采用的布局方案不相同。
子成分为:
行内元素:对父成分设置text-align:center;
定宽块状成分: 设置左右margin值为auto;
兵慌马乱宽块状成分:
设置子成分为display:inline,然后在父元素上安装text-align:center;
通用方案: flex布局,对父成分设置display:flex;justify-content:center;

1.常用居中方法:水平居中,垂直居中,

笔直居中

笔直居中对于子成分是单行内联文本、多行内联文本以及块状成分运用的方案是区其余。

父成分一定,子成分为单行内联文本:设置父成分的height相当于行高line-height
父成分一定,子元素为多行内联文本:设置父成分的display:table-cellinline-block,再设置vertical-align:middle;
块状成分:设置子元素position:fixed(absolute),然后设置margin:auto;
通用方案:
flex布局,给父成分设置{display:flex; align-items:center;}

笔直居中
笔直居中对于子成分是单行内联文本、多行内联文本以及块状成分运用的方案是例外的。
父元素一定,子成分为单行内联文本:
安装父成分的height等于行高line-height。
父成分一定,子成分为多行内联文本:安装父成分的display:table-cell或inline-block,再设置vertical-align:middle。
块状元素:
安装子成分position:absolute
并设置top、bottom为0,父成分要设置固定为static以外的值,margin:auto。
通用方案:
flex布局,给父成分设置{display:flex; align-items:center;}。

2.单列布局

2.单列搭架子

美高梅开户网址 1特点:定宽、水平居中

科普的单列布局有三种:

  • 一种是headercontentfooter步长都相同,其相似不会占满浏览器的最宽宽度,但当浏览器宽度压缩低于其最大幅面时,宽度会自适应。
  • 一种是headerfooter步长为浏览器宽度,但content以及headerfooter里的剧情却不会占满浏览器宽度。

对此第贰,种,对headercontentfooter统一设置widthmax-width,并通过margin:auto贯彻居中。

DOM文档:

XHTML

<div class=”layout”> <div id=”header”>头部</div>
<div id=”content”>内容</div> <div
id=”footer”>尾部</div> </div>

1
2
3
4
5
<div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div>
</div>

CSS清单:

CSS

.layout{ /* width: 960px;
*//*安装width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
max-width: 960px; margin: 0 auto; }

1
2
3
4
5
  .layout{
  /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
  }

对此第3种,headerfooter的故事情节宽度为百分之百,但headerfooter的内容区以及content合并安装max-width,并通过margin:auto落到实处居中。

DOM文档:

XHTML

<div id=”header”> <div class=”layout”>头部</div>
</div> <div id=”content” class=”layout”>内容</div>
<div id=”footer”> <div class=”layout”>尾部</div>
</div>

1
2
3
4
5
6
7
<div id="header">
  <div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

CSS清单:

CSS

.layout{ /* width: 960px;
*//*安装width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
max-width: 960px; margin: 0 auto; }

1
2
3
4
5
  .layout{
  /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
  }

2. 单列布局
特征:定宽、水平居中

3.二列&三列布局:float+margin,position+margin,圣杯布局(float+负margin),双飞翼布局(float+负margin),flex布局

3. 二列&三列布局

美高梅开户网址 2

二列布局的表征是侧栏固定宽度,主栏自适应宽度。三列布局的性状是两侧两列固定宽度,中间列自适应宽度。

于是将二列布局和三列布局写在同步,是因为二列布局可以视作去掉1个侧栏的三列布局,其布局的怀念有异曲同工之妙。对于古板的兑现方式,主要研究上图中前两种布局,经典的隐含侧栏的二栏布局以及富含左右边栏的三栏布局,对于flex布局,完成了上图的各个布局。

普遍的单列布局有二种:

借使你想学习互换html5css3等web前端技术,想多了然一些前端方面的内容,能够进入大家的QQ学习群:27062964,一起学习交换,进步本人,有学习资料和源码分享。只怕点击链接直接参加QQ群:

a. float+margin

原理表明:设置五个侧栏分别向左向右浮动,中间列通过异地距给八个侧栏腾出空间,中间列的大幅度根据浏览器窗口自适应。

DOM文档:

XHTML

<div id=”content”> <div class=”sub”>sub</div> <div
class=”extra”>extra</div> <div
class=”main”>main</div> </div>

1
2
3
4
5
<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

布局步骤:

  1. 对两边侧栏分别设置宽度,并对左侧栏添加左浮动,对右边栏添加有浮动。
  2. 对主面板设置左右外边距,margin-left的值为右边栏的大幅度,margin-right的值为左侧栏的增幅。

CSS清单:

CSS

.sub{ width: 100px; float: left; } .extra{ width: 200px; float: right; }
.main{ margin-left: 100px; margin-right: 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
.sub{
    width: 100px;
    float: left;
}
.extra{
    width: 200px;
    float: right;
}
.main{
    margin-left: 100px;
    margin-right: 200px;
}

局地证实:

* 注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。* 那种布局方式相比简单明了,但缺点是渲染时先渲染了侧边栏,而不是相比重大的主面板。

二列的兑现方式

假设是左手带有侧栏的二栏布局,则去掉右边栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。

  • 一种是header、content、footer宽度都如出一辙,其相似不会占满浏览器的最宽宽度,但当浏览器宽度压缩低于其最大幅面时,宽度会自适应。
  • 一种是header、footer宽度为浏览器宽度,但content以及header和footer里的内容却不会占满浏览器宽度。

 

b. position+margin

规律表明:通过相对定位将四个侧栏固定,同样通过异地距给八个侧栏腾出空间,中间列自适应。

DOM文档:

XHTML

<div class=”sub”>left</div> <div
class=”main”>main</div> <div
class=”extra”>right</div>

1
2
3
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

布局步骤:

  1. 对两边侧栏分别安装宽度,设置一定方式为相对定位。
  2. 安装两侧栏的top值都为0,设置左边栏的left值为0, 右边栏的right值为0。
  3. 对主面板设置左右外乡距,margin-left的值为左侧栏的幅度,margin-right的值为左边栏的肥瘦。

CSS清单:

CSS

.sub, .extra { position: absolute; top: 0; width: 200px; } .sub { left:
0; } .extra { right: 0; } .main { margin: 0 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sub, .extra {
    position: absolute;
    top: 0;
    width: 200px;
}
.sub {
    left: 0;
}
.extra {
    right: 0;
}
.main {
    margin: 0 200px;
}

有的评释:

  • 与上一种格局相比,本种方法是通过定点来落实侧栏的职位固定。
  • 一经中间栏含有细小宽度限制,或是含有宽度的其中因素,则浏览器窗口小到早晚程度,主面板与侧栏会时有发生重叠。

二列的达成格局

倘即便左侧带有侧栏的二栏布局,则去掉左侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。

对于第2种,对header、content、footer统一设置width或max-width,并透过margin:auto落成居中。

总结

c. 圣杯布局(float + 负margin + padding + position)

规律表达

主面板设置宽度为百分之百,主面板与八个侧栏都设置浮动,常见为左浮动,那时五个侧栏会被主面板挤下去。通过负边距将转移的侧栏拉上来,右边栏的负边距为百分之百,刚好是窗口的幅度,因而会从主面板上面的左手跑到与主面板对齐的左侧,右边栏此时生成在主面板下边的右边,设置负边距为负的自家宽度刚好浮动到主面板对齐的右手。为了避免侧栏遮挡主面板内容,在外围设置左右padding值为左右边栏的升幅,给侧栏腾出空间,此时主面板的增进率压缩。由于侧栏的负margin都是对立主面板的,七个侧栏并不会像大家可以中的停靠在左右两边,而是随着缩短的主面板一起向中档靠拢。此时利用相对布局,调整五个侧栏到对应的地方。

DOM文档:

XHTML

<div id=”bd”> <div class=”main”></div> <div
class=”sub”></div> <div class=”extra”></div>
</div>

1
2
3
4
5
<div id="bd">        
    <div class="main"></div>        
    <div class="sub"></div>        
    <div class="extra"></div>  
</div>

布局步骤:

  1. 三者都设置向左浮动。
  2. 设置main宽度为百分百,设置两侧栏的宽窄。
  3. 安装
    负边距,sub设置负右边距为百分百,extra设置负左侧距为负的自身宽度。
  4. 设置main的padding值给左右四个子面板留出空间。
  5. 安装七个子面板为相对固定,sub的left值为负的sub宽度,extra的right值为负的extra宽度。

CSS清单:

CSS

.main { float: left; width: 100%; } .sub { float: left; width: 190px;
margin-left: -100%; position: relative; left: -190px; } .extra { float:
left; width: 230px; margin-left: -230px; position: relative; right:
-230px; } #bd { padding: 0 230px 0 190px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.main {        
    float: left;      
    width: 100%;  
}  
.sub {      
    float: left;        
    width: 190px;        
    margin-left: -100%;              
    position: relative;  
    left: -190px;  
}  
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px;
    position: relative;
    right: -230px;  
}
#bd {        
    padding: 0 230px 0 190px;  
}

有的认证

  • DOM成分的书写顺序不得变更。
  • 当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。能够经过安装mainmin-width属性或行使双飞翼布局防止难题。

二列的贯彻格局

假设是左侧带有侧栏的二栏布局,则去掉左边栏,不要设置主面板的padding-right值,其余操作相同。反之亦然。

DOM文档:

1.常用居中艺术

d. 双飞翼布局(float + 负margin + margin)

规律表达

双飞翼布局和圣杯布局的想想有个别相似,都利用了变化和负边距,但双飞翼布局在圣杯布局上做了创新,在main要素上加了一层div,
并设置margin,由于两侧栏的负边距都以周旋于main-wrap而言,main的margin值变化便不会影响七个侧栏,因而节省了对两侧栏设置相对布局的步调。

DOM文档:

XHTML

<div id=”main-wrap” class=”column”> <div
id=”main”>#main</div> </div> <div
class=”sub”></div> <div class=”extra”></div>

1
2
3
4
5
<div id="main-wrap" class="column">
      <div id="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

布局步骤:

  1. 三者都安装向左浮动。
  2. 安装main-wrap宽度为百分之百,设置多个侧栏的增幅。
  3. 设置
    负边距,sub设置负右边距为百分百,extra设置负左侧距为负的本身宽度。
  4. 设置main的margin值给左右五个子面板留出空间。

CSS清单:

CSS

.main-wrap { float: left; width: 100%; } .sub { float: left; width:
190px; margin-left: -100%; } .extra { float: left; width: 230px;
margin-left: -230px; } .main { margin: 0 230px 0 190px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.main-wrap {        
    float: left;      
    width: 100%;  
}  
.sub {      
    float: left;        
    width: 190px;        
    margin-left: -100%;  
}  
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px;
}
.main {    
    margin: 0 230px 0 190px;
}

有的表明

  • 圣杯选取的是padding,而双飞翼采取的margin,化解了圣杯布局main的小不点儿宽度不能够小于左侧栏的缺点。
  • 双飞翼布局不用安装相对布局,以及相应的left和right值。
  • 经过引入相对布局,可以兑现三栏布局的种种组合,例如对左侧栏设置position: relative; left: 190px;,可以已毕sub+extra+main的布局。

二列的贯彻方式

假定是右侧带有侧栏的二栏布局,则去掉左侧栏,不要设置main-wrapmargin-right值,其他操作相同。反之亦然。

<div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div>
</div>

居中在布局中很广阔,我们若是DOM文档结构如下,子成分要在父成分中居中:

e. flex布局

只要您还尚无读书flex布局,阮一峰先生的两篇博文将会很合乎您。

阮一峰的博客——flex语法
阮一峰的博客——flex布局案例

以下是二种布局的flex布局代码:

DOM文档

XHTML

<div class=”layout”> <aside
class=”layout__aside”>侧边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>侧边栏宽度固定</aside> </div>
<div class=”layout”> <aside
class=”layout__aside”>左边边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>右边边栏宽度固定</aside> </div>
<div class=”layout”> <aside
class=”layout__aside”>第二,个侧面栏宽度固定</aside> <aside
class=”layout__aside”>第二个侧面栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>第2、个侧面栏宽度固定</aside> <aside
class=”layout__aside”>第三个侧面栏宽度固定</aside>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
</div>

CSS清单

CSS

.layout { display: flex; } .layout__main { flex: 1; } .layout__aside
{ width: 200px; }

1
2
3
4
5
6
7
8
9
.layout {
    display: flex;
}
.layout__main {
    flex: 1;
}
.layout__aside {
    width: 200px;
}

与事先所讲的三种价值观布局方案相比,flex布局的代码可谓卓殊简洁,而且特别通用,利用简易的三行CSS即落到实处了科普的各个布局。

CSS清单:

 

总结

古板的布局方法基于盒状模型,着重 display属性 + position属性 +
float特性,逻辑相对复杂,对于贯彻部分特殊效果,例如垂直居中,越发复杂繁琐。而flex布局中的flex容器可以按照实际可用空间动态调整子成分的宽高比和一一,使成分可以尽只怕地采纳可用空间,同时也能通过减少来防止过量。flex布局提供了一套简便、完整、响应式的布局方案。

flex布局将是CSS布局的可行性,还未正式成为专业的gird布局也拾壹分吸睛,于是乐乎上不少刚入门的小伙伴
有了管中窥豹
2017年,圣杯和双飞翼布局已经淘汰了,真的?,对于此小编个人如故持之以恒自个儿的观点前年,圣杯和双飞翼布局已经淘汰了,真的?
– Shelley Lee 的答疑 –
和讯,至少在当前过渡阶段,仍旧坚持不渝抓好基础,逐步前行。

本文完。

PS:将来会延续写Flex布局和Grid布局相关小说,欢迎持续关切,也欢迎大家对文章提出提议或意见。

参照链接
CSS垂直居中和程度居中
圣杯布局小结
双飞翼布局介绍-始于TmallUED_慕课猿问
自作者熟练的三种三栏网页宽度自适应布局方法 ”
张鑫旭-鑫空间-鑫生活
周边的二种布局计算

1 赞 26 收藏
评论

美高梅开户网址 3

.layout{
  /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
  }

美高梅开户网址 4

对于第一,种,header、footer的始末宽度为100%,但header、footer的内容区以及content统一安装width
或 max-width,并透过margin:auto落成居中。

 

DOM文档:

水平居中

<div id="header">
  <div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

子成分为行内元素照旧块状成分,宽度一定照旧幅度未定,采用的布局方案分化。上边举办辨析:

CSS清单:

行内成分:对父元素设置text-align:center;

.layout{
/*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
max-width: 960px;
margin: 0 auto;
}

定宽块状成分: 设置左右margin值为auto;

3. 二列&三列布局

兵慌马乱宽块状成分:
设置子成分为display:inline,然后在父元素上设置text-align:center;

二列布局的风味是侧栏固定宽度,主栏自适应宽度。三列布局的表征是两侧两列固定宽度,中间列自适应宽度。

通用方案: flex布局,对父成分设置display:flex;justify-content:center;

由此将二列布局和三列布局写在同步,是因为二列布局可以当作去掉一个侧栏的三列布局,其布局的思索有异曲同工之妙。对于古板的落到实处形式,主要商讨上图中前三种布局,经典的盈盈侧栏的二栏布局以及带有左左边栏的三栏布局,对于flex布局,落成了上图的各样布局。

笔直居中

a. float+margin

笔直居中对于子成分是单行内联文本、多行内联文本以及块状成分运用的方案是见仁见智的。

原理表达:安装七个侧栏分别向左向右浮动,中间列通过异地距给两个侧栏腾出空间,中间列的涨幅依据浏览器窗口自适应。

父成分一定,子成分为单行内联文本:设置父元素的height等于行高line-height

DOM文档:

父成分一定,子成分为多行内联文本:设置父成分的display:table-cell或inline-block,再设置vertical-align:middle;

<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

块状成分:设置子成分position:fixed(absolute),然后设置margin:auto;

布局步骤:

通用方案: flex布局,给父成分设置{display:flex; align-items:center;}。

  1. 对两边侧栏分别安装宽度,并对左边栏添加左浮动,对左边栏添加有浮动。
  2. 对主面板设置左右外市距,margin-left的值为左边栏的宽窄,margin-right的值为右边栏的宽窄。
    CSS清单:

    .sub{
    width: 100px;
    float: left;
    }
    .extra{
    width: 200px;
    float: right;
    }
    .main{
    margin-left: 100px;
    margin-right: 200px;
    }
    一对表明:

 

  • 在意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。
  • 那种布局情势相比简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较根本的主面板。
    二列的落到实处格局

2.单列搭架子

借使是左侧带有侧栏的二栏布局,则去掉左侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。

特征:定宽、水平居中

b. position+margin

美高梅开户网址 5

规律表明:通过相对定位将三个侧栏固定,同样通过异地距给多个侧栏腾出空间,中间列自适应。

大规模的单列布局有三种:

DOM文档:

一种是header、content、footer宽度都一模一样,其貌似不会占满浏览器的最宽宽度,但当浏览器宽度压缩低于其最大开间时,宽度会自适应。

<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

一种是header、footer宽度为浏览器宽度,但content以及header和footer里的情节却不会占满浏览器宽度。

布局步骤:

对此第1种,对header、content、footer统一安装width或max-width,并透过margin:auto达成居中。

  1. 对两边侧栏分别设置宽度,设置固定格局为相对定位。
  2. 安装两侧栏的top值都为0,设置左边栏的left值为0, 左边栏的right值为0。
  3. 对主面板设置左右各市距,margin-left的值为左侧栏的宽窄,margin-right的值为左边栏的宽窄。
    CSS清单:

    .sub, .extra {
    position: absolute;
    top: 0;
    width: 200px;
    }
    .sub {
    left: 0;
    }
    .extra {
    right: 0;
    }
    .main {
    margin: 0 200px;
    }
    有的表达:

DOM文档:

  • 本办法不限定DOM书写顺序,先写主面板会使主面板部分优先渲染(一般主面板会比侧栏内容主要)。
  • 与上一种艺术相比较,本种方法是因而一定来兑现侧栏的职位固定。
  • 固然中间栏含有纤维宽度限制,或是含有宽度的其中因素,则浏览器窗口小到一定水准,主面板与侧栏会生出重叠。
    二列的完结格局

 

如倘若左手带有侧栏的二栏布局,则去掉右边栏,不要设置主面板的margin-right值,其余操作相同。反之亦然。

美高梅开户网址 6

c. 圣杯布局(float + 负margin)

CSS清单:

原理表明:

 

主面板设置宽度为百分之百,主面板与八个侧栏都安装浮动,常见为左浮动,那时多个侧栏会被主面板挤下去。通过负边距将转变的侧栏拉上来,左边栏的负边距为百分之百,刚好是窗口的宽窄,由此会从主面板上面的左边跑到与主面板对齐的左侧,左侧栏此时生成在主面板上边的左侧,设置负边距为负的自家宽度刚好浮动到主面板对齐的右手。为了幸免侧栏遮挡主面板内容,在外围设置左右padding值为左左边栏的升幅,给侧栏腾出空间,此时主面板的增加率压缩。由于侧栏的负margin都以周旋主面板的,三个侧栏并不会像大家可以中的停靠在左右两边,而是随着裁减的主面板一起向中档靠拢。此时利用相对布局,调整八个侧栏到对应的地方。

美高梅开户网址 7

DOM文档:

对于第壹,种,header、footer的故事情节宽度为百分百,但header、footer的内容区以及content统一安装max-width,并经过margin:auto达成居中。

<div class="bd">         
    <div class="main"></div>        
    <div class="sub"></div>        
    <div class="extra"></div>  
</div>

DOM文档:

布局步骤:

 

  1. 三者都设置向左浮动。
  2. 设置main宽度为百分百,设置两侧栏的增加率。
  3. 安装
    负边距,sub设置负右侧距为百分百,extra设置负左侧距为负的自家宽度。
  4. 安装main的padding值给左右多少个子面板留出空间。
  5. 安装八个子面板为相对固化,sub的left值为负的sub宽度,extra的right值为负的extra宽度。
    CSS清单:

    .main {
    float: left;
    width: 100%;
    }
    .sub {
    float: left;
    width: 190px;
    margin-left: -100%;
    position: relative;
    left: -190px;
    }
    .extra {
    float: left;
    width: 230px;
    margin-left: -230px;
    position: relative;
    right: -230px;
    }
    .bd {
    padding: 0 230px 0 190px;
    }
    局部证实

美高梅开户网址 8

  • DOM成分的书写顺序不得更改。
  • 主面板部分优先渲染(一般主面板会比侧栏内容重点)。
  • 当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。可以因此设置main的min-width属性或选用双飞翼布局幸免难点。
    二列的贯彻情势

CSS清单:

假定是左手带有侧栏的二栏布局,则去掉左边栏,不要设置主面板的padding-right值,其余操作相同。反之亦然。

 

d. 双飞翼布局(float + 负margin )

美高梅开户网址 9

规律表达:

 

双飞翼布局和圣杯布局的思维有些相似,都应用了变动和负边距,但双飞翼布局在圣杯布局上做了立异,在main元素上加了一层div,
并设置margin,由于两侧栏的负边距都以相对于main-wrap而言,main的margin值变化便不会潜移默化七个侧栏,因而节省了对两侧栏设置相对布局的步骤。

  1. 二列&三列布局

DOM文档:

 

<div class="main-wrap">
      <div class="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

美高梅开户网址 10

布局步骤:

二列布局的性状是侧栏固定宽度,主栏自适应宽度。三列布局的特点是两侧两列固定宽度,中间列自适应宽度。

  1. 三者都安装向左浮动。
  2. 安装main-wrap宽度为百分百,设置多个侧栏的升幅。
  3. 设置
    负边距,sub设置负右边距为100%,extra设置负左侧距为负的自小编宽度。
  4. 设置main的margin值给左右七个子面板留出空间。
    CSS清单:

    .main-wrap {
    float: left;
    width: 100%;
    }
    .sub {
    float: left;
    width: 190px;
    margin-left: -100%;
    }
    .extra {
    float: left;
    width: 230px;
    margin-left: -230px;
    }
    .main {
    margin: 0 230px 0 190px;
    }
    有些表明

由此将二列布局和三列布局写在共同,是因为二列布局可以看做去掉三个侧栏的三列布局,其布局的思辨有异曲同工之妙。对于传统的落实格局,紧要商讨上图中前两种布局,经典的隐含侧栏的二栏布局以及带有左右边栏的三栏布局,对于flex布局,完成了上图的两种布局。

  • 主面板部分优先渲染(一般主面板会比侧栏内容首要)。
  • 圣杯采用的是padding,而双飞翼选择的margin,化解了圣杯布局main的蝇头宽度不能小于左边栏的老毛病。
  • 双飞翼布局不用安装相对布局,以及对应的left和right值。
  • 透过引入绝对布局,可以兑现三栏布局的各个组合,例如对左侧栏设置position:
    relative; left: 190px;,可以兑现sub+extra+main的布局。
    二列的完结方式

a. float+margin

一旦是左手带有侧栏的二栏布局,则去掉右边栏,不要设置main-wrap的margin-right值,其余操作相同。反之亦然。

规律表明:设置三个侧栏分别向左向右浮动,中间列通过异地距给五个侧栏腾出空间,中间列的小幅依照浏览器窗口自适应。

e. flex布局

DOM文档:

假定你还尚无上学flex布局,阮一峰先生的两篇博文将会很符合你。

 

Flex 布局教程:语法篇 –
阮一峰的互连网日志

美高梅开户网址 11

Flex 布局教程:实例篇 –
阮一峰的互连网日志

布局步骤:

以下是种种布局的flex布局代码:

对两边侧栏分别设置宽度,并对左边栏添加左浮动,对右边栏添加有浮动。

DOM文档:

对主面板设置左右外乡距,margin-left的值为右侧栏的小幅,margin-right的值为左侧栏的宽度。

<div class="layout">
    <aside class="aside">侧边栏宽度固定</aside>
    <div class="main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="main">主内容栏宽度自适应</div>
    <aside class="aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="aside">左侧边栏宽度固定</aside>
    <div class="main">主内容栏宽度自适应</div>
    <aside class="aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="aside">第1个侧边栏宽度固定</aside>
    <aside class="aside">第2个侧边栏宽度固定</aside>
    <div class="main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="main">主内容栏宽度自适应</div>
    <aside class="aside">第1个侧边栏宽度固定</aside>
    <aside class="aside">第2个侧边栏宽度固定</aside>
</div>

CSS清单:

CSS清单

 

.layout {
    display: flex;
}
.main {
    flex: 1;
}
.aside {
    width: 200px;
}

美高梅开户网址 12

与前边所讲的三种价值观布局方案相比,flex布局的代码可谓格外简洁,而且十二分通用,利用简易的三行CSS即完成了常见的五种布局。

一部分认证:

总结

* 注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。* 那种布局格局相比简单明了,但缺点是渲染时先渲染了侧边栏,而不是相比较关键的主面板。

观念的布局方法基于盒状模型,依赖 display属性 + position属性 +
float属性,逻辑相对复杂,对于完结部分特殊效果,例如垂直居中,特别复杂繁琐。而flex布局中的flex容器可以根据实际可用空间动态调整子成分的宽高比和顺序,使成分能够尽只怕地动用可用空间,同时也能透过收缩来幸免过量。flex布局提供了一套简便、完整、响应式的布局方案。

二列的落实方式

正文转发自今日头条

一旦是左手带有侧栏的二栏布局,则去掉左边栏,不要设置主面板的margin-right值,其余操作相同。反之亦然。

b. position+margin

规律表明:通过相对定位将几个侧栏固定,同样通过异地距给八个侧栏腾出空间,中间列自适应。

DOM文档:

 

美高梅开户网址 13

布局步骤:

对两边侧栏分别设置宽度,设置一定形式为相对定位。

安装两侧栏的top值都为0,设置左边栏的left值为0, 右边栏的right值为0。

对主面板设置左右外乡距,margin-left的值为左边栏的小幅,margin-right的值为左边栏的宽度。

CSS清单:

 

美高梅开户网址 14

有些验证:

与上一种方法相比较,本种方法是经过固定来完结侧栏的岗位固定。

假若中间栏含有纤维宽度限制,或是含有宽度的里边因素,则浏览器窗口小到自然水平,主面板与侧栏会发出重叠。

二列的落到实处格局

借使是左侧带有侧栏的二栏布局,则去掉右边栏,不要设置主面板的margin-right值,其余操作相同。反之亦然。

c. 圣杯布局(float + 负margin + padding + position)

原理表达:

主面板设置宽度为百分百,主面板与多个侧栏都安装浮动,常见为左浮动,那时五个侧栏会被主面板挤下去。通过负边距将转移的侧栏拉上来,左侧栏的负边距为百分百,刚好是窗口的增幅,由此会从主面板下边的左手跑到与主面板对齐的左手,左边栏此时转变在主面板下边的右侧,设置负边距为负的自身宽度刚好浮动到主面板对齐的出手。为了幸免侧栏遮挡主面板内容,在外围设置左右padding值为左右边栏的宽度,给侧栏腾出空间,此时主面板的宽窄压缩。由于侧栏的负margin都以相对主面板的,七个侧栏并不会像我们好好中的停靠在左右两边,而是随着减少的主面板一起向中档靠拢。此时使用相对布局,调整八个侧栏到对应的岗位。

DOM文档:

 

美高梅开户网址 15

 

 

 

布局步骤:

三者都设置向左浮动。

设置main宽度为百分百,设置两侧栏的大幅度。

安装 负边距,sub设置负左侧距为100%,extra设置负左侧距为负的自家宽度。

安装main的padding值给左右多个子面板留出空间。

设置多个子面板为相对稳定,sub的left值为负的sub宽度,extra的right值为负的extra宽度。

CSS清单:

 

美高梅开户网址 16

局地证实

DOM成分的书写顺序不得转移。

当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。可以经过设置main的min-width属性或接纳双飞翼布局防止难题。

二列的完毕方式

若是是左手带有侧栏的二栏布局,则去掉左侧栏,不要设置主面板的padding-right值,其余操作相同。反之亦然。

d. 双飞翼布局(float + 负margin + margin)

规律表达:

双飞翼布局和圣杯布局的想想有个别相似,都施用了转移和负边距,但双飞翼布局在圣杯布局上做了校对,在main成分上加了一层div,
并设置margin,由于两侧栏的负边距都以对峙于main-wrap而言,main的margin值变化便不会潜移默化多个侧栏,因而节省了对两侧栏设置相对布局的手续。

DOM文档:

 

美高梅开户网址 17

 

 

布局步骤:

三者都设置向左浮动。

设置main-wrap宽度为百分百,设置三个侧栏的幅度。

安装 负边距,sub设置负左侧距为百分之百,extra设置负左侧距为负的自家宽度。

安装main的margin值给左右两个子面板留出空间。

CSS清单:

 

美高梅开户网址 18

一对声明

圣杯接纳的是padding,而双飞翼拔取的margin,化解了圣杯布局main的纤维宽度无法小于左侧栏的后天不足。

双飞翼布局不用安装相对布局,以及对应的left和right值。

通过引入相对布局,可以兑现三栏布局的种种组合,例如对左边栏设置position:
relative; left: 190px;,可以兑现sub+extra+main的布局。

二列的贯彻方式

即使是左边带有侧栏的二栏布局,则去掉左侧栏,不要设置main-wrap的margin-right值,其他操作相同。反之亦然。

以下是各样布局的flex布局代码:

DOM文档:

 

美高梅开户网址 19

CSS清单

 

美高梅开户网址 20

与事先所讲的二种传统布局方案比较,flex布局的代码可谓十一分简洁,而且丰硕通用,利用简易的三行CSS即落到实处了大面积的多种布局。

 

总结

价值观的布局方法基于盒状模型,正视display属性 +position属性
+float属性,逻辑相对复杂,对于贯彻部分特殊效果,例如垂直居中,尤其复杂繁琐。而flex布局中的flex容器可以依照实际可用空间动态调整子成分的宽高比和一壹,使成分可以尽量地拔取可用空间,同时也能由此压缩来防止超越。flex布局提供了一套简便、完整、响应式的布局方案。

读书进程中遇见哪些难题恐怕想赢得学习能源的话,欢迎参加学习沟通群
343599877,大家一并学前端!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图