search

博客列表 >PHP中文网的架构

PHP中文网的架构

风车
风车原创
2022年07月20日 16:10:30404浏览

主要用到grid布局和flex布局，右侧导航栏用的固定定位

下面是代码

  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>PHP中文网</title>
  8.     <link rel="stylesheet" href="CSS/icon.css">
  9.     <link rel="stylesheet" href="CSS/head.css">
  10. </head>
  11. <body>
  12.     <!-- 页面头部 -->
  13.     <header>
  14.         <!-- 顶部 -->
  15.         <div class="top">
  16.             <div class="content">
  17.                 <div class="title">PHP中文网,程序员梦开始的地方</div>
  18.                 <div class="right">
  19.                     <a href="" class="iconfont icon-tixingtianchong"></a>
  20.                     <a href="" ><img src="images\user-pic.jpeg" alt="" width="35px"></a>
  21.                 </div>
  22.             </div>
  24.             <!-- 导航 -->
  25.           </div>
  26.           <div class="navs">
  27.                <div class="text">
  28.                 <a href=""><img src="images\logo.png" alt=""></a>
  29.                 <nav>
  30.                     <a href="">首页</a>
  31.                     <a href="">视频教程</a>
  32.                     <a href="">学习路径</a>
  33.                     <a href="">PHP培训</a>
  34.                     <a href="">资源下载</a>
  35.                     <a href="">技术文章</a>
  36.                     <a href="">社区</a>
  37.                     <a href=""> <img src="" alt=""> APP下载</a>
  38.                 </nav>
  39.                 <div class="search">
  40.                    <a href=""></a> <input type="search" name="" id="" value="">
  41.                 </div>
  42.                </div>
  43.           </div>
  46.     </header>
  47.     <!-- 页面主题 -->
  48.     <main>
  49.         <!-- 主页导航 -->
  50.          <div class="navs">
  51.             <div class="left">
  52.                 <a href="">PHP开发</a>
  53.                 <a href="">大前端</a>
  54.                 <a href="">后端开发</a>
  55.                 <a href="">数据库</a>
  56.                 <a href="">移动端</a>
  57.                 <a href="">运维开发</a>
  58.                 <a href="">UI设计</a>
  59.                 <a href="">计算机基础</a>
  60.             </div>
  61.             <div class="slider">
  62.                 <a href=""><img src="images\slider.jpeg" alt=""></a>
  63.             </div>
  64.             <div class="lefts">
  65.                 <!-- 右边 -->
  66.                 <div class="usue">
  68.                 </div>
  69.                 <div class="lefts">
  70.                     <div class="my">
  71.                      <a href=""><img src="images\user-pic.jpeg" alt=""></a>
  72.                      <div class="mmy">
  73.                         <a href="">风车</a>
  74.                      <a href="">粉丝：1852W</a>
  75.                      </div>
  76.                     </div>
  77.                     <DIV class="sloo">我的学习</DIV>
  78.                     <div class="mys">
  79.                         <a href="">问答社区</a>
  80.                         <a href="">头条</a>
  81.                         <a href="">福利</a>
  82.                         <a href="">新班</a>
  83.                         <a href="">招募</a>
  84.                         <a href="">公告</a>
  86.                     </div>
  88.                 </div>
  89.             </div>
  90.          </div>
  91.          <!-- 学习科目导航 -->
  92.          <div class="xuexi">
  93.             <div>
  94.             <ul class="kemu">
  95.                 <li>
  96.                     <a href="">学习路径</a>
  97.                     <span>全部七个</span>
  98.                 </li>
  99.                 <li>
  100.                     <img src="images\ynxj.png" alt="">
  101.                     <a href="">独孤九剑</a>
  102.                     <span>9门课程</span>
  103.                 </li>
  104.                 <li>
  105.                     <img src="images\ynxj.png" alt="">
  106.                     <a href="">玉女心经</a>
  107.                     <span>6门课程</span>
  108.                 </li>
  109.                 <li>
  110.                     <img src="images\ynxj.png" alt="">
  111.                     <a href="">天龙八部</a>
  112.                     <span>7门课程</span>
  113.                 </li>
  114.                 <li>
  115.                     <img src="images\ynxj.png" alt="">
  116.                     <a href="">自学指南</a>
  117.                     <span>5门课程</span>
  118.                 </li>
  119.                 <li>
  120.                     <img src="images\ynxj.png" alt="">
  121.                     <a href="">趣味闯关</a>
  122.                     <span>3门课程</span>
  123.                 </li>
  125.             </ul>
  126.         </div>
  127.         <div class="lianxi">
  128.             <ul>
  129.                 <li>
  130.                     <img src="" alt="">
  131.                 </li>
  132.             </ul>
  133.         </div>
  134.          </div>
  135.          <!-- 侧边导航 -->
  136.          <div class="cebian" >
  137.             <a href="">直播课</a>
  138.             <a href="">限时折扣</a>
  139.             <a href="">最新课程</a>
  140.             <a href="">热门推荐</a>
  141.             <a href="">手册教材</a>
  142.             <a href="">资源下载</a>
  143.             <a href="">技术文章</a>
  144.             <a href="">博客文章</a>
  145.             <a href="">社区问答</a>
  146.             <a href="">APP下载</a>
  147.          </div>
  148.          <!-- 直播课导航 -->
  149.          <div class="zhibo">
  150.             <div class="top">
  151.                 <span>直播课</span>
  152.                 <span>更多></span>
  153.             </div>
  154.             <div class="kemu">
  155.                 <div>
  156.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  157.                     <a href="">第二十期：前端开发</a>
  158.                     <a href="" class="huif"><span>精彩回放</span>  <span>15154人感兴趣</span></a>
  159.                 </div>
  160.                 <div>
  161.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  162.                     <a href="">第二十期：前端开发</a>
  163.                     <a href="" class="huif"><span>精彩回放</span>  <span>15154人感兴趣</span></a>
  164.                 </div>
  165.                 <div>
  166.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  167.                     <a href="">第二十期：前端开发</a>
  168.                     <a href="" class="huif"><span>精彩回放</span>  <span>15154人感兴趣</span></a>
  169.                 </div>
  170.             </div>
  171.          </div>
  172.          <!-- 限时折扣 -->
  173.          <div class="zekou">
  174.             <div class="top">
  175.                 <span>限时折扣</span>
  176.                 <span>更多></span>
  177.             </div>
  178.             <div class="kemu">
  179.                 <div>
  180.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  181.                     <a href="">第二十期：前端开发</a>
  182.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  183.                     <a href="" class="xians"><span>限时折扣，仅剩两天</span> </a>
  184.                     <a href="">￥588 </a>
  185.                 </div>
  186.                 <div>
  187.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  188.                     <a href="">第二十期：前端开发</a>
  189.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  190.                     <a href="" class="xians"><span>限时折扣，仅剩两天</span> </a>
  191.                     <a href="">￥588 </a>
  192.                 </div>
  193.                 <div>
  194.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  195.                     <a href="">第二十期：前端开发</a>
  196.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  197.                     <a href="" class="xians"><span>限时折扣，仅剩两天</span> </a>
  198.                     <a href="">￥588 </a>
  199.                 </div>
  200.                 <div>
  201.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  202.                     <a href="">第二十期：前端开发</a>
  203.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  204.                     <a href="" class="xians"><span>限时折扣，仅剩两天</span> </a>
  205.                     <a href="">￥588 </a>
  206.                 </div>
  207.                 <div>
  208.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  209.                     <a href="">第二十期：前端开发</a>
  210.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  211.                     <a href="" class="xians"><span>限时折扣，仅剩两天</span> </a>
  212.                     <a href="">￥588 </a>
  213.                 </div>
  214.             </div>
  215.          </div>
  216.          <!-- 最新课程 -->
  217.          <div class="zuixn">
  218.             <div class="top">
  219.                 <span>限时折扣</span>
  220.                 <span>更多></span>
  221.             </div>
  222.             <div class="kemu">
  223.                 <div>
  224.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  225.                     <a href="">第二十期：前端开发</a>
  226.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  227.                 </div>
  228.                 <div>
  229.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  230.                     <a href="">第二十期：前端开发</a>
  231.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  232.                 </div>
  233.                 <div>
  234.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  235.                     <a href="">第二十期：前端开发</a>
  236.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  237.                 </div>
  238.                 <div>
  239.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  240.                     <a href="">第二十期：前端开发</a>
  241.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  242.                 </div>
  243.                 <div>
  244.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  245.                     <a href="">第二十期：前端开发</a>
  246.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  247.                 </div>
  248.                 <div>
  249.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  250.                     <a href="">第二十期：前端开发</a>
  251.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  252.                 </div>
  253.                 <div>
  254.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  255.                     <a href="">第二十期：前端开发</a>
  256.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  257.                 </div>
  258.                 <div>
  259.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  260.                     <a href="">第二十期：前端开发</a>
  261.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  262.                 </div>
  263.                 <div>
  264.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  265.                     <a href="">第二十期：前端开发</a>
  266.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  267.                 </div>
  268.                 <div>
  269.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  270.                     <a href="">第二十期：前端开发</a>
  271.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  272.                 </div>
  275.             </div>
  276.          </div>
  277.          <!-- 热门推荐 -->
  278.          <div class="remen">
  279.             <div class="top">
  280.                 <span>热门推荐</span>
  281.                 <span>更多></span>
  282.             </div>
  283.             <div class="kemu">
  284.                 <div>
  285.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  286.                     <a href="">第二十期：前端开发</a>
  287.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  288.                 </div>
  289.                 <div>
  290.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  291.                     <a href="">第二十期：前端开发</a>
  292.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  293.                 </div>
  294.                 <div>
  295.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  296.                     <a href="">第二十期：前端开发</a>
  297.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  298.                 </div>
  299.                 <div>
  300.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  301.                     <a href="">第二十期：前端开发</a>
  302.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  303.                 </div>
  304.                 <div>
  305.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  306.                     <a href="">第二十期：前端开发</a>
  307.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  308.                 </div>
  309.                 <div>
  310.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  311.                     <a href="">第二十期：前端开发</a>
  312.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  313.                 </div>
  314.                 <div>
  315.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  316.                     <a href="">第二十期：前端开发</a>
  317.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  318.                 </div>
  319.                 <div>
  320.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  321.                     <a href="">第二十期：前端开发</a>
  322.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  323.                 </div>
  324.                 <div>
  325.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  326.                     <a href="">第二十期：前端开发</a>
  327.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  328.                 </div>
  329.                 <div>
  330.                     <a href=""><img src="images\kmzyt.png" alt="" ></a>
  331.                     <a href="">第二十期：前端开发</a>
  332.                     <a href="" class="huif"><span>154人感兴趣</span>  <span>收藏</span></a>
  333.                 </div>
  336.             </div>
  337.          </div>
  338.          <!-- 词典分类 -->
  339.          <div class="daci">
  340.             <div class="cidian">
  341.                 <a href="" class="head">词典分类</a>
  342.                 <a href="">大前端</a>
  343.                 <a href="">后端开发</a>
  344.                 <a href="">数据库</a>
  345.                 <a href="">移动端</a>
  346.                 <a href="">运维开发</a>
  347.                 <a href="">UI设计</a>
  348.                 <a href="">计算机基础</a>
  349.              </div>
  350.              <div class="sousu">
  351.                 <div class="sousu1">
  352.                     <span>词典查询</span><span>全部词典</span><span>最近更新</span>
  353.                 </div>
  354.                 <div class="sousu2">编程词典</div>
  355.                 <div class="sousu3">服务马龙在线技术手册</div>
  356.                 <div class="chaxun">
  358.                 </div>
  359.              </div>
  360.          </div>
  363.     </main>
  364. </body>
  365. </html>

