简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >php.cn右侧布局

php.cn右侧布局

期待.
期待.原创
2022年07月16日 17:01:14346浏览

前言：虽然样子多多少少是做出来了,但是确实代码写的很乱,也是希望各位指出我代码中的一些问题！

1.效果图

效果图

2.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.     <title>grid: 仿PHP.CN首页</title>
  8.     <!-- <link rel="stylesheet" href="icon-font.css" /> -->
  9.     <link rel="stylesheet" href="https://at.alicdn.com/t/font_3205780_7eqow85axa.css" />
  10.     <link rel="stylesheet" href="static/css/header.css" />
  11.     <link rel="stylesheet" href="static/css/main-nav.css" />
  12.     <link rel="stylesheet" href="./font_3511886_v5kw9xhio/iconfont.css">
  13.   </head>
  14.   <body>
  15.     <!-- 页眉 -->
  16.     <header>
  17.       <!-- 顶部 -->
  18.       <div class="top">
  19.         <div class="content">
  20.           <!-- 左边:顶部标题 -->
  21.           <div class="title">php中文网,程序员梦开始的地方!</div>
  23.           <!-- 右边: 用户信息 -->
  24.           <div class="right">
  25.             <a href="" class="iconfont icon-tixingtianchong"></a>
  26.             <a href=""><img src="static/images/user-pic.jpeg" alt="" /></a>
  27.           </div>
  28.         </div>
  29.       </div>
  30.       <!-- 导航 -->
  31.       <div class="navs">
  32.         <div class="content">
  33.           <a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
  34.           <nav>
  35.             <a href="" class="active">首页</a>
  36.             <a href="">视频教程</a>
  37.             <a href="">学习路径</a>
  38.             <a href="">php培训</a>
  39.             <a href="">资源下载</a>
  40.           </nav>
  41.           <div class="search">
  42.             <input type="search" placeholder="输入关键字" />
  43.             <span class="iconfont icon-fangdajing1"></span>
  44.           </div>
  45.         </div>
  46.       </div>
  47.     </header>
  49.     <!-- 主体 -->
  50.     <main>
  51.       <div class="navs">
  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=""><img src="static/images/slider.jpeg" alt="" /></a>
  64.         </div>
  65.         <div class="right">
  66.           <div class="content">
  67.             <a href=""><img src="static/images/user-pic.jpeg" alt=""></a>
  68.             <a href="" style="color:#333333; float: left; font-weight:bold;">朱老师</a>
  69.             <a href="">P豆：2000</a>
  70.           </div>
  71.           <div class="aniu">
  72.             <a href="">我的学习</a>
  73.           </div>
  74.           <div style="border-bottom: 1px solid #eeeeee; margin-top: 30px;"></div>
  75.           <div class="right-zhong">
  76.             <div>问答社区</div>
  77.             <a href="">答疑</a>
  78.           </div>
  79.           <div class="right-xia">
  80.             <div>头条</div>
  81.             <a href="">新闻</a>
  82.             <div>福利</div>
  83.             <a href="">限时折扣>></a>
  84.             <div>新班</div>
  85.             <a href="">20期PHP</a>
  86.             <div>招募</div>
  87.             <a href="">课程合作计划</a>
  88.             <div>公告</div>
  89.             <a href="">APP上线啦</a>
  90.           </div>
  92.         </div>
  93.         <div class="bottom-left">
  94.           <div class="desc">
  95.             <div class="title">学习路径</div>
  96.             <span>全部7个&gt;</span>
  97.           </div>
  98.           <ul class="detail">
  99.             <li onclick="">
  100.               <img src="static/images/dgjj.png" alt="" />
  101.               <a href="">独孤九贱</a>
  102.               <span>9门课程</span>
  103.             </li>
  104.             <li onclick="">
  105.               <img src="static/images/ynxj.png" alt="" />
  106.               <a href="">独孤九贱</a>
  107.               <span>9门课程</span>
  108.             </li>
  109.             <li onclick="">
  110.               <img src="static/images/tlbb.png" alt="" />
  111.               <a href="">独孤九贱</a>
  112.               <span>9门课程</span>
  113.             </li>
  114.             <li onclick="">
  115.               <img src="static/images/phpkjkf.png" alt="" />
  116.               <a href="">独孤九贱</a>
  117.               <span>9门课程</span>
  118.             </li>
  119.             <li onclick="">
  120.               <img src="static/images/phpksrm.png" alt="" />
  121.               <a href="">独孤九贱</a>
  122.               <span>9门课程</span>
  123.             </li>
  124.           </ul>
  125.         </div>
  126.         <div class="bottom-right">
  127.           <span class="iconfont icon-weibo-circle-fill"></span>
  128.           <span class="iconfont icon-QQ-circle-fill"></span>
  129.           <a href="">官方公众号</a>
  130.           <a href="">官方QQ群</a>
  131.         </div>
  132.       </div>
  133.     </main>
  134.   </body>
  135. </html>

