search

博客列表 >grid整站布局

grid整站布局

王娇
王娇原创
2020年04月28日 16:15:40870浏览

学习总结

  • grid主要适用于布局大框架，而细节处理还是需要grid和flex配合进行
  • 使用grid可以简化html和css文件中的代码量
  • 下面代码还可以优化，二手交易在是用flex布局，可以用grid布局

    1.仿整站首页

  • 演示链接 仿老师的整站首页
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="../static/font/iconfont.css" />
  7.     <link rel="stylesheet" href="index.css" />
  8.     <title>全站首页</title>
  9.   </head>
  10.   <body>
  11.     <!-- 全站页眉 -->
  12.     <div class="public_header">
  13.       <a href="">网站首页</a>
  14.       <a href="">专题</a>
  15.       <a href="">网站导航</a>
  16.       <a href="">二手商品</a>
  17.       <a href="">讨论区</a>
  18.       <span>
  19.         <a href=""><label class="iconfont icon-huiyuan2"></label>登陆</a>
  20.         <a href="">免费注册</a>
  21.       </span>
  22.     </div>
  24.     <!-- 首页快速进入按钮、轮播图、搜索框 -->
  25.     <div class="index_header">
  26.       <div class="logo_search">
  27.         <!-- logo图标 -->
  28.         <div>
  29.           <a href=""><img src="../static/images/logo.png" alt="" /></a>
  30.         </div>
  31.         <!-- 搜索框 -->
  32.         <div>
  33.           <input type="search" name="search" id="search" />
  34.           <label for="search" class="iconfont icon-sousuo1"></label>
  35.         </div>
  36.         <!-- 字体图标 点赞 评论 下载 会员等 -->
  37.         <div>
  38.           <span class="iconfont icon-huiyuan1"></span>
  39.           <span class="iconfont icon-danmu1"></span>
  40.           <span class="iconfont icon-fabu"></span>
  41.           <span class="iconfont con-fangda"></span>
  42.           <span class="iconfont icon-huiyuan2"></span>
  43.           <span class="iconfont icon-dianzan"></span>
  44.         </div>
  45.       </div>
  46.       <div class="nav">
  47.         <div class="detail">
  48.           <div>
  49.             <span class="iconfont icon-gongdan"></span>
  50.           </div>
  51.           <div>
  52.             <p>资讯</p>
  53.             <p>学习</p>
  54.           </div>
  55.           <div>
  56.             <a href="">器材</a>
  57.             <a href="">大师</a>
  58.             <a href="">实战</a>
  59.             <a href="">大赛</a>
  60.             <a href="">其它</a>
  61.             <a href="">器材</a>
  62.             <a href="">器材</a>
  63.             <a href="">器材</a>
  64.           </div>
  65.         </div>
  66.         <div class="detail">
  67.           <div>
  68.             <span class="iconfont icon-renwujincheng"></span>
  69.           </div>
  70.           <div>
  71.             <p>资讯</p>
  72.             <p>学习</p>
  73.           </div>
  74.           <div>
  75.             <a href="">器材</a>
  76.             <a href="">大师</a>
  77.             <a href="">实战</a>
  78.             <a href="">大赛</a>
  79.             <a href="">其它</a>
  80.             <a href="">器材</a>
  81.             <a href="">器材</a>
  82.             <a href="">器材</a>
  83.           </div>
  84.         </div>
  85.         <div class="detail">
  86.           <div>
  87.             <span class="iconfont icon-gongdan"></span>
  88.           </div>
  89.           <div>
  90.             <p>资讯</p>
  91.             <p>学习</p>
  92.           </div>
  93.           <div>
  94.             <a href="">器材</a>
  95.             <a href="">大师</a>
  96.             <a href="">实战</a>
  97.             <a href="">大赛</a>
  98.             <a href="">其它</a>
  99.             <a href="">器材</a>
  100.             <a href="">器材</a>
  101.             <a href="">器材</a>
  102.           </div>
  103.         </div>
  104.         <div class="detail">
  105.           <div>
  106.             <span class="iconfont icon-DOC"></span>
  107.           </div>
  108.           <div>
  109.             <p>资讯</p>
  110.             <p>学习</p>
  111.           </div>
  112.           <div>
  113.             <a href="">器材</a>
  114.             <a href="">大师</a>
  115.             <a href="">实战</a>
  116.             <a href="">大赛</a>
  117.             <a href="">其它</a>
  118.             <a href="">器材</a>
  119.             <a href="">器材</a>
  120.             <a href="">器材</a>
  121.           </div>
  122.         </div>
  123.       </div>
  124.       <div class="lunbo">
  125.         <div>
  126.           <a href=""><img src="../static/images/4.jpg" alt="" /></a>
  127.         </div>
  128.         <div>
  129.           <a href=""><img src="../static/images/banner-right.jpg" alt="" /></a>
  130.         </div>
  131.       </div>
  132.     </div>
  133.     <!-- 新闻资讯 -->
  134.     <div class="indexTitle">
  135.       <h1>新闻资讯</h1>
  136.     </div>
  137.     <div class="indexArticle">
  138.       <!-- 新闻大图 -->
  139.       <div>
  140.         <a href=""><img src="../static/images/news.jpg" alt="" /></a>
  141.       </div>
  142.       <!-- 两个促销商品小图 -->
  143.       <div>
  144.         <div>
  145.           <a href=""><img src="../static/images/n-2.jpg" alt="" /></a>
  146.           <a href="">三星note10发布搭载挖孔前摄</a>
  147.         </div>
  148.         <div>
  149.           <a href=""><img src="../static/images/n-3.jpg" alt="" /></a>
  150.           <a href="">小米公布1亿像素手机信息</a>
  151.         </div>
  152.       </div>
  153.       <!-- 新闻链接 -->
  154.       <div>
  155.         <p>大隐于市的摄影师,薇薇安·迈尔！</p>
  156.         <div>
  157.           <span>[新闻]</span>
  158.           <a href="">佳能 EOS RP 12899元起</a>
  159.         </div>
  160.         <div>
  161.           <span>[新闻]</span>
  162.           <a href="">定焦,变焦, 新人小白如何选择?这三款值得买</a>
  163.         </div>
  164.         <div>
  165.           <span>[新闻]</span>
  166.           <a href="">新一代入门神器？ 佳能EOS 850D将到来</a>
  167.         </div>
  168.         <div>
  169.           <span>[新闻]</span>
  170.           <a href="">无低通次旗舰 D7500套机6899元</a>
  171.         </div>
  172.       </div>
  173.       <div>
  174.         <div>
  175.           <span>[新闻]</span>
  176.           <a href="">佳能注册相机无线充电和眼控对焦专利</a>
  177.         </div>
  178.         <div>
  179.           <span>[新闻]</span>
  180.           <a href="">复古全幅单反 尼康Df套机14500元</a>
  181.         </div>
  182.         <div>
  183.           <span>[新闻]</span>
  184.           <a href="">索尼α7R IV超广套装售42698元</a>
  185.         </div>
  186.         <div>
  187.           <span>[新闻]</span>
  188.           <a href="">RF大三元长焦 RF70-200mm售17699</a>
  189.         </div>
  190.         <div>
  191.           <span>[新闻]</span>
  192.           <a href="">有所保留 佳能EOS-1D X III再曝新功能</a>
  193.         </div>
  194.       </div>
  195.       <!-- 促销链接 -->
  196.       <div>
  197.         <p>元旦，春节双节联动，备货啦！</p>
  198.         <div>
  199.           <span>[促销]</span>
  200.           <a href="">佳能 EOS RP 12899元起</a>
  201.         </div>
  202.         <div>
  203.           <span>[促销]</span>
  204.           <a href="">定焦,变焦, 新人小白如何选择?这三款值得买</a>
  205.         </div>
  206.         <div>
  207.           <span>[促销]</span>
  208.           <a href="">新一代入门神器？ 佳能EOS 850D将到来</a>
  209.         </div>
  210.         <div>
  211.           <span>[促销]</span>
  212.           <a href="">无低通次旗舰 D7500套机6899元</a>
  213.         </div>
  214.       </div>
  215.       <div>
  216.         <div>
  217.           <span>[促销]</span>
  218.           <a href="">佳能注册相机无线充电和眼控对焦专利</a>
  219.         </div>
  220.         <div>
  221.           <span>[促销]</span>
  222.           <a href="">复古全幅单反 尼康Df套机14500元</a>
  223.         </div>
  224.         <div>
  225.           <span>[促销]</span>
  226.           <a href="">索尼α7R IV超广套装售42698元</a>
  227.         </div>
  228.         <div>
  229.           <span>[促销]</span>
  230.           <a href="">RF大三元长焦 RF70-200mm售17699</a>
  231.         </div>
  232.         <div>
  233.           <span>[促销]</span>
  234.           <a href="">有所保留 佳能EOS-1D X III再曝新功能</a>
  235.         </div>
  236.       </div>
  237.     </div>
  238.     <!-- 图片专区 -->
  239.     <div class="indexTitle">
  240.       <h1>图片专区</h1>
  241.     </div>
  242.     <div class="indexPicture">
  243.       <div class="picture">
  244.         <div>
  245.           <a href="">美女</a>
  246.           <span>纵观摄影艺术</span>
  247.         </div>
  248.         <div>
  249.           <div>
  250.             <a href=""><img src="../static/images/img1.jpg" alt="" /></a>
  251.             <a href="">阴沉夏日的柔美身姿 复古少女的藕荷色心情</a>
  252.           </div>
  253.           <div>
  254.             <a href=""><img src="../static/images/img2.jpg" alt="" /></a>
  255.             <a href="">愿你生活的都是每一天都是快快乐乐的, 一定要</a>
  256.           </div>
  257.           <div>
  258.             <a href=""><img src="../static/images/img3.jpg" alt="" /></a>
  259.             <a href="">今夜我不关心人类,我只想你,从爱上你的那天起</a>
  260.           </div>
  261.           <div>
  262.             <a href=""><img src="../static/images/img4.jpg" alt="" /></a>
  263.             <a href="">我转头,看见你走来,在阳光里,于是笑容从我心里溢出</a>
  264.           </div>
  265.         </div>
  266.       </div>
  267.       <div class="picture">
  268.         <div>
  269.           <a href="">健康</a>
  270.           <span>纵观摄影艺术</span>
  271.         </div>
  272.         <div>
  273.           <div>
  274.             <a href=""><img src="../static/images/img1.jpg" alt="" /></a>
  275.             <a href="">阴沉夏日的柔美身姿 复古少女的藕荷色心情</a>
  276.           </div>
  277.           <div>
  278.             <a href=""><img src="../static/images/img3.jpg" alt="" /></a>
  279.             <a href="">愿你生活的都是每一天都是快快乐乐的, 一定要</a>
  280.           </div>
  281.           <div>
  282.             <a href=""><img src="../static/images/img4.jpg" alt="" /></a>
  283.             <a href="">今夜我不关心人类,我只想你,从爱上你的那天起</a>
  284.           </div>
  285.           <div>
  286.             <a href=""><img src="../static/images/img5.jpg" alt="" /></a>
  287.             <a href="">我转头,看见你走来,在阳光里,于是笑容从我心里溢出</a>
  288.           </div>
  289.         </div>
  290.       </div>
  291.       <div class="picture">
  292.         <div>
  293.           <a href="">青春</a>
  294.           <span>纵观摄影艺术</span>
  295.         </div>
  296.         <div>
  297.           <div>
  298.             <a href=""><img src="../static/images/img5.jpg" alt="" /></a>
  299.             <a href="">阴沉夏日的柔美身姿 复古少女的藕荷色心情</a>
  300.           </div>
  301.           <div>
  302.             <a href=""><img src="../static/images/img3.jpg" alt="" /></a>
  303.             <a href="">愿你生活的都是每一天都是快快乐乐的, 一定要</a>
  304.           </div>
  305.           <div>
  306.             <a href=""><img src="../static/images/img2.jpg" alt="" /></a>
  307.             <a href="">今夜我不关心人类,我只想你,从爱上你的那天起</a>
  308.           </div>
  309.           <div>
  310.             <a href=""><img src="../static/images/img1.jpg" alt="" /></a>
  311.             <a href="">我转头,看见你走来,在阳光里,于是笑容从我心里溢出</a>
  312.           </div>
  313.         </div>
  314.       </div>
  315.     </div>
  316.     <!-- 二手交易 -->
  317.     <div class="indexTitle">
  318.       <h1>二手交易</h1>
  319.     </div>
  320.     <div class="indexShop">
  321.       <div>
  322.         <a href="">抢好货</a>
  323.         <span>0低价, 便捷,安全,快速</span>
  324.       </div>
  325.       <div>
  326.         <span>热门分类</span>
  327.         <a href="">美女写真</a>
  328.         <a href="">日本美女</a>
  329.         <a href="">美国美女</a>
  330.         <a href="">国内美女</a>
  331.         <a href="">AV美女</a>
  332.       </div>
  333.       <div>
  334.         <div class="commList">
  335.           <div>
  336.             <div>
  337.               <a href=""
  338.                 ><img src="../static/images/shop/shop1.jpg" alt=""
  339.               /></a>
  340.             </div>
  341.             <a href="">美女写真墙上装饰贴画快感艺术海报</a>
  342.             <div>
  343.               <span>￥345</span>
  344.               <span>美女</span>
  345.             </div>
  346.           </div>
  347.           <div>
  348.             <div>
  349.               <a href=""
  350.                 ><img src="../static/images/shop/shop2.jpg" alt=""
  351.               /></a>
  352.             </div>
  353.             <a href="">美女写真墙上装饰贴画快感艺术海报</a>
  354.             <div>
  355.               <span>￥345</span>
  356.               <span>素颜</span>
  357.             </div>
  358.           </div>
  359.           <div>
  360.             <div>
  361.               <a href=""
  362.                 ><img src="../static/images/shop/shop3.jpg" alt=""
  363.               /></a>
  364.             </div>
  365.             <a href="">美女写真墙上装饰贴画快感艺术海报</a>
  366.             <div>
  367.               <span>￥345</span>
  368.               <span>大学生</span>
  369.             </div>
  370.           </div>
  371.           <div>
  372.             <div>
  373.               <a href=""
  374.                 ><img src="../static/images/shop/shop4.jpg" alt=""
  375.               /></a>
  376.             </div>
  377.             <a href="">美女写真墙上装饰贴画快感艺术海报</a>
  378.             <div>
  379.               <span>￥345</span>
  380.               <span>美女</span>
  381.             </div>
  382.           </div>
  383.           <div>
  384.             <div>
  385.               <a href=""
  386.                 ><img src="../static/images/shop/shop5.jpg" alt=""
  387.               /></a>
  388.             </div>
  389.             <a href="">美女写真墙上装饰贴画快感艺术海报</a>
  390.             <div>
  391.               <span>￥345</span>
  392.               <span>美女</span>
  393.             </div>
  394.           </div>
  395.           <div>
  396.             <div>
  397.               <a href=""
  398.                 ><img src="../static/images/shop/shop6.jpg" alt=""
  399.               /></a>
  400.             </div>
  401.             <a href="">美女写真墙上装饰贴画快感艺术海报</a>
  402.             <div>
  403.               <span>￥345</span>
  404.               <span>美女</span>
  405.             </div>
  406.           </div>
  407.           <div>
  408.             <div>
  409.               <a href=""
  410.                 ><img src="../static/images/shop/shop7.jpg" alt=""
  411.               /></a>
  412.             </div>
  413.             <a href="">美女写真墙上装饰贴画快感艺术海报</a>
  414.             <div>
  415.               <span>￥345</span>
  416.               <span>美女</span>
  417.             </div>
  418.           </div>
  419.           <div>
  420.             <div>
  421.               <a href=""
  422.                 ><img src="../static/images/shop/shop8.jpg" alt=""
  423.               /></a>
  424.             </div>
  425.             <a href="">美女写真墙上装饰贴画快感艺术海报</a>
  426.             <div>
  427.               <span>￥345</span>
  428.               <span>美女</span>
  429.             </div>
  430.           </div>
  431.         </div>
  432.         <div class="commClass">
  433.           <a href=""><img src="../static/images/ad/1.png" alt="" /></a>
  434.           <a href=""><img src="../static/images/ad/2.png" alt="" /></a>
  435.           <a href=""><img src="../static/images/ad/3.png" alt="" /></a>
  436.           <a href=""><img src="../static/images/ad/4.png" alt="" /></a>
  437.           <a href=""><img src="../static/images/ad/image.png" alt="" /></a>
  438.           <a href=""><img src="../static/images/ad/ad2.jpg" alt="" /></a>
  439.         </div>
  440.       </div>
  441.     </div>
  442.     <!-- 合作单位 -->
  443.     <div class="indexTitle">
  444.       <h1>合作单位</h1>
  445.     </div>
  446.     <div class="work_link">
  447.       <div>
  448.         <a href="">html合作单位</a>
  449.       </div>
  450.       <div>
  451.         <a href="">python合作单位</a>
  452.       </div>
  453.       <div>
  454.         <a href="">css合作单位</a>
  455.       </div>
  456.       <div>
  457.         <a href="">php合作单位</a>
  458.       </div>
  459.       <div>
  460.         <a href="">javascript合作单位</a>
  461.       </div>
  462.       <div>
  463.         <a href="">javascript合作单位</a>
  464.       </div>
  465.       <div>
  466.         <a href="">javascript合作单位</a>
  467.       </div>
  468.       <div>
  469.         <a href="">javascript合作单位</a>
  470.       </div>
  471.       <div>
  472.         <a href="">javascript合作单位</a>
  473.       </div>
  474.       <div>
  475.         <a href="">javascript合作单位</a>
  476.       </div>
  477.       <div>
  478.         <a href="">javascript合作单位</a>
  479.       </div>
  480.       <div>
  481.         <a href="">javascript合作单位</a>
  482.       </div>
  483.     </div>
  484.     <!-- 全站页脚 -->
  485.     <div class="public_footer">
  486.       <div class="footer_nav">
  487.         <a href="">首页</a>
  488.         <a href="">联系我们</a>
  489.         <a href="">招聘信息</a>
  490.         <a href="">友情链接</a>
  491.         <a href="">用户服务协议</a>
  492.         <a href="">隐私权声明</a>
  493.         <a href="">法律投诉声明</a>
  494.       </div>
  495.       <div class="footer_logo">
  496.         <img src="../static/images/logo.png" alt="" />
  497.       </div>
  498.       <div class="footer_info">
  499.         <p>
  500.           2019 fengniao.com. All rights
  501.           reserved.安徽闹着玩有限公司（无聊网）版权所有
  502.         </p>
  503.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  504.         <p>
  505.           违法和不良信息举报电话:
  506.           <a href="tel:0551-1234567">0551-1234567</a> 举报邮箱:
  507.           <a href="mailto:admin@baidu.com">admin@baidu.com</a>
  508.         </p>
  509.       </div>
  510.       <div class="footer_ewm">
  511.         <p>关注公众号</p>
  512.         <img src="../static/images/erwei-code.png" alt="" />
  513.       </div>
  514.     </div>
  515.   </body>
  516. </html>
  • css示例代码
  1. /* 引入全站公共清除样式 */
  2. @import "../static/css/reset.css";
  3. /* 引入全站头部导航 */
  4. @import "../components/public/publicHander/publicHander.css";
  5. /* 引入全站首页导航、搜索框、轮播图、快速进入按钮 */
  6. @import "../components/index/indexHeader/indexHeader.css";
  7. /* 引入首页大标题样式 */
  8. @import "../components/index/indexTitle/indexTitle.css";
  9. /* 引入首页新闻资讯模块样式 */
  10. @import "../components/article/index_article.css";
  11. /* 引入首页图片库模块样式 */
  12. @import "../components/picture/index_picture.css";
  13. /* 引入首页二手交易模块样式 */
  14. @import "../components/shop/index_shop.css";
  15. /* 引入首页合作单位模块样式 */
  16. @import "../components/index/indexLink/indexLink.css";
  17. /* 引入全站尾部导航 */
  18. @import "../components/public/publicFooter/publicFooter.css";
  20. /* 引入全站公共清除样式   reset.css*/
  21. * {
  22.   margin: 0;
  23.   padding: 0;
  24.   box-sizing: border-box;
  25.   font-size: 15px;
  26. }
  27. a {
  28.   text-decoration: none;
  29.   color: #555;
  30. }
  31. a:hover {
  32.   color: red;
  33. }
  34. li {
  35.   list-style-type: none;
  36. }
  37. /* 全站头部导航 publicHander.css*/
  38. /* 导入样式重置文件 */
  39. @import "../public_reset.css";
  41. /* 全站页眉样式 */
  42. .public_header {
  43.   /* 导航定义为弹性布局 */
  44.   display: flex;
  45.   flex-flow: row nowrap;
  46.   align-items: center;
  47.   /* 基本样式 */
  48.   background-color: lightgreen;
  49.   height: 45px;
  50.   padding: 0px 20px;
  51. }
  53. /* 基本导航左对齐 */
  54. .public_header a {
  55.   color: black;
  56.   padding: 13px 15px;
  57. }
  58. .public_header a:hover {
  59.   color: white;
  60.   background-color: blanchedalmond;
  61. }
  62. /* 登录和注册右对齐 */
  63. .public_header > span {
  64.   margin-left: auto;
  65. }
  66. .public_header > span > a:hover {
  67.   background-color: lightgreen;
  68. }
  70. /* 定义登录字体图标样式 */
  71. .public_header > span > a > label {
  72.   font-size: 18px;
  73.   padding: 0px 15px;
  74. }
  76. /* 全站页脚 publicFooter.css*/
  77. @import "../public_reset.css";
  79. /* 公共页脚样式，按网格显示 */
  80. .public_footer {
  81.   /* 基本样式 */
  82.   height: 260px;
  83.   background-color: lightgreen;
  84.   /* 页脚样式定义为网格布局 */
  85.   display: grid;
  86.   grid-template-columns: 150px 580px 400px; /*定义一个3列2行的网格*/
  87.   grid-template-rows: 70px 140px;
  88.   /* 通过网格区域名称来填充网格 */
  89.   grid-template-areas:
  90.     "footer_nav footer_nav footer_ewm"
  91.     "footer_logo footer_info footer_ewm";
  93.   /* 风格内容横向和纵向都居中对齐 */
  94.   align-content: center;
  95.   justify-content: center;
  96. }
  98. /* 页脚导航样式 */
  99. .footer_nav {
  100.   grid-area: footer_nav; /*设置导航内容的区域化名称*/
  101. }
  102. .footer_nav > a {
  103.   padding: 0px 15px;
  104.   color: black;
  105. }
  106. .footer_nav > a:hover {
  107.   color: white;
  108. }
  110. /* 网站logo样式 */
  111. .footer_logo {
  112.   width: 160px;
  113.   height: 76px;
  114.   grid-area: footer_logo; /*设置logo区域化名称*/
  115. }
  116. /* 网站logo的图片大小自适应 */
  117. .footer_logo > img {
  118.   max-width: 100%;
  119.   max-height: 100%;
  120. }
  122. /* 网站备案内容样式 */
  123. .footer_info {
  124.   grid-area: footer_info; /*设置网站备案内容区域化名称*/
  125.   line-height: 40px;
  126.   padding-left: 20px;
  127. }
  129. /* 二维码样式 */
  130. .footer_ewm {
  131.   grid-area: footer_ewm; /*设置二维码区域化名称*/
  132.   padding-left: 30px;
  133.   border-left: 2px solid black;
  134.   /* 设置二维码图标为弹性布局，主轴方向为列，不换行 */
  135.   display: flex;
  136.   flex-flow: column nowrap;
  137. }
  139. .footer_ewm > p {
  140.   text-align: center;
  141.   width: 100px;
  142. }
  143. /* 设置二维码图片的宽度和高度 */
  144. .footer_ewm > img {
  145.   width: 110px;
  146.   height: 110px;
  147.   margin-top: 10px;
  148. }
  150. /* 首页导航，轮播图 搜索框 indexHeader.css*/
  151. @import "../../public/public_reset.css";
  153. .index_header {
  154.   background-color: white;
  155.   display: flex;
  156.   flex-flow: column nowrap;
  157.   padding: 30px 30px;
  158. }
  160. /* 全站首页logo\搜索框\快速定位按钮 */
  161. .index_header > .logo_search {
  162.   display: flex;
  163.   /* flex-flow: row nowrap; */
  164.   align-items: center;
  165. }
  166. .index_header > .logo_search > div:nth-of-type(2) {
  167.   /* 搜索框右对齐 */
  168.   margin-left: auto;
  169.   padding: 0px 30px;
  170.   display: flex;
  171.   /* flex-flow: row nowrap; */
  172.   align-items: center;
  173.   width: 300px;
  174. }
  175. /* 搜索框输入框 */
  176. .index_header > .logo_search input {
  177.   width: 300px;
  178.   align-self: end;
  179.   height: 40px;
  180.   border: 2px solid #ccc;
  181.   border-radius: 10px;
  182. }
  183. /* 放大镜图标 */
  184. .index_header > .logo_search label {
  185.   font-size: 2rem;
  186. }
  187. /* 字体图标 点赞 评论 下载 会员等 */
  188. .index_header > .logo_search span {
  189.   font-size: 2rem;
  190.   padding: 0px 5px;
  191. }
  192. .index_header > .logo_search span:hover {
  193.   color: red;
  194. }
  196. /* 全站首页导航 */
  197. .index_header > .nav {
  198.   margin: 20px 0px;
  199.   /* 整体布局为弹性布局 */
  200.   display: flex;
  201.   /* flex-flow: row nowrap; */
  202.   justify-content: space-between;
  203.   align-items: center;
  204. }
  206. /* 首页导航中每一个小的导航块 */
  207. .index_header > .nav > .detail {
  208.   width: 300px;
  209.   height: 50px;
  210.   display: flex;
  211.   /* flex-flow: row nowrap; */
  212.   justify-content: space-evenly;
  213.   align-items: center;
  214. }
  215. /* 导航块前面的字体图标 */
  216. .index_header > .nav > .detail > div:first-of-type > span {
  217.   font-size: 3rem;
  218.   color: red;
  219. }
  220. /* 字体图标后的分类导航提示 */
  221. .index_header > .nav > .detail > div:nth-of-type(2) > p {
  222.   color: #555;
  223. }
  224. /* 分类导航中的每一个小的导航链接 */
  225. .index_header > .nav > .detail > div:last-of-type {
  226.   width: 170px;
  227.   display: flex;
  228.   border-left: 2px solid #ccc;
  229.   /* 弹性布局主轴方向为横向换行，上面规定了宽度 */
  230.   flex-flow: row wrap;
  231.   justify-content: space-evenly;
  232.   align-items: center;
  233. }
  234. .index_header > .nav > .detail > div:last-of-type > a {
  235.   padding: 0px 5px;
  236. }
  238. /* 全站首页轮播图 */
  239. .index_header > .lunbo {
  240.   margin-top: 10px;
  241.   display: flex;
  242.   /* flex-flow: row nowrap; */
  243.   justify-content: space-evenly;
  244.   align-items: center;
  245. }
  246. .index_header > .lunbo > div {
  247.   height: 338px;
  248. }
  249. .index_header > .lunbo > div img {
  250.   width: 100%;
  251.   height: 100%;
  252. }
  254. /* 首页合作合作单位模块样式 indexLink.css*/
  255. @import "../../public/public_reset.css";
  256. /* 合作单位样式 */
  257. .work_link {
  258.   /* 基本样式 */
  259.   margin-top: 20px;
  260.   background-color: white;
  261.   max-height: 130px;
  262.   padding: 15px 30px;
  263.   /* 整体采用网格布局，单元格自动填充 */
  264.   display: grid;
  265.   grid-template-columns: repeat(auto-fill, 150px);
  266.   grid-template-rows: repeat(auto-fill, 40px);
  267.   justify-content: space-evenly;
  268.   align-content: space-evenly;
  269. }
  270. /* 每个合作单位的链接被包在一个div中 */
  271. .work_link > div {
  272.   font-size: 1.5rem;
  273.   /* 设置为弹性布局，为了设置其中链接的对齐方式 */
  274.   display: flex;
  275.   justify-content: center;
  276.   align-items: center;
  277. }
  278. .work_link > div a {
  279.   color: grey;
  280. }
  281. .work_link > div a:hover {
  282.   color: red;
  283. }
  285. /* 首页大标题样式 indexTitle.css*/
  286. /* 首页大标题样式 */
  287. .indexTitle {
  288.   width: 140px;
  289.   height: 45px;
  290.   /* 大标题下方有一条红色的下划线 */
  291.   border-bottom: 4px solid red;
  292.   margin-top: 20px;
  293.   /* 居中显示 */
  294.   margin-left: auto;
  295.   margin-right: auto;
  296. }
  297. .indexTitle > h1 {
  298.   font-size: xx-large;
  299.   text-align: center;
  300.   color: #555;
  301.   letter-spacing: 3px;
  302. }
  304. /* 首页新闻资讯模块样式 index_article.css*/
  305. @import "../../static/css/reset.css";
  306. @import "../public/public_reset.css";
  307. .indexArticle {
  308.   /* 基本样式 */
  309.   margin: 20px auto;
  310.   width: 1255px;
  311.   height: 445px;
  312.   background-color: white;
  313.   border-radius: 10px;
  314.   /* 新闻资讯中的内容按栅格化布局 */
  315.   display: grid;
  316.   /* 定义一个2行3列的表格 */
  317.   grid-template-columns: 421px 350px 350px;
  318.   grid-template-rows: 210px 210px;
  319.   /* 栅格的填充方式为列优先填充 */
  320.   grid-auto-flow: column;
  321.   justify-content: space-evenly;
  322.   align-content: center;
  323. }
  324. .indexArticle:hover {
  325.   /* 给整个新闻资讯模块添加一个鼠标悬浮效果 */
  326.   box-shadow: 0px 0px 10px #555;
  327. }
  328. .indexArticle a {
  329.   font-size: 0.9rem;
  330.   color: #555;
  331. }
  332. .indexArticle a:hover {
  333.   color: red;
  334. }
  335. /* 新闻资讯中大图的对齐方式为居中对齐 */
  336. .indexArticle > div:first-of-type {
  337.   /* justify-self: center;
  338.   align-self: center; */
  339.   /* 设置该项目在网格中为居中对齐 */
  340.   place-self: center;
  341. }
  342. /* 新闻资讯中两个小图的布局 */
  343. .indexArticle > div:nth-of-type(2) {
  344.   /* 两个小图布局为弹性布局 */
  345.   display: flex;
  346.   flex-flow: row nowrap;
  347. }
  348. .indexArticle > div:nth-of-type(2) > div {
  349.   width: 200px;
  350.   height: 135px;
  351. }
  352. /* 两个小图的大小充满整个div */
  353. .indexArticle > div:nth-of-type(2) > div img {
  354.   width: 100%;
  355.   height: 100%;
  356. }
  358. /* 新闻资讯中新闻和促销的链接样式 */
  359. .indexArticle > div:nth-last-of-type(-n + 4) {
  360.   align-self: center;
  361. }
  362. .indexArticle > div:nth-last-of-type(-n + 4) div {
  363.   padding: 5px 10px;
  364. }
  365. .indexArticle > div:nth-last-of-type(-n + 4) p {
  366.   font-size: 1.5rem;
  367.   color: red;
  368. }
  369. .indexArticle > div:nth-last-of-type(-n + 4) span {
  370.   color: gray;
  371. }
  373. /* 首页图片专区模块样式 index_picture.css*/
  374. @import "../../static/css/reset.css";
  375. @import "../public/public_reset.css";
  377. /* 整个图片模块的样式 */
  378. .indexPicture {
  379.   width: 1255px;
  380.   margin: 20px auto;
  381.   /* 整体设置为弹性布局，横向不换行 */
  382.   display: flex;
  383.   flex-flow: row nowrap;
  384.   justify-content: space-evenly;
  385. }
  386. /* 图片模块中3个小模块的样式 */
  387. .indexPicture > .picture {
  388.   /* 基本样式 */
  389.   width: 410px;
  390.   height: 495px;
  391.   margin: 20px;
  392.   background-color: white;
  393.   border-radius: 10px;
  394.   /* 每一个小模块中的布局方式为弹性布局，列为主轴 */
  395.   display: flex;
  396.   flex-flow: column nowrap;
  397.   align-items: center;
  398. }
  399. /*3个图片小模块的鼠标悬浮样式 */
  400. .indexPicture > .picture:hover {
  401.   box-shadow: 0px 0px 10px #555;
  402. }
  403. /* 每个图片小模块的头部标题样式 */
  404. .indexPicture > .picture > div:first-of-type {
  405.   height: 70px;
  406.   width: 380px;
  407.   padding: 20px;
  408.   border-bottom: 2px solid #ccc;
  409. }
  410. /* 图片模块头部大标题的样式 */
  411. .indexPicture > .picture > div:first-of-type > a {
  412.   font-size: 1.7rem;
  413.   color: #555;
  414. }
  415. .indexPicture > .picture > div:first-of-type > a:hover {
  416.   color: red;
  417. }
  418. /* 图片模块头部大标题详情样式 */
  419. .indexPicture > .picture > div:first-of-type > span {
  420.   padding-left: 30px;
  421.   color: red;
  422. }
  424. /* 4个小图+链接的样式 */
  425. .indexPicture > .picture > div:last-of-type {
  426.   margin-top: 20px;
  427.   /* 设置为2行2列的网格布局 */
  428.   display: grid;
  429.   grid-template-rows: repeat(2, 185px);
  430.   grid-template-columns: repeat(2, 195px);
  431.   /* 填充方式为按行的方向填充 */
  432.   grid-auto-flow: row;
  433.   place-content: space-evenly;
  434.   place-items: center;
  435. }
  436. .indexPicture > .picture > div:last-of-type > div {
  437.   margin: 10px;
  438. }
  439. .indexPicture > .picture > div:last-of-type > div > a > img {
  440.   /* 图片大小固定 */
  441.   width: 100%;
  442.   height: 100%;
  443. }
  445. /* 首页二手交易模块样式 index_shop.css*/
  446. @import "../public/public_reset.css";
  448. @import "../../static/css/reset.css";
  449. /* 设置所有的span标签为红色字体 */
  450. span {
  451.   color: red;
  452. }
  454. /* 二手交易模块样式 */
  455. .indexShop {
  456.   /* 基本样式 */
  457.   width: 1255px;
  458.   height: 595px;
  459.   margin: 20px auto;
  460.   padding: 10px;
  461.   background-color: white;
  462.   border-radius: 10px;
  463.   /* 弹性布局，列为主轴 */
  464.   display: flex;
  465.   flex-flow: column nowrap;
  466. }
  467. /* 二手交易模块的鼠标悬浮效果 */
  468. .indexShop:hover {
  469.   box-shadow: 0px 0px 10px #555;
  470. }
  472. .indexShop > div {
  473.   margin: 10px 0px;
  474. }
  476. /* 二手交易模块内大标题样式 */
  477. .indexShop > div:first-of-type > a {
  478.   font-size: 1.8rem;
  479.   margin-right: 20px;
  480. }
  482. /* 二手交易分类导航样式 */
  483. .indexShop > div:nth-of-type(2) {
  484.   border-top: 1px solid #ccc;
  485. }
  487. .indexShop > div:nth-of-type(2) > span {
  488.   font-size: 1.6rem;
  489. }
  490. .indexShop > div:nth-of-type(2) > a {
  491.   margin: 0px 10px;
  492. }
  494. /* 二手交易模块中物品列表和分类图片样式 */
  495. .indexShop > div:last-of-type {
  496.   /* 弹性布局，行为主轴 */
  497.   display: flex;
  498.   flex-flow: row nowrap;
  499.   height: 450px;
  500. }
  502. /* 二手交易物品列表样式 */
  503. .indexShop > div > .commList {
  504.   width: 805px;
  505.   /* 交易物品整体样式为弹性布局为弹布局，横向换行 */
  506.   display: flex;
  507.   flex-flow: row wrap;
  508. }
  510. /* 二手交易每个物品的样式 */
  511. .indexShop > div > .commList > div {
  512.   /* 基本样式 */
  513.   width: 186px;
  514.   height: 200px;
  515.   margin: 5px;
  516.   /* 弹性布局，竖排不换行 */
  517.   display: flex;
  518.   flex-flow: column nowrap;
  519.   justify-content: center;
  520. }
  521. /* 物品的图片和链接样式 */
  522. .indexShop > div > .commList > div > div:first-of-type {
  523.   width: 186px;
  524.   height: 130px;
  525.   border: 1px solid #ccc;
  526.   border-radius: 5px;
  527. }
  528. /* 物品的价格和分类样式 */
  529. .indexShop > div > .commList > div > div:last-of-type {
  530.   display: flex;
  531.   flex-flow: row nowrap;
  532.   justify-content: space-between;
  533. }
  534. /* 物品的分类样式 */
  535. .indexShop > div > .commList > div > div:last-of-type > span:last-of-type {
  536.   background-color: #55ce9f;
  537.   padding: 2px 3px;
  538.   border-radius: 3px;
  539.   color: white;
  540. }
  541. /* 物品的图片大小固定 */
  542. .indexShop > div > .commList img {
  543.   width: 100%;
  544.   height: 100%;
  545. }
  547. /* 二手交易右边分类图片样式 */
  548. .indexShop > div > .commClass {
  549.   width: 450px;
  550.   margin: auto;
  551.   display: flex;
  552.   flex-flow: row wrap;
  553. }
  554. .indexShop > div > .commClass > a > img {
  555.   margin: 5px;
  556. }

