Web前端页面设计代码的讲解

Question

body{
margin: 0 0;
}
li{
list-style: none;
}
a{
color: #2f2f2f2;
}
.header{
width: 800px;
height: 700px;
margin: auto;
background-image: url(../imgs/
bad05655461f4b3323390cc6559b430.jpg);
background-size: 100% 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}

.left{
width: 40%;
height: 100%;
}
.left img{
width: 180px;
height: 180px;
margin: 90px;
border-radius: 50%;
}
.left li{
color: #2f2f2f;
font-size: 18px;
font-weight: 600;
line-height: 50px;
margin-left: 90px;
}
.right{
width: 58%;
height: 100%;
}
.right div{
margin-top: 80px;

}
.right li{
color: #2f2f2f;
font-size: 18px;
font-weight: 600;
line-height: 50px;
margin-left: 30px;
}

Answer 1

有什么疑问吗？具体哪个属性不懂，我看了一下都是基础属性，唯一有难点的时flex属性
display: flex; //flex属性，可以使子元素，块元素变成行内元素展示。效果类似于浮动
flex-direction: row; //flex主轴方向 主轴为水平方向，起点在左端。
justify-content: space-between; //属性定义了项目在主轴上的对齐方式。 space-between：两端对齐，项目之间的间隔都相等。

具体可以看看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html