search

博客列表 >使用grid网格布局仿PHP中文网首页部分

使用grid网格布局仿PHP中文网首页部分

梦想
梦想原创
2022年07月17日 18:52:25694浏览
  1. <header>
  2.         <div class="headertop">
  3.             <!-- 头部 -->
  4.             <div class="headercenter">
  5.                 <!-- 头部左边 -->
  6.                 <div class="headerleft">
  7.                     <p>php中文网-程序员梦开始的地方</p>
  8.                 </div>
  9.                 <!-- 头部右边 -->
  10.                 <div class="haderright">
  11.                    <a href="" class="iconfont icon-tixingtianchong"></a>
  12.                     <a href="">
  13.                         <img src="images/user_avatar.jpg" alt="">
  14.                     </a>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.          <!-- 导航开始 -->
  19.          <div class="navs">
  20.             <div class="content">
  21.                 <a href="" class="logo"><img src="images/logo.png" alt=""></a>
  22.                 <nav>
  23.                     <a href="" class="active">首页</a>
  24.                     <a href="">视频教程</a>
  25.                     <a href="">学习路径</a>
  26.                     <a href="">技术博客</a>
  27.                     <a href="">资源下载</a>
  28.                 </nav>
  29.                 <div class="right">
  30.                     <input type="text" placeholder="请输入关键词">
  31.                     <span class="iconfont icon-fangdajing1 sousuo"></span>
  32.                 </div>
  33.             </div>
  35.          </div>
  36.     </header>
  37.     <main>
  38.         <div class="navs">
  39.             <div class="left">
  40.                 <a href="">PHP开发</a>
  41.                 <a href="">大前端</a>
  42.                 <a href="">后端开发</a>
  43.                 <a href="">数据库</a>
  44.                 <a href="">移动端</a>
  45.                 <a href="">运维开发</a>
  46.                 <a href="">UI设计</a>
  47.                 <a href="">计算机基础</a>
  48.             </div>
  49.             <div class="banner">
  50.                 <a href=""><img src="images/banner.png" alt=""></a>
  51.             </div>
  52.             <div class="right">
  53.                 <div class="top">
  54.                     <a href=""><img src="images/user_avatar.jpg" alt=""></a>
  55.                    <div class="user">
  56.                     <p>梦想</p>
  57.                     <p>P豆 2000</p>
  58.                    </div>
  59.                 </div>
  60.                 <div class="but">
  61.                     <button>我的学习</button>
  62.                 </div>
  63.                 <div class="rigth-bottom">
  64.                     <!-- <ul class="left">
  65.                         <li>问答社区</li>
  66.                         <li>头条</li>
  67.                         <li>福利</li>
  68.                         <li>新班</li>
  69.                         <li>招募</li>
  70.                         <li>公告</li>
  71.                     </ul>
  72.                         <ul class="right">
  73.                         <li>答疑</li>
  74.                         <li>66个面试问题，带你梳理MySQL知识点！</li>
  75.                         <li>限时折扣&gt;&gt;</li>
  76.                         <li>20期PHP线上班</li>
  77.                         <li>课程合作计划</li>
  78.                         <li>APP上线啦！</li>
  79.                     </ul> -->
  80.                      <div class="nav">
  82.                         <a>问答社区</a>
  83.                         <a>头条</a>
  84.                         <a>福利</a>
  85.                         <a>新班</a>
  86.                         <a>招募</a>
  87.                         <a>公告</a>
  90.                         <a>答疑</a>
  91.                         <a>66个面试问题，带你梳理MySQL知识点！</a>
  92.                         <a>限时折扣&gt;&gt;</a>
  93.                         <a>20期PHP线上班</a>
  94.                         <a>课程合作计划</a>
  95.                         <a>APP上线啦！</a>
  98.                      </div>
  99.                 </div>
  101.             </div>
  102.             <div class="xxlj">
  103.                <div class="desc">
  104.             <div class="title">学习路径</div>
  105.             <span>全部7个&gt;</span>
  106.           </div>
  107.           <ul class="detail">
  108.             <li onclick="">
  109.               <img src="images/dgjj.png" alt="" />
  110.               <a href="">独孤九贱</a>
  111.               <span>9门课程</span>
  112.             </li>
  113.             <li onclick="">
  114.               <img src="images/ynxj.png" alt="" />
  115.               <a href="">独孤九贱</a>
  116.               <span>9门课程</span>
  117.             </li>
  118.             <li onclick="">
  119.               <img src="images/tlbb.png" alt="" />
  120.               <a href="">独孤九贱</a>
  121.               <span>9门课程</span>
  122.             </li>
  123.             <li onclick="">
  124.               <img src="images/zxzn.png" alt="" />
  125.               <a href="">独孤九贱</a>
  126.               <span>9门课程</span>
  127.             </li>
  128.             <li onclick="">
  129.               <img src="images/xwcg.png" alt="" />
  130.               <a href="">独孤九贱</a>
  131.               <span>9门课程</span>
  132.             </li>
  133.           </ul>
  134.             </div>
  135.             <div class="lxfs">
  136.                 <div class="wx">
  137.                     <a href="" class="iconfont icon-weixin wx"></a>
  138.                 </div>
  139.                 <span class="wxh">微信公众号</span>
  140.                 <div class="qq">
  141.                     <a href="" class="iconfont icon-QQ qq"></a>
  142.                 </div>
  143.                 <span class="qqq">官方QQ群</span>
  144.             </div>
  145.         </div>
  146.     </main>