2.栅格布局12列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>栅格12列布局</title>
  7.     <link rel="stylesheet" href="css/style.css" />
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="row">
  12.         <div class="header col-12">header</div>
  13.       </div>
  14.       <div class="row">
  15.         <div class="aside-left col-2">aside-left</div>
  16.         <div class="main col-8">main</div>
  17.         <div class="aside-right col-2">aside-right</div>
  18.       </div>
  19.       <div class="row">
  20.         <div class="footer col-12">footer</div>
  21.       </div>
  22.     </div>
  23.   </body>
  24. </html>
  • css示例代码
  1. * {
  2.   padding: 0px;
  3.   margin: 0px;
  4.   box-sizing: border-box;
  5. }
  6. body {
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10.   max-width: 100vw;
  11.   min-height: 100vh;
  12. }
  13. .container {
  14.   min-width: 920px;
  15.   display: grid;
  16.   gap: 5px;
  17. }
  18. .container > .row {
  19.   display: grid;
  20.   grid-template-columns: repeat(12, 1fr);
  21.   gap: 5px;
  22. }
  23. .container > .row > .aside-left {
  24.   background-color: hotpink;
  25. }
  26. .container > .row > .aside-right {
  27.   background-color: indigo;
  28. }
  29. .container > .row > .main {
  30.   background-color: lawngreen;
  31. }
  32. .container > .row:first-of-type,
  33. .row:last-of-type {
  34.   min-height: 53px;
  35. }
  36. .container > .row:nth-of-type(2) {
  37.   min-height: 500px;
  38. }
  39. .container > .row > .header {
  40.   background-color: blue;
  41. }
  42. .container > .row > .footer {
  43.   background-color: green;
  44. }
  45. .col-1 {
  46.   grid-column-end: span 1;
  47. }
  48. .col-2 {
  49.   grid-column-end: span 2;
  50. }
  51. .col-3 {
  52.   grid-column-end: span 3;
  53. }
  54. .col-4 {
  55.   grid-column-end: span 4;
  56. }
  57. .col-5 {
  58.   grid-column-end: span 5;
  59. }
  60. .col-6 {
  61.   grid-column-end: span 6;
  62. }
  63. .col-7 {
  64.   grid-column-end: span 7;
  65. }
  66. .col-8 {
  67.   grid-column-end: span 8;
  68. }
  69. .col-9 {
  70.   grid-column-end: span 9;
  71. }
  72. .col-10 {
  73.   grid-column-end: span 10;
  74. }
  75. .col-11 {
  76.   grid-column-end: span 11;
  77. }
  78. .col-12 {
  79.   grid-column-end: span 12;
  80. }

