search

博客列表 >1107作业

1107作业

遗忘了寂寞
遗忘了寂寞原创
2019年11月08日 19:29:05740浏览

手机页面部分代码

  1. <!--最新更新-->
  2.         <article class="news">
  3.         <h3>最新更新</h3>
  4.         <section class="img-txet">
  5.             <div>
  6.                 <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
  7.                 <span>
  8.                     <a href="">2019python自学视频</a>
  9.                     <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带</span>
  10.                     <span><i>初级</i>3614次播放</span>
  11.                 </span>
  12.             </div>
  13.         </section>
  14.         <section class="img-txet">
  15.             <div>
  16.                 <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  17.                 <span>
  18.                     <a href="">PHP开发免费公益直播课</a>
  19.                     <span>主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00</span>
  20.                     <span><i>初级</i>3614次播放</span>
  21.                 </span>
  22.             </div>
  23.         </section>
  24.         <section class="img-txet">
  25.             <div>
  26.                 <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
  27.                 <span>
  28.                     <a href="">从零开始到WEB响应式布局</a>
  29.                     <span>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，</span>
  30.                     <span><i>初级</i>3614次播放</span>
  31.                 </span>
  32.             </div>
  33.         </section>
  34.         <section class="img-txet">
  35.             <div>
  36.                 <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  37.                 <span>
  38.                     <a href="">PHP文件基础操作</a>
  39.                     <span>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，</span>
  40.                     <span><i>初级</i>3614次播放</span>
  41.                 </span>
  42.             </div>
  43.         </section>
  44.     </article>
  45.     <!--最新文章-->
  46.     <article class="news">
  47.         <h3>最新文章</h3>
  48.         <section class="img-txet">
  49.             <div>
  51.                 <span>
  52.                     <a href="">2019python自学视频</a>
  53.                     <span>发布时间：</span>
  55.                 </span>
  56.                 <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
  57.             </div>
  58.         </section>
  59.         <section class="img-txet">
  60.             <div>
  62.                 <span>
  63.                     <a href="">php 安装zip模块</a>
  64.                     <span>发布时间：</span>
  66.                 </span>
  67.                 <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  68.             </div>
  69.         </section>
  70.         <section class="img-txet">
  71.             <div>
  73.                 <span>
  74.                     <a href="">2019python自学视频</a>
  75.                     <span>发布时间：</span>
  77.                 </span>
  78.                 <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
  79.             </div>
  80.         </section>
  81.         <section class="img-txet">
  82.             <div>
  84.                 <span>
  85.                     <a href="">php 安装zip模块</a>
  86.                     <span>发布时间：</span>
  88.                 </span>
  89.                 <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  90.             </div>
  91.         </section>
  93.             <div class="more">
  94.                 <a href="">更多内容</a>                    
  95.             </div>
  97.     </article>
  98.     <!--最新博文-->
  99.     <article class="news">
  100.         <h3>最新博文</h3>
  101.         <section class="img-txet">
  102.             <div>
  103.                    <span>
  104.                     <a href="">Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</a>
  105.                     <span>发布时间：</span>
  107.                 </span>
  109.             </div>
  110.         </section>
  111.         <section class="img-txet">
  112.             <div>
  113.                    <span>
  114.                     <a href="">Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</a>
  115.                     <span>发布时间：</span>
  117.                 </span>
  119.             </div>
  120.         </section>
  121.         <section class="img-txet">
  122.             <div>
  123.                    <span>
  124.                     <a href="">Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</a>
  125.                     <span>发布时间：</span>
  127.                 </span>
  129.             </div>
  130.         </section>
  131.         <section class="img-txet">
  132.             <div>
  133.                    <span>
  134.                     <a href="">Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</a>
  135.                     <span>发布时间：</span>
  137.                 </span>
  139.             </div>
  140.         </section>
  141.         <div class="more">
  142.             <a href="">更多内容</a>
  143.         </div>
  144.     </article>
  147.     <!--这个模块与上面的最新课程几乎是一样的, 只是左右顺序交换了一个,样式略有不同-->
  149.     <!-- 最新博文,最新问答,做为作业,交给大家课后完成 -->
  151. </main>
  154. <!--下面咱们做一下底部,底部与头部类似,也是固定定位实现-->
  155. <footer>
  156.     <a href=""><img src="static/font-icon/zhuye.png" alt=""><span>主页</span></a>
  157.     <a href="">
  158.         <img src="static/font-icon/video.png" alt="">
  159.         <span>视频</span>
  160.     </a>
  161.     <a href="">
  162.         <img src="static/font-icon/luntan.png" alt="">
  163.         <span>社区</span>
  164.     </a>
  165.     <a href="">
  166.         <img src="static/font-icon/geren.png" alt="">
  167.         <span>我的</span>
  168.     </a>
  169. </footer>
  1. /*将所有article转为盒子*/
  2. main > article {
  3.     display: flex;
  4.     flex-flow: column nowrap;
  5. }
  7. /*将所有section 转为盒子*/
  8. main > article > section > div {
  9.     background-color: #fff;
  10.     margin: 5px;
  12.     /*也转为弹性容器*/
  13.     display: flex;
  14.     flex-flow: row nowrap;
  15.     justify-content: space-between;
  16.     align-items: center;
  17. }
  19. main > article > section > div img {
  20.     width: 350px;
  21.     height: 90px;
  23. }
  25. main > article > section > div > span {
  26.     width: 100%;
  28.     padding: 5px 15px;
  29.     display: flex;
  30.     /*文本垂直排列*/
  31.     flex-flow: column nowrap;
  32.     margin-top: 5px;
  33.     /* padding-left: 10px; */
  36. }
  37. main > article > section > div > span >span {
  38.     font-size: 12px;
  39.     margin: 5px 0px;
  40. }
  43. main > article> section > div > span  i {
  44.     font-style: normal;
  45.     background-color: #333333;
  46.     color: white;
  47.     border-radius: 4px;
  48.     padding: 0 5px;
  49.     font-size: smaller;
  50. }
  51. /* 更多 */
  52. .more{
  53.     margin: 5px;
  54.     height: 30px;
  55.     line-height: 30px;
  56.     text-align:center;
  57.     background-color: #fff;
  58. }
  60. /*底部*/
  61. footer {
  62.     /*固定定位*/
  63.     position: fixed;bottom: 0;
  64.     /*固定定位元素必须设置宽度与高度*/
  65.     width: 100%;
  66.     height: 50px;
  67.     background: #edeff0;
  68.     color: white;
  69.     /*底部上边框*/
  70.     border-top: 2px solid #ccc;    
  71.     /*转为Flex容器,设置元素排列*/
  72.     display: flex;
  73.     /*元素主轴对齐方式为间距相同*/
  74.     justify-content: space-evenly;
  75. }
  76. footer > a{
  77.     margin: 5px;font-size: 15px;
  78.     display: flex;
  79.     flex-flow: column nowrap;
  80.     justify-content:center;
  81.     align-items: center;
  83. }
  84. footer > a >img {
  85.     height: 20px;width: 20px;
  86. }
  87. footer > a >span {
  88.     margin-top: 3px;
  89. }



总结

把这两周所学的CSS进行了汇总






上一条：弹性布局之仿站小案例 - PHP培训九期线上班下一条：php中文网移动端-php九期线上培训班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多