博客列表 >右侧布局实现

右侧布局实现

新手1314
新手1314原创
2022年03月27日 17:42:35345浏览

实现

HTML

  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. <link rel="stylesheet" href="static/css/reset.css" />
  8. <link rel="stylesheet" href="//at.alicdn.com/t/font_3269118_mgnsjoz5gtp.css" />
  9. <link rel="stylesheet" href="static/css/header.css" />
  10. <link rel="stylesheet" href="static/css/main-nav.css" />
  11. <link rel="stylesheet" href="//at.alicdn.com/t/font_3280782_t7zyuayyde.css" />
  12. <title>仿php.cn中文网首页差头部</title>
  13. </head>
  14. <body>
  15. <!-- 页眉 -->
  16. <header>
  17. <!-- 1 顶部 -->
  18. <div class="top">
  19. <div class="content">
  20. <div class="title">php中文网,程序员梦开始的地方!</div>
  21. <div class="right">
  22. <a href="" class="iconfont icon-tixing"></a>
  23. <a href=""><img src="static/images/user_avatar.jpg" alt="" /></a>
  24. </div>
  25. </div>
  26. </div>
  27. <!-- 2 导航 -->
  28. <div class="navs">
  29. <div class="content">
  30. <a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
  31. <nav>
  32. <a href="" class="active">首页</a>
  33. <a href="">视频教程</a>
  34. <a href="">学习路径</a>
  35. <a href="">php培训</a>
  36. <a href="">资源下载</a>
  37. <a href="">技术文章</a>
  38. <a href="">社区</a>
  39. <a href="" class="active">APP下载</a>
  40. </nav>
  41. <div class="search">
  42. <input type="search" placeholder="输入关键字搜索" />
  43. <span class="iconfont icon-fangdajing fdj"></span>
  44. </div>
  45. </div>
  46. </div>
  47. </header>
  48. <!-- 主体 -->
  49. <main>
  50. <div class="navs">
  51. <!-- 2行3列 -->
  52. <div class="left">
  53. <a href="">php开发</a>
  54. <a href="">大前端</a>
  55. <a href="">后端开发</a>
  56. <a href="">数据库</a>
  57. <a href="">移动端</a>
  58. <a href="">运维开发</a>
  59. <a href="">UI设计</a>
  60. <a href="">计算机基础</a>
  61. </div>
  62. <div class="slider">
  63. <a href="">
  64. <img src="static/images/slider.jpeg" alt="" />
  65. </a>
  66. </div>
  67. <div class="right">
  68. <ul class="shiyan">
  69. <li>
  70. <img src="static/images/user_avatar.jpg" alt="" />
  71. </li>
  72. </ul>
  73. <ul class="shiyan1">
  74. <li><a href="">新手1314</a></li>
  75. </ul>
  76. <ul class="shiyan2">
  77. <li>P豆:14</li>
  78. </ul>
  79. <ul class="shiyan3">
  80. <li><a href="">我的学习</a></li>
  81. </ul>
  82. <ul class="shiyan4">
  83. <li>问答社区</li>
  84. </ul>
  85. <ul class="shiyan5">
  86. <li><a href="">答疑</a></li>
  87. </ul>
  88. <ul class="shiyan6">
  89. <li>头条</li>
  90. </ul>
  91. <ul class="shiyan7">
  92. <li><a href="">“程序员做饭指南”</a></li>
  93. </ul>
  94. <ul class="shiyan6">
  95. <li>新课</li>
  96. </ul>
  97. <ul class="shiyan8">
  98. <li><a href="">3.9号公益直播课</a></li>
  99. </ul>
  100. <ul class="shiyan6">
  101. <li>新班</li>
  102. </ul>
  103. <ul class="shiyan8">
  104. <li><a href="">19期PHP直播班</a></li>
  105. </ul>
  106. <ul class="shiyan6">
  107. <li>招募</li>
  108. </ul>
  109. <ul class="shiyan8">
  110. <li><a href="">课程合作计划</a></li>
  111. </ul>
  112. <ul class="shiyan6">
  113. <li>公告</li>
  114. </ul>
  115. <ul class="shiyan8">
  116. <li><a href="">APP上线啦</a></li>
  117. </ul>
  118. </div>
  119. <div class="bottom-left">
  120. <!-- 学习路径 -->
  121. <div class="desc">
  122. <div class="title">学习路径</div>
  123. <span>全部7个&gt;</span>
  124. </div>
  125. <ul class="detail">
  126. <li onclick="">
  127. <img src="static/images//dgjj.png" alt="" />
  128. <a href="">独孤九贱</a>
  129. <span>9门课程</span>
  130. </li>
  131. <li onclick="">
  132. <img src="static/images//ynxj.png" alt="" />
  133. <a href="">玉女心经</a>
  134. <span>5门课程</span>
  135. </li>
  136. <li onclick="">
  137. <img src="static/images//tlbb.png" alt="" />
  138. <a href="">天龙八部</a>
  139. <span>3门课程</span>
  140. </li>
  141. <li onclick="">
  142. <img src="static/images//phpkjkf.png" alt="" />
  143. <a href="">自学指南</a>
  144. <span>19门课程</span>
  145. </li>
  146. <li onclick="">
  147. <img src="static/images//phpksrm.png" alt="" />
  148. <a href="">趣味闯关</a>
  149. <span>22门课程</span>
  150. </li>
  151. </ul>
  152. </div>
  153. <div class="bottom-right">
  154. <ul class="tubiao">
  155. <li>
  156. <a href=""><span class="iconfont icon-logo-wechat"></span></a>
  157. </li>
  158. </ul>
  159. <ul class="tubiao">
  160. <li>
  161. <a href=""><span class="iconfont icon-QQ-circle-fill"></span></a>
  162. </li>
  163. </ul>
  164. <ul class="font">
  165. <li><a href="">官方公众号</a></li>
  166. </ul>
  167. <ul class="font">
  168. <li><a href="">官方QQ群</a></li>
  169. </ul>
  170. </div>
  171. </div>
  172. </main>
  173. </body>
  174. </html>