3.电子相册

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="static/css/style.css" />
  7.     <title>电子相册</title>
  8.   </head>
  9.   <body>
  10.     <h1>我的明星相册</h1>
  11.     <div class="container">
  12.       <div class="item">
  13.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  14.         <a href="">明星相册</a>
  15.       </div>
  16.       <div class="item">
  17.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  18.         <a href="">明星相册</a>
  19.       </div>
  20.       <div class="item">
  21.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  22.         <a href="">明星相册</a>
  23.       </div>
  24.       <div class="item">
  25.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  26.         <a href="">明星相册</a>
  27.       </div>
  28.       <div class="item">
  29.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  30.         <a href="">明星相册</a>
  31.       </div>
  32.       <div class="item">
  33.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  34.         <a href="">明星相册</a>
  35.       </div>
  36.       <div class="item">
  37.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  38.         <a href="">明星相册</a>
  39.       </div>
  40.       <div class="item">
  41.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  42.         <a href="">明星相册</a>
  43.       </div>
  44.       <div class="item">
  45.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  46.         <a href="">明星相册</a>
  47.       </div>
  48.       <div class="item">
  49.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  50.         <a href="">明星相册</a>
  51.       </div>
  52.       <div class="item">
  53.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  54.         <a href="">明星相册</a>
  55.       </div>
  56.       <div class="item">
  57.         <a href=""><img src="static/images/photo.jpg" alt="" /></a>
  58.         <a href="">明星相册</a>
  59.       </div>
  60.     </div>
  61.   </body>
  62. </html>
  • css示例代码
  1. * {
  2.   padding: 0px;
  3.   margin: 0px;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: white;
  9. }
  10. a:hover {
  11.   color: coral;
  12. }
  13. h1 {
  14.   color: white;
  15.   text-align: center;
  16.   letter-spacing: 5px;
  17.   font-size: 2.5rem;
  18.   font-weight: 400;
  19.   text-shadow: 2px 2px 2px #555;
  20.   margin-top: 20px;
  21. }
  22. body {
  23.   display: flex;
  24.   flex-flow: column nowrap;
  25.   justify-content: center;
  26.   align-items: center;
  27.   background-color: lightseagreen;
  28. }
  29. .container {
  30.   min-width: 100vw;
  31.   min-height: 100vh;
  32.   padding: 50px;
  33.   display: grid;
  34.   grid-template-columns: repeat(auto-fill, 250px);
  35.   grid-template-rows: repeat(auto-fill, 280px);
  36.   justify-content: space-evenly;
  37.   align-content: space-evenly;
  39.   gap: 10px;
  40. }
  41. .container img {
  42.   width: 100%;
  43. }
  44. .container > .item {
  45.   padding: 30px;
  46.   background-color: lightskyblue;
  47.   display: flex;
  48.   flex-flow: column nowrap;
  49.   justify-content: center;
  50.   align-items: center;
  51.   border-radius: 10px;
  52. }
  53. .container > .item > a:first-of-type:hover {
  54.   box-shadow: 0 0 10px #555;
  55.   width: calc(100% * 1.02);
  56.   background-color: lightslategray;
  57. }
上一条：文件加载和对象基础学习心得下一条：php数组查询替换，排序，栈与队列，迭代
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多