Flex实战--PHP9期线上班 - 作业

Home > List of blog posts > Flex实战--PHP9期线上班

Blogger Information

Blog 36

fans 2

comment 0

visits 23645

Special Recommendation

More>

Related recommendations

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1421312 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4265214 times of learning
Collection
JAVA Beginner's Video Tutorial

2516670 times of learning
Collection

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

Flex实战--PHP9期线上班

Rambo-Yang

Original

536 people have browsed it

仿写PHP中文网手机端首页

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>仿PHP中文网首页</title>
<link rel="stylesheet" href="static/css/public.css">
</head>
<body>
<header>
<a href=""><img src="static/images/user-pic.jpeg" alt=""></a>
<a href=""><img src="static/images/logo.png" alt=""></a>
<a href=""><img src="static/images/user-nav.jpg" alt=""></a>
</header>
<div class="banner"><img src="static/images/banner.jpg" alt=""></div>
<nav>
<ul>
<li>
<a href="">
<img src="static/images/html.png" alt="">
<span>HTML/CSS</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/JavaScript.png" alt="">
<span>JavaScript</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/code.png" alt="">
<span>服务端</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/sql.png" alt="">
<span>数据库</span>
</a>
</li>
<li>
<a href=""><img src="static/images/app.png" alt="">
<span>移动端</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/manual.png" alt="">
<span>手册</span>
</a>
</li>
<li>
<a href=""><img src="static/images/tool2.png" alt="">
<span>工具</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/live.png" alt="">
<span>直播</span>
</a>
</li>
</ul>
</nav>
<main>
<article class="recommend list-box">
<h3>推荐课程</h3>
<section>
<a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
<a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
</section>

<section class="list-ul">
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<span><i>中级</i>49738次播放</span>

</span>
</div>

<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">2018前端入门基础</a>
<span><i>初级</i>209952次播放</span>
</span>
</div>
</section>
</article>
<article class="latest-update list-box">
<h3>最新更新</h3>

<section class="list-ul">
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
<span><i>中级</i>49738次播放</span>

</span>
</div>

<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">2018前端入门基础</a>
<p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
<span><i>初级</i>209952次播放</span>
</span>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
<span><i>中级</i>49738次播放</span>

</span>
</div>

<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">2018前端入门基础</a>
<p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
<span><i>初级</i>209952次播放</span>
</span>
</div>
</section>
</article>
<article class="latest-article list-box">
<h3>最新文章</h3>

<section class="list-ul">
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<span>发布时间：2019-11-08</span>

</span>
</div>

<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">2018前端入门基础</a>
<span>发布时间：2019-11-08</span>
</span>
</div>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<span>发布时间：2019-11-08</span>

</span>
</div>

<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">2018前端入门基础</a>
<span>发布时间：2019-11-08</span>
</span>
</div>
<a href="" class="more">更多内容</a>
</section>
</article>

<article class="latest-blog">
<h3>最新博文</h3>
<section class="list-ul">
<div>
<a href="">CI框架30分钟极速入门</a>
<span>2019-11-08</span>
</div>

<div>
<a href="">2018前端入门基础</a>
<span>2019-11-08</span>
</div>
<div>
<a href="">CI框架30分钟极速入门</a>
<span>2019-11-08</span>
</div>

<div>
<a href="">2018前端入门基础</a>
<span>2019-11-08</span>
</div>
<a href="" class="more">更多内容</a>
</section>
</article>
<article class="latest-blog">
<h3>最新问答</h3>
<section class="list-ul">
<div>
<a href="">CI框架30分钟极速入门</a>
<span>2019-11-08</span>
</div>

<div>
<a href="">2018前端入门基础</a>
<span>2019-11-08</span>
</div>
<div>
<a href="">CI框架30分钟极速入门</a>
<span>2019-11-08</span>
</div>

<div>
<a href="">2018前端入门基础</a>
<span>2019-11-08</span>
</div>
<a href="" class="more">更多内容</a>
</section>
</article>
</main>

<footer>
<a href=""><img src="static/font-icon/zhuye.png" alt=""><span>首页</span></a>
<a href=""><img src="static/font-icon/video.png" alt=""><span>视频</span></a>
<a href=""><img src="static/font-icon/luntan.png" alt=""><span>社区</span></a>
<a href=""><img src="static/font-icon/geren.png" alt=""><span>我的</span></a>
</footer>
</body>
</html>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;

