任务是写古力娜扎的微博，分好几次写的，今天记录一下，现在的作品
要求是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>Flex direction</title>
</head>
<body>
<div class="person-info">
<div class="naver">
<div class="icon">
<div class="weibo">
<img class="vip" src="./images/vip.png">
<span class="a">微博认证</span>
</div>
<i class="divider"></i>
<img class="flag" src="./images/flag.png">
<img class="panda" src="./images/panda.png">
</div>
<div class="name">演员，代表作《择天记》</div>
</div>
<div class="add">
<img class="address" src="./images/address.png">
<span class="b">北京</span>
</div>
<div class="brief">
<img class="file" src="./images/file.png">
<span class="c">简介：工作请联系：[email protected]</span>
</div>
<div class="boke">
<img class="link" src="./images/link.png">
<span class="d">博客地址：</span>
<span class="e">http://www.renren.com/project.do?id=325727008</span>
</div>
<div class="label">
<img class="tag" src="./images/tag.png">
<span class="f">标签</span>
<span class="g">舞蹈平面</span>
</div>
<div class="more">
<span class="h">查看更多</span>
<img class="arrow" src="./images/arrow-right.png">
</div>
</div>
</body>
</html>
css里面是
html,
body {
height: 100%;
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
h1,
h2 {
margin: 0;
}
p {
margin: 0;
padding: 0;
}
/* 浏览器都有自己的默认样式，以上部分为清除浏览器默认样式 */
.person-info {
/* margin: 0 auto;可使内容在整个页面中水平居中 */
margin: 0 auto;
}
.naver{
width: 300px;
height: 81px;
border: 1px solid rgba(242,242,245,1);
}
.icon{
display: flex;
}
.weibo{
width: 90px;
height: 28px;
border-radius: 50px;
opacity: 1;
background: rgba(253,183,61,1);
display: flex;
justify-content: center;
align-items: center;
margin: 13px 0 10px 20px;
}
.vip{
width: 14px;
height: 12.25px;
opacity: 1;
box-shadow: 0 1px 1px 0 rgba(223.13,150.87,24.17,0.37);
margin-right: 4px;
}
.a{
width: 48px;
height: 20px;
opacity: 1;
color: rgba(255,255,255,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: center;
line-height: 20px;
}
.divider{
width: 1px;
height: 28px;
opacity: 1;
background-color: rgba(217,217,217,1);
margin: 13px 11px 10px 10px;
}
.flag{
width: 16px;
height: 14px;
opacity: 1;
margin: 20px 10px 17px 0px;
}
.panda{
width: 16px;
height: 14px;
opacity: 1;
margin-top: 20px;
}
.name{
width: 132px;
height: 17px;
opacity: 1;
color: rgba(20.19,20.19,20.19,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
margin-left: 20px;
line-height: 20px;
}
.add{
width: 300px;
height: 37px;
display: flex;
align-items: center;
}
.address{
width: 10px;
height: 13.37px;
opacity: 1;
margin-left: 20px;
margin-right: 8px;
}
.b{
width: 24px;
height: 17px;
opacity: 1;
color: rgba(0,0,0,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
}
.brief {
width: 300px;
height: 55px;
border: 1px solid rgba(242,242,245,1);
display: flex;
align-items: center;
}
.file{
width: 11px;
height: 12px;
opacity: 1;
margin-left: 20px;
margin-right: 7px;
margin-top: -20px;
}
.c{
width: 161px;
height: 34px;
opacity: 1;
color: rgba(0,0,0,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
}
.boke {
width: 300px;
height: 55px;
/* border: 1px solid rgba(242,242,245,1);*/
display: flex;
align-items: center;
/*flex-wrap: wrap;*/
}
.link{
width: 11px;
height: 12px;
opacity: 1;
margin-left: 20px;
margin-right: 7px;
margin-top: -20px;
}
/*.w{
flex-wrap: wrap;
width: 191px;
height: 34px;
display: inline-block;
}*/
.d{
opacity: 1;
color: rgba(0,0,0,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
}
.e{
opacity: 1;
color: rgba(247,105,29,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
margin-left: 6px;
margin-right: 10px;
}
.boke {
width: 300px;
height: 55px;
/*border: 1px solid rgba(242,242,245,1);*/
display: flex;
align-items: center;
}
.tag{
width: 10px;
height: 13.37px;
opacity: 1;
margin-left: 20px;
margin-right: 8px;
}
.label {
width: 300px;
height: 37px;
border: 1px solid rgba(242,242,245,1);
display: flex;
align-items: center;
}
.f{
opacity: 1;
color: rgba(0,0,0,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
}
.g{
opacity: 1;
color: rgba(247,105,29,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: left;
line-height: 17px;
margin-left: 8px;
}
.more{
width: 300px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
}
.h{
width: 48px;
height: 16px;
opacity: 1;
color: rgba(51,51,51,1);
font-size: 12px;
font-weight: 400;
font-family: "PingFang SC";
text-align: center;
line-height: 16px;
}
.arrow{
width: 4px;
height: 7px;
opacity: 0.4000000059604645;
margin-left: 4px;
}
我的成果展示：
