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

    实例

        


    运行实例 »

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


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


    推荐阅读
    • 反向投影技术主要用于在大型输入图像中定位特定的小型模板图像。通过直方图对比,它能够识别出最匹配的区域或点,从而确定模板图像在输入图像中的位置。 ... [详细]
    • 本问题探讨了在特定条件下排列儿童队伍的方法数量。题目要求计算满足条件的队伍排列总数,并使用递推算法和大数处理技术来解决这一问题。 ... [详细]
    • 本文介绍了多个适用于用户界面设计的Canvas框架,帮助开发者选择最适合的工具。 ... [详细]
    • #点球小游戏fromrandomimportchoiceimporttimescore[0,0]direction[left,center,right]defkick() ... [详细]
    • PHP 过滤器详解
      本文深入探讨了 PHP 中的过滤器机制,包括常见的 $_SERVER 变量、filter_has_var() 函数、filter_id() 函数、filter_input() 函数及其数组形式、filter_list() 函数以及 filter_var() 和其数组形式。同时,详细介绍了各种过滤器的用途和用法。 ... [详细]
    • 本题探讨了在一个有向图中,如何根据特定规则将城市划分为若干个区域,使得每个区域内的城市之间能够相互到达,并且划分的区域数量最少。题目提供了时间限制和内存限制,要求在给定的城市和道路信息下,计算出最少需要划分的区域数量。 ... [详细]
    • 算法题解析:最短无序连续子数组
      本题探讨如何通过单调栈的方法,找到一个数组中最短的需要排序的连续子数组。通过正向和反向遍历,分别使用单调递增栈和单调递减栈来确定边界索引,从而定位出最小的无序子数组。 ... [详细]
    • 本文探讨了使用C#在SQL Server和Access数据库中批量插入多条数据的性能差异。通过具体代码示例,详细分析了两种数据库的执行效率,并提供了优化建议。 ... [详细]
    • 本文深入探讨了HTTP请求和响应对象的使用,详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外,还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]
    • C语言基础入门:7个经典小程序助你快速掌握编程技巧
      本文精选了7个经典的C语言小程序,旨在帮助初学者快速掌握编程基础。通过这些程序的实践,你将更深入地理解C语言的核心概念和语法结构。 ... [详细]
    • 本文详细介绍如何利用已搭建的LAMP(Linux、Apache、MySQL、PHP)环境,快速创建一个基于WordPress的内容管理系统(CMS)。WordPress是一款流行的开源博客平台,适用于个人或小型团队使用。 ... [详细]
    • 本文探讨了在使用Selenium进行自动化测试时,由于webdriver对象实例化位置不同而导致浏览器闪退的问题,并提供了详细的代码示例和解决方案。 ... [详细]
    • 本文探讨了如何在iOS开发环境中,特别是在Xcode 6.1中,设置和应用自定义文本样式。我们将详细介绍实现方法,并提供一些实用的技巧。 ... [详细]
    • 本文介绍如何在 C++ 中使用链表结构存储和管理数据。通过具体示例,展示了静态链表的基本操作,包括节点的创建、链接及遍历。 ... [详细]
    • 解决Anaconda安装TensorFlow时遇到的TensorBoard版本问题
      本文介绍了在使用Anaconda安装TensorFlow时遇到的“Could not find a version that satisfies the requirement tensorboard”错误,并提供详细的解决方案,包括创建虚拟环境和配置PyCharm项目。 ... [详细]
    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社区 版权所有