css

  1. reset.css:
  2. /* 页面元素样式初始化 */
  3. * {
  4. margin: 0;
  5. padding: 0;
  6. box-sizing: border-box;
  7. }
  8. a {
  9. text-decoration: none;
  10. /* color: #555; */
  11. }
  12. body {
  13. background-color: rgb(243, 245, 247);
  14. }
  15. li {
  16. list-style: none;
  17. }
  1. header.css:
  2. header .top {
  3. width: 100vw;
  4. height: 40px;
  5. background-color: rgb(52, 52, 52);
  6. color: #aaa;
  7. }
  8. header .top .content img {
  9. width: 50%;
  10. border-radius: 50%;
  11. }
  12. header .top .content {
  13. width: 1200px;
  14. display: grid;
  15. grid-template-columns: 400px 100px;
  16. grid-auto-rows: 40px;
  17. place-content: space-between;
  18. place-items: center start;
  19. margin: auto;
  20. }
  21. header .top .content .right .iconfont {
  22. color: #eee;
  23. font-size: larger;
  24. }
  25. header .top .content .right {
  26. display: grid;
  27. grid-template-columns: repeat(2, 1fr);
  28. place-items: center;
  29. }
  30. /* 导航 */
  31. header .navs {
  32. width: 100vw;
  33. height: 90px;
  34. background-color: #fff;
  35. }
  36. header .navs .content {
  37. width: 1200px;
  38. /* border: 1px solid #000; */
  39. display: grid;
  40. grid-template-columns: 140px 1fr 200px;
  41. grid-auto-rows: 90px;
  42. gap: 10px;
  43. margin: auto;
  44. place-items: center start;
  45. }
  46. header .navs .content img {
  47. width: 100%;
  48. }
  49. header .navs .content nav a.active,
  50. header .navs .content nav a:hover {
  51. color: red;
  52. font-weight: bold;
  53. }
  54. header .navs .content nav a {
  55. color: #555;
  56. }
  57. header .navs .content .search {
  58. display: flex;
  59. }
  60. header .navs .content nav {
  61. display: grid;
  62. grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;
  63. place-items: center center;
  64. }
  65. header .navs .content nav a {
  66. padding: 0 10px;
  67. }
  68. header .navs .content .search input[type="search"] {
  69. width: 200px;
  70. height: 36px;
  71. border: none;
  72. outline: none;
  73. background-color: #f7f8fa;
  74. border-radius: 20px;
  75. padding-left: 10px;
  76. }
  77. header .navs .content .search .fdj {
  78. font-size: 22px;
  79. color: #ccc;
  80. position: relative;
  81. left: -40px;
  82. top: 5px;
  83. }
  1. main-nav.css:
  2. main {
  3. font-size: 14px;
  4. }
  5. main .navs {
  6. /* 2行3列 */
  7. display: grid;
  8. grid-template-columns: 160px 810px 190px;
  9. grid-template-rows: 400px 80px;
  10. gap: 20px;
  11. place-content: center;
  12. margin: 30px 0;
  13. }
  14. main .navs > * {
  15. background-color: #fff;
  16. border-radius: 20px;
  17. /* outline: 1px solid red; */
  18. }
  19. /* 底部左侧占2列 */
  20. main .navs .bottom-left {
  21. grid-column: span 2;
  22. }
  23. main .navs .slider img {
  24. width: 100%;
  25. border-radius: 20px;
  26. }
  27. /* 左侧导航 */
  28. main .navs .left {
  29. display: grid;
  30. place-items: center;
  31. padding: 20px 0;
  32. }
  33. main .navs .left a:hover {
  34. color: red;
  35. background-color: rgb(250, 223, 227);
  36. }
  37. main .navs .left a {
  38. border-radius: 20px;
  39. padding: 10px 20px;
  40. color: #555;
  41. }
  42. /* 底部左侧 */
  43. main .navs .bottom-left {
  44. display: grid;
  45. grid-template-columns: 100px 1fr;
  46. }
  47. main .navs .bottom-left .desc {
  48. display: grid;
  49. place-items: center;
  50. padding: 16px;
  51. }
  52. main .navs .bottom-left .detail img {
  53. width: 100%;
  54. grid-row: span 2;
  55. }
  56. main .navs .bottom-left .detail {
  57. display: flex;
  58. place-items: center;
  59. place-content: space-between;
  60. }
  61. main .navs .bottom-left .detail li {
  62. display: grid;
  63. grid-template-columns: 36px 85px;
  64. gap: 0 10px;
  65. place-items: center start;
  66. }
  67. main .navs .bottom-left .detail li a {
  68. font-size: 14px;
  69. }
  70. main .navs .bottom-left .detail li a:hover {
  71. color: red;
  72. }
  73. main .navs .bottom-left .detail li span,
  74. main .navs .bottom-left .desc span {
  75. font-size: 12px;
  76. color: #999;
  77. }
  78. main .navs .right {
  79. display: grid;
  80. grid-template-columns: 70px 100px;
  81. grid-template-rows: 40px 40px 80px 40px 40px 40px 40px 40px 40px;
  82. gap: 0 20px;
  83. }
  84. main .navs .right .shiyan img {
  85. width: 100%;
  86. border-radius: 30px;
  87. margin-left: 30px;
  88. margin-top: 20px;
  89. }
  90. main .navs .right .shiyan {
  91. display: grid;
  92. grid-template-columns: 50px;
  93. grid-template-rows: 80px;
  94. grid-row: span 2;
  95. place-items: center center;
  96. }
  97. main .navs .right .shiyan1 {
  98. display: grid;
  99. place-items: end start;
  100. }
  101. main .navs .right .shiyan2 {
  102. display: grid;
  103. place-items: center start;
  104. }
  105. main .navs .right .shiyan3 {
  106. display: grid;
  107. grid-column: span 2;
  108. place-items: center center;
  109. border-bottom: 1px solid rgb(207, 204, 204);
  110. }
  111. main .navs .right .shiyan3 li {
  112. height: 40px;
  113. width: 150px;
  114. border: 0;
  115. background-color: red;
  116. border-radius: 20px;
  117. line-height: 3;
  118. margin-top: -20px;
  119. }
  120. main .navs .right .shiyan3 li a {
  121. margin-left: 50px;
  122. color: #fff;
  123. }
  124. main .navs .right .shiyan4 {
  125. display: grid;
  126. place-items: center end;
  127. font-weight: bolder;
  128. }
  129. main .navs .right .shiyan5 {
  130. display: grid;
  131. place-items: center start;
  132. }
  133. main .navs .right .shiyan5 li a {
  134. color: #fff;
  135. margin-left: 5px;
  136. }
  137. main .navs .right .shiyan5 li {
  138. border: 0;
  139. background-color: red;
  140. font-size: 14px;
  141. width: 40px;
  142. }
  143. main .navs .right .shiyan6 {
  144. display: grid;
  145. place-items: center center;
  146. font-weight: bolder;
  147. }
  148. main .navs .right .shiyan7 {
  149. margin-left: -30px;
  150. color: #999;
  151. margin-top: 10px;
  152. }
  153. main .navs .right .shiyan7 li a:hover,
  154. main .navs .right .shiyan8 li a:hover {
  155. color: red;
  156. }
  157. main .navs .right .shiyan7 li a,
  158. main .navs .right .shiyan8 li a {
  159. color: #999;
  160. }
  161. main .navs .right .shiyan8 {
  162. display: grid;
  163. place-items: center center;
  164. margin-left: -30px;
  165. color: #999;
  166. }
  167. main .navs .bottom-right {
  168. display: grid;
  169. grid-template-columns: 95px 95px;
  170. grid-template-rows: 50px 30px;
  171. }
  172. main .navs .bottom-right .icon-logo-wechat,
  173. main .navs .bottom-right .icon-QQ-circle-fill {
  174. font-size: 40px;
  175. color: #999;
  176. }
  177. main .navs .bottom-right .tubiao {
  178. display: grid;
  179. place-items: center center;
  180. }
  181. main .navs .bottom-right .font {
  182. display: grid;
  183. place-items: center center;
  184. font-size: 10px;
  185. margin-top: -10px;
  186. color: #999;
  187. }
  188. main .navs .bottom-right .font li a {
  189. color: #000;
  190. }
  191. main .navs .bottom-right .font li a:hover {
  192. color: red;
  193. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议