仿写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;
}
效果页面：
手抄：
总结：
有些弹性属性还不是很熟练，要多多练习，写的过程中有个问题，左图右文字的盒子， 用弹性容器不知道怎么解决，flex:0.4,flex:0.6，当右边文字很多的时候会把左边的图片挤没了。