color:#888;

}
li{
list-style: none;
}
a{ color: #888; text-decoration: none}
body{
max-width: 768px;
min-width: 320px;
margin: 0 auto;
background: #edeff0;
display: flex;
flex-flow: column nowrap;
/*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
-webkit-tap-highlight-color: transparent;
}
img{
max-width: 100%;
}
header {
display: flex;
background: #2d353c;
height: 42px;
position: fixed;
top: 0;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 768px;
min-width: 320px;
}

header>a:first-child>img{
width: 25px;
height: 25px;
margin:5px ;
border-radius:50%
}
header>a:last-child>img{
width: 25px;
height: 25px;
margin: 5px;
}
header a img {
height: 40px;
max-width: 100%;
display: block;
}
.banner{
display: flex;
justify-content: center;
align-items: center;
margin-top: 42px;
}
.banner > img {
flex: 1;
}
nav{
background: #fff;
}
nav > ul {
display: flex;
align-items: center;
margin: 10px auto;
flex-flow: row wrap;
}
nav > ul > li {
width: 25%;
margin: 5px 0;
}
nav > ul > li > a{
display: flex;
flex-flow: column nowrap;
justify-content:center;
align-items: center;
font-size: 14px;
}
nav > ul > li > a img{
width: 45px;
height: 45px;
}
nav > ul > li > a > span{
margin-top: 5px;
}

/*主体部分*/
main{
margin-bottom: 60px;
}
.list-box{
margin: 20px 10px 0;
}
.list-box > h3{
font-size: 18px;
margin-bottom: 10px;

}
.recommend >section:first-of-type {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.recommend > section:first-of-type > a{
width: 49%;
}
.list-box > .list-ul{
display: flex;
flex-flow: column nowrap;
}
.list-box > .list-ul div {
display: flex;
flex-flow: row nowrap;
padding: 10px 0 10px 10px;
background: #fff;
margin-bottom: 20px;
}
.list-box > .list-ul > div > a{
width: 30%;

}
.list-box > .list-ul > div img {
height: 80px;
width: 100%;
}
.list-box > .list-ul > div > span{
padding-left: 10px;
display: flex;
flex-flow: column nowrap;
width: 70%;

}
.list-box > .list-ul > div > span > span {
margin-top: 15px;
font-size: smaller;
}
.list-box > .list-ul > div > span > span > i{
font-style: normal;
background: #595757;
border-radius: 8px;
padding: 3px;
color: #fff;
}
.list-box > .list-ul > div:last-of-type{
margin-bottom: 10px;
}
/*最新更新*/
.latest-update > .list-ul > div > span > span {
margin-top: 10px;
}
.list-box > .list-ul > div > span > p{
font-size: smaller;
margin-top: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.latest-update > .list-ul > div > span > span{
display: flex;
justify-content: space-between;
margin-right: 10px;
align-items: center;
}
/*最新文章*/
.latest-article > .list-ul > div {
margin-bottom: 10px;
}
.latest-article > .list-ul > div > span {
order: -1;
padding-left: 0px;
padding-right: 10px;
}
.latest-article > .list-ul > div img{
height: 65px;
}
.latest-article > .list-ul > div > span > a {
font-weight: bold;
}
.more {
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
font-size: smaller;
}
/*最新博文*/
.latest-blog{
margin: 20px 10px 0;
}
.latest-blog > h3{
font-size: 18px;
margin-bottom: 10px;

}
.latest-blog > .list-ul{
display: flex;
flex-flow: column nowrap;
}
.latest-blog > .list-ul > div {
display: flex;
flex-flow: row nowrap;
padding: 10px;
background: #fff;
margin-bottom: 10px;
justify-content: space-between;
align-items: center;
}
.latest-blog > .list-ul > div a{
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.latest-blog > .list-ul > div > span{
white-space: nowrap;
}

footer{
background: #edeff0;
max-width: 768px;
width: 100%;
position: fixed;
bottom: 0;
height: 50px;
border-top: 1px solid #ccc;
display: flex;

}
footer > a{
flex: 1;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
font-size: smaller;
}
footer > a > img{
width: 16px;
height: 16px;
}
footer > a > span {
padding-top: 5px;
}

效果页面：

仿PHP中文网首页.png

手抄：

总结：

有些弹性属性还不是很熟练，要多多练习，写的过程中有个问题，左图右文字的盒子，用弹性容器不知道怎么解决，flex:0.4,flex:0.6，当右边文字很多的时候会把左边的图片挤没了。

Correction status：qualified

Teacher's comments：完成的相当 OK

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

消灭left join 连表查询

2020-01-03 16:14:47