CSS样式

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     /* 取消下划线 */
  5.     text-decoration: none;
  6.     /* 所有字体为黑色 */
  7.     color: #000;
  9. }
  10. /* 取消小圆点 */
  11. li{
  12.     list-style: none;
  13. }
  14. body {
  15.     background-color: #f3f5f7;
  16. }
  17. main{
  18.     width: 1200px;
  19.     margin: 0 auto;
  20. }
  21. body .top {
  22.     width: 100vw;
  23.     height: 40px;
  24.     background-color: #343434;
  25.     color: #aaa;
  26. }
  27. header .top .content {
  28.     width: 1200px;
  30.     display: grid;
  31.     grid-template-columns: 400px 100px;
  32.     place-content: space-between;
  33.     /* 向左居中 */
  34.     place-items: center start;
  35.     /* 外边距自动计算居中 */
  36.     margin: auto;
  37. }
  38. header .top .content .iconfont {
  39.     color: aliceblue;
  40.     font-size: larger;
  41. }
  42. header .top .content img {
  43.     /* 圆角 */
  44.     border-radius: 50%;
  45. }
  46. header .top .content .right {
  47.     display: grid;
  48.     grid-template-columns: repeat(2, 1fr);
  49.     place-items: center;
  50. }
  52. /* 导航部分 */
  53. body .navs {
  54.     width: 100vw;
  55.     height: 90px;
  56.     background-color: #ffffff;
  57.     color: #aaa;
  58. }
  59. header .navs .text {
  60.     width: 1200px;
  62.     display: grid;
  63.     grid-template-columns: 140px 1fr 100px;
  64.     margin:auto;
  65.     /* 居中 */
  66.     place-items: center;
  68. }
  69. header .navs .text img {
  70.     width: 140px;
  71. }
  72. header .navs .text nav {
  73.     display: flex;
  74. }
  75. header .navs .text nav a{
  76.     padding: 0 15px;  
  77. }
  78. header .navs .text nav a:hover{
  79.     color: blue;
  80. }
  81. header .navs .text .search input[type="search"]{
  82.     width: 200px;
  83.     height: 38px;
  84.     border: none;
  85.     background-color: #eee;
  86.     /* 圆角 */
  87.     border-radius: 20px;
  88. }
  89. main .navs  {
  90.     width: 1200px;
  91.     display: grid;
  92.     grid-template-columns: 200px 750px 200px;
  93.     margin: 50px auto;
  94.     /* 项目边距 */
  95.     gap: 25px ;
  96.     background-color: #f3f5f7;
  97.     grid-auto-flow: row;
  99. }
  100. main .navs .left {
  101.     background-color: #ffffff;
  102.     border-radius: 25px 25px;
  103.     display: flex;
  104.     flex-flow: column nowrap;
  105.     place-content: space-evenly;
  106.     place-items: center;
  107. }
  108. main .navs .slider img {
  109.     width: 750px;
  110.     height: 400px;
  111.     border-radius: 25px 25px;
  112. }
  113. main .navs .lefts {
  114.     height: 400px;
  115.     background-color: #ffffff;
  116.     border-radius: 25px 25px;
  117.     display: flex;
  118.     flex-flow: column nowrap;
  119.     place-content: space-around;
  120.     place-items: center;
  122. }
  124. main .navs .lefts .my img {
  125.     width: 50px;
  126.     border-radius: 50% 50% ;
  127. }
  128. main .navs .lefts .mys{
  129.     height: 250px;
  130.     display: flex;
  131.     flex-flow: column nowrap;
  132.     place-content: space-around;
  133.     place-items: center;
  134. }
  135. main .navs .lefts .my{
  136. display: grid;
  137. grid-auto-flow: column;
  138. }
  139. main .navs .lefts .my .mmy{
  140.     display: grid;
  141.     margin: 5px;
  142.     /* 项目居中 */
  143.     place-items: center;
  144. }
  145. main .navs .lefts .sloo{
  146.     background-color: red;
  147.     width: 120px;
  148.     height: 30px;
  149.     color:#fff;
  150.     border-radius: 15px;
  151.     text-align: center;
  153. }
  154. /* --------------课程导航--------------- */
  155. main .xuexi{
  156.     width: 1200px;
  157.     height: 90px;
  158.     margin: auto;
  159.     /* 上边距 */
  160.     padding: 300px 0 0 0;
  161.     display: grid;
  162.     grid-template-columns: 975px 200px;
  163.     gap: 25px;
  164.     height: 80px;}
  165. main .xuexi img {
  166.     width: 40px;
  167. }
  168. main .xuexi div{
  169.     background-color: #fff;
  170.     border-radius: 25px 25px;
  171. }
  172. main .xuexi div .kemu {
  173.     display: flex;
  174.     place-items: center;
  175.     flex-flow: row nowrap;
  176.     place-content: space-evenly;
  177.     padding: 15px 0 0 0;
  178. }
  180. main .xuexi div .kemu li {
  181.  display: grid;
  182.  grid-template-rows: repeat(2 , 1fr);
  183.  grid-template-columns: repeat(2 , 1fr);
  184.  place-items: center;
  185.  padding: 6px;
  186. }
  187. /* span里面的字体颜色 大小 */
  188. main .xuexi div .kemu li span{
  189.     color: #999;
  190.     font-size: 12px;
  191. }
  192. /* 图片跨栏 */
  193. main .xuexi div .kemu li img {
  194.     grid-row: 1 / span 2;
  195. }
  196. /* 选中li标签中的第一个 */
  197. main .xuexi div .kemu li:first-of-type {
  198.      display: flex;
  199.      flex-flow: column;
  200.    }
  201. /* -----------侧边导航---------------- */
  202. main .cebian {
  203.     display: flex;
  204.     flex-flow: column;
  205.     position: fixed;
  206.     top: 300px;
  207.     right: 0;
  208.     background-color: #fff;
  209.     place-items: center;
  210.     border-radius: 15px 15px;
  211. }
  212. main .cebian a:hover{
  213.     color: red;
  214. }
  215. main .cebian a{
  216.     margin: 10px 15px;
  217.     font-size: 12px;
  218. }
  219. /* -------------直播课区域----------- */
  221. main .zhibo .top {
  222.     background-color: #f3f5f7;
  223.     margin:50px 0 0 0 ;
  224.     font-size: larger;
  225.     display: grid;
  226.     grid-template-columns: 100px 100px;
  227.     gap: 1000px;
  228. }
  229. main .zhibo .kemu{
  230.     display: grid;
  231.     grid-template-columns: repeat(4,1fr);
  232.     gap: 25px;
  233. }
  234. main .zhibo .kemu div {
  235.  width: 300px;
  236.  height: 280px;
  237.  background-color: #fff;
  238.  border-radius: 25px 25px;
  239.  display: grid;
  240.  grid-template-rows: repeat(3 , 1fr);
  241.  place-items:center;
  242. }
  243. /* 图片圆角 */
  244. main .zhibo .kemu img {
  245.     width: 100%;
  246.     border-radius: 25px 25px 0px 0px ;
  247. }
  248. main .zhibo .kemu div .huif{
  249.     display: grid;
  250.     grid-template-columns: repeat(2,1fr);
  251.     gap: 100px;
  252.     font-size: 12px;
  253. }
  254. main .zhibo .kemu div .huif span{
  255.     color: #aaa;
  256. }
  257. /* --------------限时折扣---------- */
  259. main .zekou .top {
  260.     background-color: #f3f5f7;
  261.     margin:50px 0 0 0 ;
  262.     font-size: larger;
  263.     display: grid;
  264.     grid-template-columns:100px 100px;
  265.     gap: 1000px;
  266. }
  267. main .zekou .kemu{
  268.     display: grid;
  269.     grid-template-columns: repeat(5,1fr);
  270.     gap: 25px;
  271. }
  272. main .zekou .kemu div {
  273.  width: 220px;
  274.  height: 250px;
  275.  background-color: #fff;
  276.  border-radius: 10px 10px;
  277.  display: grid;
  278.  grid-template-rows: repeat(5 , 1fr);
  279.  place-items:center;
  280. }
  281. /* 图片圆角 */
  282. main .zekou .kemu img {
  283.     width: 100%;
  284.     border-radius: 10px 10px 0px 0px ;
  285. }
  286. main .zekou .kemu div .huif{
  287.     display: grid;
  288.     grid-template-columns: repeat(2,1fr);
  289.     gap: 100px;
  290.     font-size: 12px;
  291. }
  292. main .zekou .kemu div .huif span{
  293.     color: #aaa;
  294. }
  295. main .zekou .kemu div .xians span{
  296.     color:red;
  298. }
  299. /* ----------最新课程---------- */
  300. main .zuixn .top {
  301.     background-color: #f3f5f7;
  302.     margin:50px 0 0 0 ;
  303.     font-size: larger;
  304.     display: grid;
  305.     grid-template-columns:100px 100px;
  306.     gap: 1000px;
  307. }
  308. main .zuixn .kemu{
  309.     display: grid;
  310.     grid-template-columns: repeat(5,1fr);
  311.     gap: 25px;
  312. }
  313. main .zuixn .kemu div {
  314.  width: 220px;
  315.  height: 250px;
  316.  background-color: #fff;
  317.  border-radius: 10px 10px;
  318.  display: grid;
  319.  grid-template-rows: repeat(3 , 1fr);
  320.  place-items:center;
  321. }
  322. /* 图片圆角 */
  323. main .zuixn .kemu img {
  324.     width: 100%;
  325.     border-radius: 10px 10px 0px 0px ;
  326. }
  327. main .zuixn .kemu div .huif{
  328.     display: grid;
  329.     grid-template-columns: repeat(2,1fr);
  330.     gap: 100px;
  331.     font-size: 12px;
  332. }
  333. main .zuixn .kemu div .huif span{
  334.     color: #aaa;
  335. }
  336. main .zuixn .kemu div .xians span{
  337.     color:red;
  339. }
  340. /* -----------热门推荐---------- */
  341. main .remen .top {
  342.     background-color: #f3f5f7;
  343.     margin:50px 0 0 0 ;
  344.     font-size: larger;
  345.     display: grid;
  346.     grid-template-columns:100px 100px;
  347.     gap: 1000px;
  348. }
  349. main .remen .kemu{
  350.     display: grid;
  351.     grid-template-columns: repeat(5,1fr);
  352.     gap: 25px;
  353. }
  354. main .remen .kemu div {
  355.  width: 220px;
  356.  height: 250px;
  357.  background-color: #fff;
  358.  border-radius: 10px 10px;
  359.  display: grid;
  360.  grid-template-rows: repeat(3 , 1fr);
  361.  place-items:center;
  362. }
  363. /* 图片圆角 */
  364. main .remen .kemu img {
  365.     width: 100%;
  366.     border-radius: 10px 10px 0px 0px ;
  367. }
  368. main .remen .kemu div .huif{
  369.     display: grid;
  370.     grid-template-columns: repeat(2,1fr);
  371.     gap: 100px;
  372.     font-size: 12px;
  373. }
  374. main .remen .kemu div .huif span{
  375.     color: #aaa;
  376. }
  377. /* ----------词典分类----------- */
  378. main .daci{
  379.     display: grid;
  380.     grid-template-columns: 220px 1fr;
  381.     gap: 10px;
  382.     margin: 25px 0 0 0;
  383. }
  384. main .cidian{
  385.     display: flex;
  386.     flex-flow: column ;
  387.     width: 220px;
  388.     background-color: #fff;
  389.     border-radius: 15px 15px;
  390.     place-content: space-around;
  391. }
  392. main .cidian a{
  393.     margin: 10px 30px;
  394.     font-size: 12px;
  395. }
  396. main .daci .sousu{
  397.     display: grid;
  398.     grid-template-rows:50px 30px 20px 1fr;
  399.     background-color: #fff;
  400.     padding: 15px;
  401. }
  402. main .daci .sousu .sousu1 {
  403.     display: grid;
  404.     grid-template-columns: 100px 100px 100px;
  405. }
  406. main .daci .sousu .sousu2,
  407. main .daci .sousu .sousu3{
  408.     display: flex;
  409.     place-content: center;
  410. }
  411. main .daci .sousu .sousu3{
  412.     font-size: 12px;
  413.     color: #aaa;
  414. }

运行效果

上一条：0719 js函数下一条：变量常量的使用方法/合法标识符/作用域/常用的三种函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多