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;

}

運行結果：

手抄作業：

作業總結：

對于新學的語法知識點要積極抄寫，這樣有利于記憶，除此以外，還應記憶其使用場景。在敲老師的案例的代碼時，應該自己先嘗試不看老師代碼來敲代碼，確實不行再回過頭來看老師的代碼。這樣更有利用于新學知識點的融匯貫通。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的php作业90,php中文网移动端－第九期（191107作业）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。