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;
}
運行結果：
手抄作業：
作業總結：
對于新學的語法知識點要積極抄寫，這樣有利于記憶，除此以外，還應記憶其使用場景。在敲老師的案例的代碼時，應該自己先嘗試不看老師代碼來敲代碼，確實不行再回過頭來看老師的代碼。這樣更有利用于新學知識點的融匯貫通。
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的php作业90,php中文网移动端－第九期（191107作业）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器视觉 光学工程专业_瑞士Idonus
- 下一篇： php 导入表格数据,PHPExcel