热门标签 | 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代码部分:

    实例

        


    运行实例 »

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


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


    推荐阅读
    • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
    • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
    • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
    • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
    • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
    • PHP 编程疑难解析与知识点汇总
      本文详细解答了 PHP 编程中的常见问题,并提供了丰富的代码示例和解决方案,帮助开发者更好地理解和应用 PHP 知识。 ... [详细]
    • 深入理解OAuth认证机制
      本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
    • 优化ASM字节码操作:简化类转换与移除冗余指令
      本文探讨如何利用ASM框架进行字节码操作,以优化现有类的转换过程,简化复杂的转换逻辑,并移除不必要的加0操作。通过这些技术手段,可以显著提升代码性能和可维护性。 ... [详细]
    • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
    • 技术分享:从动态网站提取站点密钥的解决方案
      本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
    • 深入理解 SQL 视图、存储过程与事务
      本文详细介绍了SQL中的视图、存储过程和事务的概念及应用。视图为用户提供了一种灵活的数据查询方式,存储过程则封装了复杂的SQL逻辑,而事务确保了数据库操作的完整性和一致性。 ... [详细]
    • c# – UWP:BrightnessOverride StartOverride逻辑 ... [详细]
    • 数据库内核开发入门 | 搭建研发环境的初步指南
      本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
    • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
    • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
    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社区 版权所有