栗子蛋糕Al 2021-07-16 09:38 采纳率: 100%
浏览 34
已采纳

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

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;
}

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-07-16 09:42
    关注

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已采纳回答 7月16日
  • 创建了问题 7月16日