css部分

  1. @import url(reset.css);
  2. @import url(../icon-font/iconfont.css);
  3. header .headertop {
  4.   width: 100vw;
  5.   background-color: #343434;
  6. }
  7. header .headertop .headercenter {
  8.   width: 1200px;
  9.   display: grid;
  10.   grid-template-columns: 400px 100px;
  11.   grid-auto-rows: 40px;
  12.   place-content: space-between;
  13.   place-items: center start;
  14.   margin: auto;
  15. }
  17. header .headertop .headercenter p {
  18.   color: rgb(177, 175, 175);
  19. }
  20. header .headertop .haderright {
  21. }
  22. header .headertop .haderright a:first-of-type {
  23.   color: #ffffff;
  24. }
  25. header .headertop .haderright img {
  26.   width: 50%;
  27.   border-radius: 50%;
  28. }
  29. header .headertop .haderright {
  30.   display: grid;
  31.   grid-template-columns: repeat(2, 1fr);
  32.   place-items: center;
  33. }
  34. /* 导航 */
  35. header .navs{
  36.   width: 100vw;
  37.   height: 90px;
  38.   background-color: white;
  39.   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  40. }
  41. header .navs .content{
  42. width: 1200px;
  44.   display: grid;
  45.   grid-template-columns: 140px 1fr 200px;
  46.   grid-auto-rows: 90px;
  47.   margin: auto;
  48.   gap: 10px;
  49.   place-items: center start;
  50. }
  51. header .navs .content img{
  52.   width: 120px;
  53. }
  54. /* 导航右侧搜索框 */
  55. header .navs .content .right input{
  56.   height: 35px;
  57.   width: 200px;
  58.   border: none;
  59.   outline: none;
  60.   background-color: #ebe7e78a;
  61.   border-radius: 25px;
  62.   text-align: center;
  63.   margin-top: 25px;
  64. }
  65. /* 搜索字体图标 */
  66. header .navs .content .right .sousuo{
  67.   position: relative;
  68.   top: -30px;
  69.   left: 170px;
  70.   cursor: pointer;
  71. }
  72. header .navs .content  nav a{
  73.   padding: 0 10px;
  74. }
  75. header .navs .content  nav a:hover,
  76. header .navs .content  nav a:active,
  77. header .navs .content .right .sousuo:hover{
  78.    color: red;
  79.    font-weight: bold;
  80. }
  81. /* 中部 */
  82. main{
  83.   font-size: 14px;
  84. }
  85. main .navs{
  86.   height: 1200px;
  87.   display: grid;
  88.   grid-template-columns: 140px 810px 190px;
  89.   grid-template-rows: 400px 80px;
  90.   gap: 10px;
  91.   margin: 30px 18%;
  92. }
  93. main .navs  *{
  94.   background-color: white;
  95.   border-radius: 25px;
  96. }
  97. /* 底部学习路径 */
  98. main .navs .xxlj{
  99.   grid-column: span 2;
  100. }
  101. main .navs .left{
  102.   display: grid;
  103.   place-items: center;
  104. }
  105. main .navs .right .top{
  106.   display: grid;
  107.   grid-template-columns: 40px 1fr;
  108.   margin: 40px;
  109.   gap: 10px;
  111. }
  112. main .navs .right img{
  113.   width: 40px;
  114. }
  115. main .navs .right button{
  116.   width: 130px;
  117.   height: 30px;
  118.   background-color: red;
  119.   color: white;
  120.   border: none;
  121.   outline: none;
  122.   margin-left: 20%;
  123.   margin-top: -20px;
  124. }
  125. main .navs .right .but{
  126.   padding-bottom: 10px;
  127.   border-bottom: 1px solid;
  128.   border-radius: 0px;
  129. }
  130. /* 底部细节 */
  131. main .navs .xxlj{
  132.   display: grid;
  133.   grid-template-columns: 100px 1fr;
  134. }
  135. main .navs .xxlj .desc {
  136.   padding: 16px 0;
  137.   display: grid;
  138.   place-items: center;
  139. }
  140. main .navs .xxlj .desc span {
  141.   font-size: 12px;
  142.   color: #999;
  143. }
  144. main .navs .xxlj .desc span {
  145.   font-size: 12px;
  146.   color: #999;
  147. }
  148. main .navs .xxlj .detail {
  149.   display: flex;
  150.   place-items: center;
  151.   place-content: space-between;
  152.   padding: 20px;
  153. }
  154. main .navs .xxlj .detail li {
  155.   display: grid;
  156.   grid-template-columns: 36px 85px;
  157.   grid-template-columns: repeat(2, 1fr);
  158.   gap: 0 10px;
  159.   place-items: center start;
  160. }
  161. main .navs .xxlj .detail img {
  162.   width: 100%;
  163.   grid-row: span 2;
  164. }
  165. main .navs .xxlj .detail li a {
  166.   font-size: 14px;
  167. }
  169. main .navs .xxlj .detail li a:hover {
  170.   color: red;
  171. }
  173. main .navs .xxlj .detail li span {
  174.   font-size: 12px;
  175.   color: #999;
  176. }
  177. main .navs .right .rigth-bottom .nav{
  178.   display: grid;
  179.   grid-template-columns: 80px 1fr;
  180.   grid-template-rows: repeat(6,1fr);
  181.   grid-auto-flow: column;
  182.   place-items:  center;
  183.   line-height: 13px;
  184.   font-size: 12px;
  185. }
  186. main .navs .right .rigth-bottom .nav a:nth-of-type(7){
  187.   background-color: red;
  188.   color: white;
  189.   border-radius: 0px;
  190. }
  191. main .navs .right .rigth-bottom .nav a{
  192.   cursor: pointer;
  193. }
  194. main .navs .lxfs{
  195.  display: grid;
  196.  grid-template-columns: 1fr 1fr;
  197.  place-items: center;
  198. }
  199. main .navs .lxfs .wxh{
  200.   grid-area: 2;
  201. }
  202. main .navs .lxfs .wx,
  203. main .navs .lxfs .qq{
  204.   font-size: 1.5em;
  205. }

上一条：grid容器布局 display:grid下一条：0715rem计算
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多