php作业90,php中文网移动端－第九期（191107作业）

CSS代码：

body{

display: flex;

flex-flow: column nowrap;

}

body > header{

display: flex;

background-color: #444444;

width: 100%;

height: 42px;

min-width: 320px;

max-width: 768px;

justify-content: space-between;

align-items: center;

position: fixed;

top: 0;

}

header >img:first-of-type,

header >img:last-of-type{

width: 26px;

height: 26px;

margin: 5px;

border-radius: 50%;

}

header > img:nth-of-type(2){

width: 94px;

}

/****************************/

body > nav{

display: flex;

flex-flow: column nowrap;

background-color: white;

}

body > nav > ul{

display: flex;

align-items: center;

}

body > nav > ul > li{

margin: 10px 0;

flex: 1;

}

body > nav > ul >li > a{

display: flex;

flex-flow: column nowrap;

justify-content: center;

align-items: center;

}

body > nav > ul > li img{

width: 45px;

height: 49px;

}

/**********************************/

.recommend{

/*box-sizing: border-box;*/

/*width: 100%;*/

padding: 8px;

display: flex;

flex-flow: column nowrap;

}

.recommend >h2{

margin-bottom: 5px;

}

.recommend >section:last-of-type>div{

margin: 8px 0;

}

.recommend > section:first-of-type{

display: flex;

}

.recommend > section:first-of-type > a{

margin: 5px;

}

.recommend >section:nth-of-type(2){

display: flex;

flex-flow: column nowrap;

}

.recommend >section:nth-of-type(2) > div{

display: flex;

background-color: white;

padding: 8px;

}

.recommend >section:nth-of-type(2)>div>span>a{

margin-bottom: 10px;

}

.recommend >section:nth-of-type(2) > div  img{

width: 350px;

height: 90px;

}

.recommend >section:nth-of-type(2) > div > span{

display: flex;

flex-flow: column nowrap;

padding-left: 15px;

}

.recommend >section:nth-of-type(2) > div > span>a{

font-size: 1.2rem;

}

.recommend >section:nth-of-type(2) > div > span i{

font-size: smaller;

background-color: #444444;

color: white;

border-radius: 30%;

padding: 4px;

}

/*************************************/

.last-update{

display: flex;

flex-flow: column nowrap;

}

.last-update>h2{

margin-bottom: 5px;

}

.last-update> section{

display: flex;

background-color: white;

padding: 8px;

margin-bottom: 15px;

/*flex-flow: column nowrap;*/

}

.last-update>section>a>img{

/*width: 350px;*/

height: 90px;

}

.last-update>section>span{

display: flex;

flex-flow: column nowrap;

justify-content: space-between;

padding-left: 10px;

}

.last-update>section>span>i{

font-size: smaller;

}

.last-update>section>span>span{

display: flex;

justify-content: space-between;

}

.last-update>section>span>span>i{

background-color: #444444;

font-size: smaller;

border-radius: 30%;

padding: 3px;

color: white;

}

/************************************/

.latest-article{

display: flex;

flex-flow: column nowrap;

}

.latest-article>h2{

margin-bottom: 5px;

}

.latest-article>section{

display: flex;

/*flex-flow: column nowrap;*/

justify-content: space-between;

background-color: white;

padding: 5px;

margin-bottom: 20px;

}

/*.latest-article>section>a{*/

/*    flex: 1;*/

/*}*/

.latest-article>section img {

width: 300px;

height: 90px;

/*padding-left: 18px;*/

}

.latest-article>section>a:first-of-type{

display: flex;

flex-flow: column nowrap;

padding-top: 20px;

padding-left: 10px;

}

.latest-article>section>a:first-of-type>i:last-of-type{

font-size: smaller;

margin-top: 10px;

}

/******************************/

.latest-blog{

display: flex;

flex-flow: column nowrap;

}

.latest-blog>h2{

margin-bottom: 0;

}

.latest-blog>section{

display: flex;

justify-content: space-between;

padding: 10px;

background-color: white;

margin: 10px 0;

height: 30px;

}

.latest-blog>section:last-of-type{

justify-content: center;

height: initial;

}

.latest-blog>section>a:nth-of-type(2){

font-size: smaller;

}

/******************************/

.latest-qa{

display: flex;

flex-flow: column nowrap;

}

.latest-qa>h2{

margin-bottom: 0;

}

.latest-qa>section{

display: flex;

justify-content: space-between;

padding: 10px;

background-color: white;

margin: 10px 0;

height: 30px;

}

.latest-qa>section:last-of-type{

justify-content: center;

height: initial;

}

.latest-qa>section>a:nth-of-type(2){

font-size: smaller;

}

/**********************************/

body>footer{

width: 100%;

height: 50px;

padding-top: 3px;

border-top: 1px solid lightgrey;

position: fixed;

bottom: 0;

}

footer>ul{

display: flex;

align-items: center;

}

footer>ul>li{

flex: 1;

}

footer>ul>li img{

width: 25px;

height: 25px;

}

footer>ul>li>a{

display: flex;

flex-flow: column nowrap;

align-items: center;

}

footer>ul>li>a:hover,

footer>ul>li>a:focus,

footer>ul>li>a:active{

color: red;

}

运行结果：

手抄作业：

作业总结：

对于新学的语法知识点要积极抄写，这样有利于记忆，除此以外，还应记忆其使用场景。在敲老师的案例的代码时，应该自己先尝试不看老师代码来敲代码，确实不行再回过头来看老师的代码。这样更有利用于新学知识点的融汇贯通。