search

博客列表 >仿手机端m.php.cn网站（1227前端开发作业）

仿手机端m.php.cn网站（1227前端开发作业）

小辰
小辰原创
2020年01月03日 13:41:05977浏览

1.首先是我的效果图

2.下面是我的html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="css/index-hd.css">
  6.     <title>m.php.cn手机端首页</title>
  7. </head>
  8. <body>
  9.     <header>
  10.         <img src="img/user_avatar.jpg" alt="头像">
  11.         <img src="img/logo.png" alt="官网logo">
  12.         <a href="">阿里图标</a>
  13.     </header>
  14.     <main>
  15.         <header><img src="" alt=""></header>
  16.         <nav>
  17.             <a href="">
  18.             <img src="img/html.png" alt="">
  19.             <span>Html/Css</span>
  20.             </a>
  21.             <a href="">
  22.                 <img src="img/JavaScript.png" alt="">
  23.                 <span>JavaScript</span>
  24.             </a>
  25.             <a href="">
  26.                 <img src="img/code.png" alt="">
  27.                 <span>服务器端</span>
  28.             </a>
  29.             <a href="">
  30.                 <img src="img/sql.png" alt="">
  31.                 <span>数据库</span>
  32.             </a>
  33.         </nav>
  34.         <nav>    
  35.             <a href="">
  36.                 <img src="img/app.png" alt="">
  37.                 <span>移动端</span>
  38.             </a>
  39.             <a href="">
  40.                 <img src="img/manual.png" alt="">
  41.                 <span>手册</span>
  42.             </a>
  43.             <a href="">
  44.                 <img src="img/tool2.png" alt="">
  45.                 <span>工具</span>
  46.             </a>
  47.             <a href="">
  48.                 <img src="img/live.png" alt="">
  49.                 <span>直播</span>
  50.             </a>
  51.         </nav>
  52.         <section>
  53.             <h2>推荐课程</h2>
  54.             <div>
  55.                 <section><a href=""><img src="img/1230.jpg" alt=""></a></section>
  56.                 <section><a href=""><img src="img/1230.jpg" alt=""></a></section>
  57.             </div>
  58.             <article>
  59.                 <section><a href=""><img src="img/1231.jpg" alt=""></a></section>
  60.                 <section>
  61.                     <a href="">CI框架30分钟极速入门</a>
  62.                     <span><i>中级</i><a>123次播放</a></span>
  63.                 </section>
  64.             </article>
  65.             <article>
  66.                 <section><a href=""><img src="img/1232.jpg" alt=""></a></section>
  67.                 <section>
  68.                     <a href="">2019前端入门_HTML5</a>
  69.                     <span><i>初级</i><a>345播放</a></span>
  70.                 </section>
  71.             </article>
  72.         </section>
  73.     </main>
  74.     <footer>
  76.     </footer>   
  77. </body>
  78. </html>

3.下面的是我的css组件

  1. @import "reset.css";
  2. body > header {
  3.     /*转为Flex*/
  4.     display: flex;
  5.     flex-direction: row;
  6.     justify-content: space-between;
  7.     align-items: center;
  8. }
  9. body > header > img:first-of-type,
  10. body > header > img:last-of-type {
  11.     height: 26px;
  12.     margin: 10px;
  13. }
  14. body > header > img:nth-of-type(2){
  15.     height: 40px;
  16. }
  17. body > header > img:first-of-type {
  18.     border-radius: 50%;
  19. }
  20. body > header > a {
  21.     font-size: 17px;
  22. }
  23. body > header {
  24.     background-color: #22282d;
  25. }
  26. body > main {
  27.     flex-grow: 1;
  28.     overflow: auto;
  29.     display: flex;
  30.     flex-direction: column;
  31. }
  32. /*轮播*/
  33. body > main > header > img {
  34.     width: 100vw;
  35. }
  36. /*导航区*/
  37. body > main > nav {
  38.     background-color: lightsteelblue;
  39.     display: flex;
  40.     flex-flow: row wrap;
  41.     justify-content: space-between;
  42.     align-content:space-between;
  43. }
  44. body > main > nav > a {
  45.     display: flex;
  46.     flex-flow: column wrap;
  47.     align-content: center;
  48.     text-align: center;
  49.     margin: 5px;
  50.     text-decoration: none;
  51. }
  52. body > main > nav > a > img {
  53.     width: 9vh;
  54.     margin: 2px;
  55. }
  56. /*主体内容区*/
  57. body > main > section {
  58.     display: flex;
  59.     flex-direction: column;
  60. }
  61. /*内容区的标题*/
  62. body > main > section > h2 {
  63.     padding: 2vh;
  64. }
  65. /*内容区的图文列表详情*/
  66. body > main > section > article {
  67.     display: flex;
  68.     flex-direction: row;
  69.     margin: 1vh 0;
  70. }
  71. body > main > section > div {
  72.     display: flex;
  73.     flex-direction: row;
  74.     margin: 1vh 0;
  75.     justify-content: center;
  76. }
  77. /* 2张图片对齐显示 */
  78. body > main > section > div > section {
  79.     display: flex;
  80.     flex-direction: column;
  81. }
  82. body > main > section > div > section > a >img {
  83.     width: 50vw;
  84.     padding-left: 2vw;
  85. }
  86. /* 内容区域图文列表详情 */
  87. body > main > section > article {
  88.     display: flex;
  89.     flex-direction: row;
  90.     margin: 1vh 0;
  91.     background-color: #fff;
  92.     margin-left: 1vw;
  93. }
  94. body > main > section > article > section{
  95.     display: flex;
  96.     flex-direction: column;
  97.     justify-content: space-around;
  98.     flex:1;
  99.     margin-left: 1vw;
  100. }
  101. body > main > section > article > section > a{
  102.     margin: 1vh 1vw;
  103. }
  104. body > main > section > article > section > a > img {
  105. height: 15vh;}

4.小结

感觉自己做的比较慢，照着老师做，但还是出现一些问题，最后还好找出来了，总体的页面效果，基本已经实现，还有一些细节的东西，我还会再改进的。

上一条：12月31日Laravel数据库访问类-九期线上班下一条：使用Grid布局，仿写二手交易网页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
小辰2020-01-03 19:08:011楼
确实是的，我会继续努力的

相关文章

查看更多