search

博客列表 >右侧布局实现

右侧布局实现

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

实现

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

css

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

相关文章

查看更多