Skip to content

Commit

Permalink
Merge pull request lefex#2 from sxdxzkq/master
Browse files Browse the repository at this point in the history 
交作业
  • Loading branch information
@lefex
lefex authored Nov 13, 2019
2 parents 416e277 + 6f3b49e commit 902f039
Show file tree
Hide file tree
Showing 9 changed files with 395 additions and 0 deletions.
239 changes: 239 additions & 0 deletions 第二阶段/作业/sxdxzkq/friend/code/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@

* {
margin: 0;
padding: 0;
}

body {
width: 375px;
font-family: PingFangSC-Regular;
}

.headerContent {
width: 100%;
position: relative;
min-height: 200px;
max-height: 300px;
overflow: hidden;
}

.headerContent>img {
position: center;
width: 100%;
top: 0px;
left: 0px;
z-index: 0;
display: block;
padding-bottom: 20px;
}

.headerContent>h3 {
position: absolute;
/* height: 100%; */
width: 100%;
color: #fff;
font-size: 44px;
text-align: center; /*设置文本水平居中*/
/* line-height: 275px; */
top: 0px;
left: 0px;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}

.header {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
display: flex;
flex-direction: row-reverse;
}

.header>div {
color: #fff;
/* margin-top: 10px; */
margin-right: 20px;
line-height: 71px;
}

.header>img {
width: 71px;
height: 71px;
border-radius: 6px;
}


.content {
padding-top: 30px;
}

.contentCell {
padding-top: 14px;
border-bottom: 1px solid #f3f3f3;
display: flex;
}

.contentHeader>img {
width: 100%;
border-radius: 4px;
background-color: skyblue;

}

.contentHeader {
width: 44px;
padding: 0px 10px;
}

.cellContent {
width: 301px;
display: flex;
flex-direction: column;
}

.cellContent>p {
color: #333;
margin-bottom: 10px;
}

.cellContent>p:first-child {
margin-top: 5px;
margin-bottom: 10px;
font-size: 17px;
color: #4D638F;
}

.pic {
display: flex;
flex-wrap: wrap;
width: 270px;
}

.pic>div {
width: 80px;
height: 80px;
background-color: wheat;
margin: 5px 5px 0px 0px;
}

.picOne {
display: flex;
width: auto;
height: auto;
max-width: 260px;
max-height: 162px;

}

.picOne>div {
display: inline-flex;
width: 100px;
height: auto;
flex-grow: 1;
}

.picOne>div>img {
height: 100%;
}

/* img {
height: 100px;
} */

.link {
display: flex;
align-items: center;
width: 299px;
height: 48px;
background-color: #f3f3f5;
}

.link>div {
width: 42px;
height: 42px;
flex-shrink: 0;
margin-left: 4px;
/* overflow: hidden; */
background: url("../images/1.png");
position: center;
background-size: cover;
}

.link>p {
margin: 0px 9px;
}

.times {
width: 100%;
margin: 8px 0px;
/* position: relative; */
display: flex;
justify-content: space-between;
align-items: center;
}

.times>div:nth-of-type(1) {
/* position: absolute; */
/* right: 0px;
top: 0px; */
display: block;
width: 29px;
height: 19px;
background: url("../images/comment.png") no-repeat center;
background-size: cover;
}

.comments {
background-color: #f3f3f5;
width: 100%;
/* height: 30px; */
margin-bottom: 15px;

font-size: 15px;
padding: 5px 10px;
border-radius: 2px;
}

.good {
padding: 4px 0px;
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid #f3f3f3;
}

.good>span {
margin-right: 7px;
color: #536892;
}

.good>span:first-child {
width: 11px;
height: 10px;
background: url("../images/star_small.png") no-repeat center;
background-size: cover;
}

.comment {
color: #121212;
display: flex;

}

.comment>span {
flex-shrink: 0;
}

.comment>span>span:first-child {
color: #536892;
}

.comments>p {

}


156 changes: 156 additions & 0 deletions 第二阶段/作业/sxdxzkq/friend/code/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="">

<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">
<title>朋友圈</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
<div class="headerContent">
<img src="../images/4.png" alt="" srcset="">
<h3>前端小课</h3>
<div class="header">
<img src="../images/header.png" alt="">
<div class="name">算了算了</div>
</div>
</div>

<div class="content">
<div class="contentCell">
<div class="contentHeader">
<img src="../images/header.png" alt="">
</div>

<div class="cellContent">
<p>互帮互助</p>
<p>纪念《前端小课》第二阶段课程圆满结束，这一阶段主要搞定CSS布局。以实现一个朋友圈为实践。就是这么牛。</p>
<div class="pic">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="times">
<p>2小时前</0>
<div></div>
</div>

<div class="comments">
<div class="good">
<span></span>
<span>后厂村程序员</span>
</div>

<div class="comment">
<span><span>西二旗</span><span>: </span></span>
<p>虽然没看懂，感觉很厉害的样子。</p>

</div>
</div>
</div>

</div>

<div class="contentCell">
<div class="contentHeader">
<img src="../images/header.png" alt="">
</div>

<div class="cellContent">
<p>后厂村高T</p>
<p>偶尔发现前端小课真心不错，可以从零开始学习前端。</p>
<div class="link">
<div></div>
<p>第10天：买一块地盖一处院子</p>
</div>
<div class="times">
<p>2小时前</0>
<div></div>
</div>

</div>
</div>

<div class="contentCell">
<div class="contentHeader">
<img src="../images/header.png" alt="">
</div>

<div class="cellContent">
<p>互帮互助</p>
<p>纪念《前端小课》第二阶段课程圆满结束，这一阶段主要搞定CSS布局。以实现一个朋友圈为实践。就是这么牛。</p>
<div class="picOne">
<div>
<img src="../images/3.png"></img>
</div>
</div>
<div class="times">
<p>2小时前</0>
<div></div>
</div>

<div class="comments">
<div class="good">
<span></span>
<span>小花猫</span>
</div>

<div class="comment">
<span><span>大强</span><span>: </span></span>
<p>厉害了，学好教教我做网站。</p>

</div>
</div>

</div>
</div>

<div class="contentCell">
<div class="contentHeader">
<img src="../images/header.png" alt="">
</div>

<div class="cellContent">
<p>互帮互助</p>
<p>纪念《前端小课》第二阶段课程圆满结束，这一阶段主要搞定CSS布局。以实现一个朋友圈为实践。就是这么牛。</p>
<div class="picOne">
<div>
<img src="../images/2.png"></img>
</div>
</div>
<div class="times">
<p>2小时前</0>
<div></div>
</div>

<div class="comments">
<div class="good">
<span></span>
<span>蒸蒸日上</span>
</div>

<div class="comment">
<span><span>小灰兔</span><span>: </span></span>
<p>关注了！！！</p>

</div>
</div>

</div>
</div>


</div>

</body>

</html>
Binary file added 第二阶段/作业/sxdxzkq/friend/images/1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 第二阶段/作业/sxdxzkq/friend/images/2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 第二阶段/作业/sxdxzkq/friend/images/3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 第二阶段/作业/sxdxzkq/friend/images/4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 第二阶段/作业/sxdxzkq/friend/images/comment.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 第二阶段/作业/sxdxzkq/friend/images/header.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 第二阶段/作业/sxdxzkq/friend/images/star_small.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 902f039

Please sign in to comment.