CSS弹性布局仿写PHP中文网手机端首页—PHP九期

一、仿写PHP中文网手机端首页：

①、init.css：通用样式表

body,footer {  min-width: 320px;  max-width: 766px;  margin: 0 auto;  background-color: #edeff0;  overflow-y: initial;  position: relative;  
color: gray;  overflow-x: hidden;  -webkit-tap-highlight-color:transparent;}
img {  width: 100%;}
ul,li {  margin: 0;  padding: 0;}
li {  list-style: none;}
a {  text-decoration: none;  color: gray;}

②、首页样式表：

头部：

header {  position: fixed;  top: 0;  width: 100%;  height: 42px;  background-color: #444444;  color: white;  min-width: 320px;  
max-width: 768px;  display: flex;  justify-content: space-between;  align-items: center;}
header > img:first-of-type,header > img:last-of-type {  width: 26px;  height: 26px;  margin: 5px;}
header > img:first-of-type {  border: 1px solid #8f9498;  border-radius: 50%;}
header > img {  width: 94px;}

导航栏：

nav {  background-color: #fff;  display: flex;  flex-flow: column nowrap;}
nav img {  width: 45px;  height: 49px;}
nav > ul {  display: flex;  flex-flow: row nowrap;}
nav > ul > li {  flex: 1;}
nav > ul > li > a {  display: flex;  flex-flow: column nowrap;  align-items: center;  margin: 10px;}
nav > ul > li > a > span {  margin-top: 5px;}

推荐课程：

main {  display: flex;  flex-flow: column nowrap;}
main > .recommend > h3 {  margin-left: 5px;}
main > .recommend > section:first-of-type {  display: flex;  flex-flow: row nowrap;}
main > .recommend > section:first-of-type > a {  flex: 1;  margin: 5px;}
main > .recommend > section:first-of-type > a > img {  height: 90px;}
main > .recommend > section:last-of-type {  display: flex;  flex-flow: column nowrap;}
main > .recommend > section:last-of-type > div {  background-color: white;  display: flex;  margin: 5px;  padding: 9px 0 9px 10px;}
main > .recommend > section:last-of-type > div img {  /* width: 295px; */  width: 185px;  height: 80px;}
main > .recommend > section:last-of-type > div > span {  flex: 1;  display: flex;  flex-flow: column nowrap;  margin-top: 5px;  padding-left: 10px;}
main > .recommend > section:last-of-type > div > span > a {  margin-bottom: 10px;}
main > .recommend > section:last-of-type > div > span i {  font-style: normal;  background-color: #595757;  color: white;  border-radius: 8px;  
padding: 0 5px;  font-size: smaller;}

更新课程：

main > .update > h3 {  margin-left: 5px;}
main > .update > section {  display: flex;  flex-flow: column nowrap;}
main > .update > section > div {  background-color: white;  display: flex;  margin: 5px;  padding: 9px 0 9px 10px;}
main > .update > section > div img {  width: 183px;  height: 80px;}
main > .update > section > div div {  width: 400px;  display: flex;  flex-flow: column wrap;  padding-left: 10px;}
main > .update > section > div div > a {  margin-bottom: 4px;}
main > .update > section > div div span {  font-size: 12px;  margin-top: 8px;}
main > .update > section > div div span:last-of-type > i{  font-style: normal;  background-color: #595757;  color: white;  border-radius: 8px;  padding: 3px;}
main > .update > section > div div span:last-of-type {  display: flex;  justify-content: space-between;}

最新文章：

main > .article > h3 {  margin-left: 5px;}
main > .article > section {  display: flex;  flex-flow: column nowrap;}
main > .article > section > div {  background-color: white;  display: flex;  margin: 5px;  padding: 10px 10px 8px;}
main > .article > section > div img {  width: 183px;  height: 65px;}
main > .article > section > div div {  flex: 1;  display: flex;  flex-flow: column nowrap;  padding-left: 8px;  order: -1;}
main > .article > section > div div > span:first-of-type {  font-size: 14px;  font-weight: bold;  margin-bottom: 10px;}
main > .article > section > div div > span:last-of-type {  font-size: 12px;}
main > .article > section > div:last-of-type {  display: flex;  height: 30px;  justify-content: center;  align-items: center;}

最新博文和最新问答一样的：

main > .blog > h3 {  margin-left: 5px;}
main > .blog > section {  display: flex;  flex-flow: column nowrap;}
main > .blog > section > div {  background-color: white;  height: 50px;  display: flex;  margin: 5px;  justify-content: space-between;  align-items: center;}
main > .blog > section > div a {  font-weight: bold;  font-size: 14px;  padding-left: 10px;}
main > .blog > section > div > span:last-of-type {  font-size: 12px;  padding-right: 10px;}
main > .blog > section > div:last-of-type {  display: flex;  justify-content: center;  align-items: center;}
main > .blog > section > div:last-of-type >span {  font-size: 16px;}

底部：

footer {  border-top: 1px solid gray;  position: fixed;  bottom: 0;  width: 100%;  height: 50px;  display: flex;  flex-flow: row nowrap;  
justify-content: center;  align-items: center;}
footer img {  width: 16px;  height: 16px;}
footer > a {  flex: 1;  display: flex;  flex-flow: column nowrap;  justify-content: center;  align-items: center;  font-size: 14px;  margin-top: 5px;}

总结：写网站页面前要先对页面布局进行划分，分为几个区域；写HTML界面时尽量多使用语义化标签，DOM结构要简洁；CSS样式把通用样式划分为一个公共文件，具体样式一个文件；

使用弹性布局主要用到的属性有display：flex，flex-flow。