微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > grid整站布局
博主信息
博文 64
粉丝 6
评论 2
访问量 102125
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
grid整站布局
王娇
原创
1159人浏览过

学习总结

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

批改状态：合格

老师批语：html的代码, 还有css部分, 绝大部分是直接照搬了课件源码, 如果已经理解了, 这样做没问题,如果还不能完全理解, 还是建议试着自己写写
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录