flex 布局教程#
例子#
#container {
display: flex;
justify-content: center;
margin: 0 auto;
flex-direction: column; /*上下排列*/
}
#header {
display: flex;
margin: 0 auto;
flex-direction: column; /*上下排列*/
border-bottom: 6px solid gainsboro;
}
#sidebar {
width: 450px;
text-align: left;
overflow: hidden;
border: 1px solid #FFFFFF;
}
#menu {
display: flex;
justify-content: end;/*紧贴右侧对齐*/
}
#footer {
margin: 0 auto;
margin-top: 10px;
background-color: #0e3717;
text-align: center; /*文本居中*/
line-height: 60px;
color: white;
height: 60px; /*不设宽高无法判定背景颜色长宽*/
width: 900px;
}
#pagebody {
display: flex;
margin: 0 auto;
margin-top: 10px;
}
#mainbody img {
width: 100%;
}
#menu {
display: flex;
flex-wrap: wrap;
margin-top: -65px;
}
#banner {
margin-top: 22px;
bottom: 5px solid #000000;
clear: both
}
a {
text-decoration: none;/*取消下划线*/
color: #6f6f6f;
flex-direction: row; /*左右排列*/
}
a:hover {
color: #FF0000
}
ul {
list-style-type: none;/*取消原点*/
flex-wrap: wrap;
flex: 0 0 auto;
display: flex;
height: 150%;
margin-right: 10px;
}
li {
position: relative;/*绝对定位*/
align-items: center;
font-weight: 600;
border: none;
height: 150%;
margin-right: 5px;
}
li a {
display: flex;
width: 100%;
height: 150%;
}
li a::after { /*伪类*/
content: ""; /*加上后才能用这个伪类*/
border-right: gray solid 1px;
margin-left: 10px;
}
li:nth-child(11) a::after { /*li元素的第11个a取消掉线*/
border: none;
}