博主信息
博文 28
粉丝 0
评论 0
访问量 20073
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
淘宝移动端首页的页眉
手机用户1594223549
原创
560人浏览过

一.淘宝移动端首页

pc端实在不会写,基础太差,目前阶段只能照猫画猫,我在复习复习

1.效果图

2.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>淘宝手机版</title>
  8. <link rel="stylesheet" href="css/reset.css" />
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. }
  15. header,footer {
  16. height: 50px;
  17. position: fixed;
  18. }
  19. header {
  20. top: 0;
  21. left: 0;
  22. right: 0;
  23. z-index: 1;
  24. }
  25. main {
  26. min-height: 2000px;
  27. /* overflow: hidden; */
  28. position: relative;
  29. top: 50px;
  30. }
  31. footer {
  32. background-color: yellowgreen;
  33. left: 0;
  34. right: 0;
  35. bottom: 0;
  36. }
  37. /* 页眉布局 */
  38. header {
  39. display: grid;
  40. grid-template-columns: 0.58rem 1fr 0.33rem;
  41. grid-template-rows: 0.5rem;
  42. place-items: center;
  43. gap: 0.1rem;
  44. }
  45. header a.logo {
  46. padding-left: 0.1rem;
  47. }
  48. header a.search {
  49. width: 100%;
  50. border: 1.5px solid #ff5000;
  51. height: 0.31rem;
  52. border-radius: 0.3rem;
  53. display: flex;
  54. place-content: space-between;
  55. place-items: center;
  56. }
  57. header a.search > span:first-of-type {
  58. padding-left: 0.1rem;
  59. }
  60. header a.search > span:last-of-type {
  61. background: linear-gradient(to left, #ff5000, #ffc000);
  62. color: white;
  63. padding: 0.04rem 0.2rem;
  64. border-radius: 0.3rem;
  65. margin-right: 0.03rem;
  66. }
  67. header a.iconfont {
  68. font-size: large;
  69. }
  70. </style>
  71. </head>
  72. <body>
  73. <!-- 首页 -->
  74. <header>
  75. <a class=”logo“ href="https://m.taobao.com"><img src="images/nav/logo.png" alt="缓存中"></a>
  76. <a href="" class="search">
  77. <span>寻找宝贝店铺</span>
  78. <span>搜索</span>
  79. </a>
  80. <a href="" class="iconfont"><img src="images/nav/qiandao.png" alt="缓存中"></a>
  81. </header>
  82. <!-- 主体 -->
  83. <main>主体</main>
  84. <!-- 页脚 -->
  85. <footer>页脚</footer>
  86. </body>
  87. </html>
批改老师:PHPzPHPz

批改状态:合格

老师批语:完成的不错,下次可以添加一些自己的总结和理解
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学