热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。

使用圣杯布局模式实现网站首页的内容布局

运行代码:

html部分代码:

实例


    
    
        
        
            
                首页
                公司新闻
                最新产品
                关于我们
                联系我们
            
        


    

    
        
    

    
    
        
        
        
            

 | 商品展示区


            
                

  •                     
                            
                        

  •                     
    ******车里子

                        ¥:89.00
                        ¥:59.00
                        
                    
                    

  •                     
                            
                        

  •                     
    农家生态土鸡蛋

                        ¥:38.00
                        ¥:29.00
                        
                    
                    

  •                     
                            
                        
                        
    农夫山泉矿泉水

                        ¥:33.00
                        ¥:27.00
                        
                    

  •                 

  •                     
                            
                        
                        
    国酒茅台

                        ¥:26.00
                        ¥:20.00
                        
                    

  •                 

  •                     
                            
                        
                        
    黄色咸鸭蛋

                        ¥:39.00
                        ¥:29.00
                        
                    

  •                 

  •                     
                            
                        
                        
    新鲜草莓

                        ¥:48.00
                        ¥:38.00
                        
                    

  •             
            
            
            
                商品列表
                

                      
    • 苹果 

    •                 
    • 香蕉

    •                 

    •                 
    • 西瓜

    •                 
    • 菠萝

    •                 
    • 水蜜桃

    •                 
    • 火龙果

    •                 
    • 哈密瓜

    •                 
    • 荔枝

    •                 
    • 菠萝

    •             

            
            
            
                

    | 商品销量排行榜


                
                    
                        No1:国酒茅台
                    
                    
                        No2:******车里子
                    
                    
                        No3:新鲜草莓
                    
                    
                        4:黄色咸鸭蛋
                    
                    
                        5:农家生态土鸡蛋
                    
                    
                        6:黄色咸鸭蛋
                    
                    
                        7:苹果
                    
                    
                        8:香蕉
                    
                    
                        9:水蜜桃
                    
                    
                        10:菠萝
                    
                
            
        
        
        
            
            
                


                    © 家乐福超市版本所有   |  
                    0551-666***999   |  
                    皖ICP备19***666
                


            
        

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    CSS代码部分:

    实例

        


    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    总结: 没想到做一个页面居然这么难,突然觉得自己什么都不会了,参照别人的代码算是勉强完成了. 我对整个布局到细节如何实现缺少思路,代码量臃肿.希望在后续的学习中提升自己.


    推荐阅读
    • 本文分享了作者在使用LaTeX过程中的几点心得,涵盖了从文档编辑、代码高亮、图形绘制到3D模型展示等多个方面的内容。适合希望深入了解LaTeX高级功能的用户。 ... [详细]
    • 本文介绍了使用Python和C语言编写程序来计算一个给定数值的平方根的方法。通过迭代算法,我们能够精确地得到所需的结果。 ... [详细]
    • C/C++ 应用程序的安装与卸载解决方案
      本文介绍了如何使用Inno Setup来创建C/C++应用程序的安装程序,包括自动检测并安装所需的运行库,确保应用能够顺利安装和卸载。 ... [详细]
    • 本报告记录了嵌入式软件设计课程中的第二次实验,主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作,加深了对嵌入式系统硬件接口编程的理解。 ... [详细]
    • 本文基于Java官方文档进行了适当修改,旨在介绍如何实现一个能够同时处理多个客户端请求的服务端程序。在前文中,我们探讨了单客户端访问的服务端实现,而本篇将深入讲解多客户端环境下的服务端设计与实现。 ... [详细]
    • Canopy环境安装与使用指南
      《利用Python进行数据分析》一书推荐使用EPDFree版本的环境,然而随着技术的发展,目前更多人倾向于使用Canopy。本文将详细介绍Canopy的安装及使用方法。 ... [详细]
    • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
    • JavaScript 中引号的多层嵌套使用技巧
      本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
    • 本文详细介绍如何在SSM(Spring + Spring MVC + MyBatis)框架中实现分页功能。包括分页的基本概念、数据准备、前端分页栏的设计与实现、后端分页逻辑的编写以及最终的测试步骤。 ... [详细]
    • 本文详细介绍了如何通过简单的JavaScript代码,在网页中实现禁用鼠标右键的功能,以保护网页内容不被轻易复制。 ... [详细]
    • Go语言实现文件读取与终端输出
      本文介绍如何使用Go语言编写程序,通过命令行参数指定文件路径,读取文件内容并将其输出到控制台。代码示例中包含了错误处理和资源管理的最佳实践。 ... [详细]
    • 本文详细介绍了 Node.js 中 OS 模块的 arch 方法,包括其功能、语法、参数以及返回值,并提供了具体的使用示例。 ... [详细]
    • 深入解析Unity3D游戏开发中的音频播放技术
      在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
    • ArcBlock 发布 ABT 节点 1.0.31 版本更新
      2020年11月9日,ArcBlock 区块链基础平台发布了 ABT 节点开发平台的1.0.31版本更新,此次更新带来了多项功能增强与性能优化。 ... [详细]
    • 视觉Transformer综述
      本文综述了视觉Transformer在计算机视觉领域的应用,从原始Transformer出发,详细介绍了其在图像分类、目标检测和图像分割等任务中的最新进展。文章不仅涵盖了基础的Transformer架构,还深入探讨了各类增强版Transformer模型的设计思路和技术细节。 ... [详细]
    author-avatar
    安份丶小娚人
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有