3.CSS代码

  1. main {
  2.   /* 因为浏览器默认是16px, 16有点大  */
  3.   font-size: 14px;
  4. }
  6. main .navs {
  7.   /* 2行3列 */
  8.   display: grid;
  9.   grid-template-rows: 400px 80px;
  10.   grid-template-columns: 160px 810px 190px;
  11.   gap: 20px;
  12.   place-content: center;
  13.   margin: 30px 0;
  14. }
  16. /* 统一样式,完成后可看到基本框架 */
  18. main .navs > * {
  19.   background-color: #fff;
  20.   border-radius: 20px;
  21. }
  23. /* 底部左边占2列 */
  25. main .navs .bottom-left {
  26.   grid-column: span 2;
  27. }
  29. /* 整体布局完成,剩下就是细节了 */
  31. /* 上部左边导航 */
  33. main .navs .left {
  34.   padding: 20px 0;
  35.   /* grid: 默认每个项目都是"块级", 垂直排列  */
  36.   /* flex: 默认每个项目都是"行内块级", 水平排列 */
  37.   display: grid;
  38.   /* 当前项目在每个网络单元中, 垂直,水平均居中 */
  39.   /* place-items: 垂直方向  水平方向; */
  40.   place-items: center;
  41. }
  43. main .navs .left a {
  44.   padding: 10px 20px;
  45. }
  47. main .navs .left a:hover {
  48.   border-radius: 20px;
  49.   color: red;
  50.   background-color: rgb(250, 223, 227);
  51. }
  53. /* 轮播图,单图模拟 */
  55. main .navs .slider img {
  56.   width: 100%;
  57.   border-radius: 20px;
  58. }
  60. /* 底部左侧 */
  62. main .navs .bottom-left {
  63.   display: grid;
  64.   grid-template-columns: 100px 1fr;
  65. }
  67. main .navs .bottom-left .desc {
  68.   padding: 16px 0;
  69.   display: grid;
  70.   place-items: center;
  71. }
  73. main .navs .bottom-left .desc span {
  74.   font-size: 12px;
  75.   color: #999;
  76. }
  78. main .navs .bottom-left .detail {
  79.   display: flex;
  80.   place-items: center;
  81.   place-content: space-between;
  82.   padding: 20px;
  83. }
  85. main .navs .bottom-left .detail li {
  86.   display: grid;
  87.   grid-template-columns: 36px 85px;
  88.   grid-template-columns: repeat(2, 36);
  89.   gap: 0 10px;
  90.   place-items: center start;
  91. }
  93. main .navs .bottom-left .detail img {
  94.   width: 100%;
  95.   grid-row: span 2;
  96. }
  98. main .navs .bottom-left .detail li a {
  99.   font-size: 14px;
  100. }
  102. main .navs .bottom-left .detail li a:hover {
  103.   color: red;
  104. }
  106. main .navs .bottom-left .detail li span {
  107.   font-size: 12px;
  108.   color: #999;
  109. }
  111. main .navs .right .content {
  112.   display: grid;
  113.   grid-template-columns:repeat(2,1fr);
  114.   grid-template-rows:repeat(2,1fr);
  115.   grid-row: 1 / span 2;
  116.   /* place-items: center start; */
  117. }
  119. main .navs .right .content a:nth-of-type(1) {
  120.   grid-row: 1 / span 2;
  121.   place-self:center center;
  122.   padding: 10px;
  124. }
  126. main .navs .right .content a:nth-of-type(2) {
  127.   place-self:center start;
  129. }
  131. main .navs .right .content img {
  132.   border-radius: 100px;
  133.   width: 60px;
  134. }
  136. main .navs .right .aniu > a {
  137.   display: block;
  138.   background: #f11717;
  139.   padding: 10px;
  140.   width: 150px;
  141.   height: 40px;
  142.   border-radius: 30px;
  143.   margin-left: 22px;
  144.   text-align: center;
  145.   color: #ffffff;
  146. }
  148. main .navs .right .right-zhong {
  149.   display: flex;
  150.   width: 200px;
  151.   padding: 15px;
  152.   place-content:space-evenly;
  153. }
  155. main .navs .right .right-zhong a {
  156.   background: #ff583d;
  157.   color:#ffffff;
  158.   border-radius: 2px;
  159. }
  161. main .navs .right .right-xia {
  162.   display: grid;
  163.   grid-template-rows: repeat(5,1fr);
  164.   grid-template-columns: repeat(2,1fr);
  165.   /* width: 200px; */
  166.   place-items: center start;
  168. }
  170. main .navs .right .right-xia > div {
  171.   /* background-color: red; */
  172.   margin: 5px;
  173.   padding: 5px;
  174. }
  176. main .navs .right .right-xia > a:hover {
  177.   color: red;
  179. }
  181. main .navs .right .right-xia > a {
  182.   outline: none;
  183.   color: #b6b6b6
  184. }
  186. main .navs .bottom-right {
  187.   display: grid;
  188.   grid-template-rows: repeat(2,1fr);
  189.   grid-template-columns: repeat(2,1fr);
  190.   place-items: center;
  191. }
  193. main .navs .bottom-right span {
  194.  font-size: 35px;
  195.  padding: 5px;
  196. }
  198. main .navs .bottom-right a {
  199.   margin-bottom: 7px;
  200.   font-weight: bold;
  201. }
  203. main .navs .bottom-right a:hover {
  204.   color: red;
  205.   outline: none;
  206. }
上一条：实例演示绝对定位与相对定位下一条：三个视口与移动端布局的理解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多