Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid整站布局
Blogger Information
Blog 64
fans 6
comment 2
visits 82998
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
grid整站布局
王娇
Original
871 people have browsed it

学习总结

  • 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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：html的代码, 还有css部分, 绝大部分是直接照搬了课件源码, 如果已经理解了, 这样做没问题,如果还不能完全理解, 还是建议试着自己写写
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post