博主信息
博文 65
粉丝 2
评论 0
访问量 74976
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
天勒!这个装修网站pc端的首页布局原形,太有创意了!
张福根一修品牌运营
原创
817人浏览过

按自己想法完善pc端的布局页面

效果展示:

pc端的布局页面

源码分享:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>按自己想法完善pc端的布局页面</title>
  7. <style>
  8. /* 初始化 */
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. a {
  15. text-decoration: none;
  16. color: black;
  17. }
  18. body {
  19. display: flex;
  20. min-width: 40em;
  21. flex-flow: column nowrap;
  22. background-color: white;
  23. }
  24. header,
  25. footer {
  26. height: 45px;
  27. /* border: 1px solid coral; */
  28. }
  29. header {
  30. display: flex;
  31. align-items: center;
  32. background-color: green;
  33. font-size: 1.1rem;
  34. margin-bottom: 0.5em;
  35. margin-top: 6em;
  36. }
  37. header > a {
  38. flex: 0 1 8em;
  39. text-align: center;
  40. color: white;
  41. }
  42. /* LOGO */
  43. header > a:first-of-type {
  44. margin-right: 4em;
  45. }
  46. /* Login button 应该是在哪右边 */
  47. header > a:last-of-type {
  48. margin-left: auto;
  49. }
  50. header > a:hover:not(:first-of-type) {
  51. color: coral;
  52. }
  53. /* 主体样式 */
  54. .container {
  55. min-height: 40em;
  56. display: flex;
  57. justify-content: center;
  58. }
  59. .container > aside,
  60. .container > main {
  61. /* border: 1px solid coral; */
  62. background-color: #dadada;
  63. }
  64. .container > aside {
  65. flex: 0 0 200px;
  66. }
  67. .container > main {
  68. flex: 0 0 60em;
  69. margin: 0 0.5em;
  70. }
  71. /* 页脚 */
  72. footer {
  73. display: flex;
  74. flex-flow: column nowrap;
  75. background-color: #c5c3c3a6;
  76. text-align: center;
  77. margin-top: 0.5em;
  78. height: 8em;
  79. /* 垂直居中 */
  80. justify-content: center;
  81. }
  82. /* 媒体查询 */
  83. @media screen and (max-width: 1000px) {
  84. aside:last-of-type {
  85. display: none;
  86. }
  87. }
  88. @media screen and (max-width: 700px) {
  89. aside,
  90. footer,
  91. header > a:not(:first-of-type):not(:last-of-type) {
  92. display: none;
  93. }
  94. }
  95. </style>
  96. </head>
  97. <body>
  98. <!-- 页眉 -->
  99. <header>
  100. <a href="">LOGO</a>
  101. <a href="">首页</a>
  102. <a href="">服务项目</a>
  103. <a href="">线下门店</a>
  104. <a href="">装修设计</a>
  105. <a href="">旧房翻新</a>
  106. <a href="">局部装修</a>
  107. <a href="">维修安装</a>
  108. <a href="">预约记录</a>
  109. <a href="">客户评价</a>
  110. <a href="">登录</a>
  111. </header>
  112. <!-- 主体三列 -->
  113. <div class="container">
  114. <aside>左边</aside>
  115. <main>主体</main>
  116. <aside>右边</aside>
  117. </div>
  118. <!-- 页脚 -->
  119. <footer>
  120. <p>
  121. php中文网&copy;版权所有(2015-2022) | 备案号:
  122. <a href="">皖ICP-150********</a>
  123. </p>
  124. <p>中国.合肥政务新区置地广场 | 电话: 0551-888999**</p>
  125. </footer>
  126. </body>
  127. </html>

效果总结:

  • web前端开发技巧:多学习、多练习、多总结
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:现在是不是有一种之前的布局白学的感觉... 五岳归来不看山, 黄山归来不看岳... flex就是五岳, grid就是黄山, 而黄山就是安徽,php中文网总部在安徽合肥,相信你一定能掌握布局技能
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

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