将php中文网移动端剩余部分的内容写完
剩余html代码： <!--最新更新--> <article class="update"> <h3>最新更新</h3> <section> <div> <a href=""><img src="images/zjgx1.jpg" alt=""></a> <span> <a href="">2019python自学视频</a> <p>从零开始学习</p> <span><i>初级</i>1830次播放</span> </span> </div> <div> <a href=""><img src="images/zjgx2.png" alt=""></a> <span> <a href="">PHP开发免费公益直播课</a> <p>主讲：php中文网 </p> <span><i>初级</i>1659次播放</span> </span> </div> <div> <a href=""><img src="images/zjgx3.png" alt=""></a> <span> <a href="">从零开始到WEB响应式布局</a> <p>HTML、CSS、web</p> <span><i>初级</i>3123次播放</span> </span> </div> <div> <a href=""><img src="images/zjgx4.png" alt=""></a> <span> <a href="">PHP文件基础操作</a> <p>基础的时候对PHP文件</p> <span><i>中级</i>1649次播放</span> </span> </div> <div> <a href=""><img src="images/zjgx5.jpg" alt=""></a> <span> <a href="">memcache基础课程</a> <p>从零认识memcache</p> <span><i>初级</i>782次播放</span> </span> </div> <div> <a href=""><img src="images/zjgx6.png" alt=""></a> <span> <a href="">微信小程序--企业微网站</a> <p>介绍小程序</p> <span><i>初级</i>3515次播放</span> </span> </div> </section> </article> <!--最新文章--> <article class="new"> <h3>最新文章</h3> <section> <div> <span> <a href=""><h4>重启阿里云ECS服务器实例</h4></a> <a href="">发布时间：2019-11-07</a> </span> <a href=""><img src="images/zxwz1.jpg" alt=""></a> </div> <div> <span> <a href=""><h4>阿里云ECS服务器添加安全组规则</h4></a> <a href="">发布时间：2019-11-07</a> </span> <a href=""><img src="images/zxwz2.png" alt=""></a> </div> <div> <span> <a href=""><h4>阿里云ECS服务器重置实例登录密码</h4></a> <a href="">发布时间：2019-11-07</a> </span> <a href=""><img src="images/zxwz3.png" alt=""></a> </div> <div> <span> <a href=""><h4>使用管理终端连接Windows实例</h4></a> <a href="">发布时间：2019-11-07</a> </span> <a href=""><img src="images/zxwz4.jpg" alt=""></a> </div> <div> <span> <a href=""><h4>PHPExcel数据导入（图文）</h4></a> <a href="">发布时间：2019-07-06</a> </span> <a href=""><img src="images/zxwz5.png" alt=""></a> </div> <div> <a href=""><h4>更多内容</h4></a> </div> </section> </article> <!--最新博文--> <article class="blog"> <h3>最新博文</h3> <section> <div> <span><h4>移动端 、手机端、去掉横向滚动条 亲测生效！！！</h4></span> <span><p>2019-11-08</p></span> </div> <div> <span><h4>PHP学习第一天:软件安装篇</h4></span> <span><p>2019-11-08</p></span> </div> <div> <span><h4>Linux系统CentOS报错</h4></span> <span><p>2019-11-08</p></span> </div> <div> <span><h4>thinkphp5.0.24前置操作的大小写问题</h4></span> <span><p>2019-11-07</p></span> </div> <div> <span><h4>laravel-创建“控制器”和“模型”</h4></span> <span><p>2019-11-04</p></span> </div> <div> <a href=""><h4>更多内容</h4></a> </div> </section> </article> <!--最新问答--> <article class="question"> <h3>最新问答</h3> <section> <div> <span><h4>登录密码 什么情况???</h4></span> <span><p>2019-11-09</p></span> </div> <div> <span><h4>字符集</h4></span> <span><p>2019-11-09</p></span> </div> <div> <span><h4>老师这样写还会出现错误，是为什么呀</h4></span> <span><p>2019-11-08</p></span> </div> <div> <span><h4>为什么我的 Mac电脑用 safari看PHP中文网 视频都看不了</h4></span> <span><p>2019-11-08</p></span> </div> <div> <span><h4>我写的哪里有错？请大神帮忙查看一下。</h4></span> <span><p>2019-11-08</p></span> </div> <div> <a href=""><h4>更多内容</h4></a> </div> </section> </article> </main> <footer> <a href=""> <img src="font-icon/zhuye.png" alt=""> <span>首页</span> </a> <a href=""> <img src="font-icon/video.png" alt=""> <span>视频</span> </a> <a href=""> <img src="font-icon/luntan.png" alt=""> <span>社区</span> </a> <a href=""> <img src="font-icon/geren.png" alt=""> <span>我的</span> </a> </footer>
剩余css代码：
/*最新更新*/
main>.update>section{
display: flex;
flex-flow: column nowrap;
}
main>.update>section>div{
background-color: #fff;
margin: 5px;
display: flex;
}
main>.update>section>div img{
width: 350px;
height: 90px;
}
main>.update>section>div>span{
display: flex;
flex-flow: column nowrap;
flex: 1;
margin-top: 5px;
padding: 0 30px 0 10px;
}
main>.update>section>div>a:first-of-type{
display: flex;
margin: 10px;
align-items: center;
}
main>.update>section>div>span i{
font-style: normal;
background-color: #333333;
color: white;
border-radius: 4px;
padding: 0 5px;
font-size: smaller;
}
main>.update>section>div>span>span{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
main{
margin-bottom: 50px;
}
/*最新文章*/
main>.new>section{
display: flex;
flex-flow: column nowrap;
}
main>.new>section>div{
background-color: #fff;
margin: 5px;
display: flex;
justify-content: space-between;
position: relative;
}
main>.new>section>div img{
width: 350px;
height: 90px;
}
main>.new>section>div>span{
display: flex;
flex-flow: column nowrap;
padding-left: 10px;
top: 10px;
position: relative;
top: -10px;
}
main>.new>section>div>a{
margin: 10px;
display: flex;
align-items: center;
}
main>.new>section>div:last-of-type a{
display: flex;
margin-left: 50%;
margin-top: -10px;
margin-bottom: -10px;
}
main>.new>section>div:last-of-type h4{
font-weight: lighter;
width: 100%;
}
/*最新博文*/
main>.blog>section{
display: flex;
flex-flow: column nowrap;
}
main>.blog>section>div{
background-color: #fff;
margin: 5px;
display: flex;
justify-content: space-between;
position: relative;
padding: 0 10px;
}
main>.blog>section>div:last-of-type a{
display: flex;
margin-left: 50%;
margin-top: -10px;
margin-bottom: -10px;
}
main>.blog>section>div:last-of-type h4{
font-weight: lighter;
width: 100%;
}
/*最新问答*/
main>.question>section{
display: flex;
flex-flow: column nowrap;
}
main>.question>section>div{
background-color: #fff;
margin: 5px;
display: flex;
justify-content: space-between;
position: relative;
padding: 0 10px;
}
main>.question>section>div:last-of-type a{
display: flex;
margin-left: 50%;
margin-top: -10px;
margin-bottom: -10px;
}
main>.question>section>div:last-of-type h4{
font-weight: lighter;
width: 100%;
}
/**********底部样式**********/
footer{
display: flex;
box-sizing: border-box;
background-color: #EEEEEE;
position: fixed;
bottom:0px;
width: 100%;
height: 50px;
border-top: 1px solid #CCCCCC;
justify-content: center;
align-items: center;
padding: 10px 0;
overflow: hidden;
}
footer img{
width: 16px;
height: 16.8px;
/*不会挤到边框*/
margin: 5px;
}
footer>a{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
padding: 5px;
}
footer span{
color:#888888
}效果图：
手抄：
将中间导航菜单区的代码手抄至少一遍, 并给每一行代码加上注释
html代码： <!--导航--> <nav> <ul> <li> <a href=""> <img src="images/html.png" alt=""> <span>HTML/CSS</span> </a> </li> <li> <a href=""> <img src="images/JavaScript.png" alt=""> <span>JavaScript</span> </a> </li> <li> <a href=""> <img src="images/code.png" alt=""> <span>服务端</span> </a> </li> <li> <a href=""> <img src="images/sql.png" alt=""> <span>数据库</span> </a> </li> </ul> <ul> <li> <a href=""> <img src="images/app.png" alt=""> <span>移动端</span> </a> </li> <li> <a href=""> <img src="images/manual.png" alt=""> <span>手册</span> </a> </li> <li> <a href=""> <img src="images/tool2.png" alt=""> <span>工具</span> </a> </li> <li> <a href=""> <img src="images/live.png" alt=""> <span>直播</span> </a> </li> </ul> </nav>
css代码：
/*主导航基本样式*/
nav{
/*背景*/
background-color: #fff;
/*转为弹性容器,主轴改为垂直方向*/
display: flex;
flex-flow: column nowrap;
}
/*图片大小*/
nav img{
width: 45px;
height: 49px;
}
/*每行导航都是个容器*/
nav>ul{
display: flex;
}
/*每个元素进行空间平均分--增长因子都是1*/
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;
}手抄：
总结
对于相同格式的html，在css中可以直接通过选择器来统一设置样式（此处我没有使用，因为生疏怕乱掉）
