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

    实例

        


    运行实例 »

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


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


    推荐阅读
    • android listview OnItemClickListener失效原因
      最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
    • 如何自行分析定位SAP BSP错误
      The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]
    • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
    • CSS3选择器的使用方法详解,提高Web开发效率和精准度
      本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
    • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
    • 《数据结构》学习笔记3——串匹配算法性能评估
      本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
    • Python瓦片图下载、合并、绘图、标记的代码示例
      本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
    • 猜字母游戏
      猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
    • 本文介绍了一道网络流题目hdu4888 Redraw Beautiful Drawings的解题思路。题目要求以行和列作为结点建图,并通过最大流算法判断是否有解以及是否唯一。文章详细介绍了建图和算法的过程,并强调在dfs过程中要进行回溯。 ... [详细]
    • 欢乐的票圈重构之旅——RecyclerView的头尾布局增加
      项目重构的Git地址:https:github.comrazerdpFriendCircletreemain-dev项目同步更新的文集:http:www.jianshu.comno ... [详细]
    • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
    • 带添加按钮的GridView,item的删除事件
      先上图片效果;gridView无数据时显示添加按钮,有数据时,第一格显示添加按钮,后面显示数据:布局文件:addr_manage.xml<?xmlve ... [详细]
    • 本文整理了Java中java.lang.NoSuchMethodError.getMessage()方法的一些代码示例,展示了NoSuchMethodErr ... [详细]
    • 面试中2次被问到过这个知识点,实际开发中,应用事件委托也比较常见。JS中事件委托的实现主要依赖于事件冒泡。那什么是事件冒泡?就是事件从最深 ... [详细]
    • 使用HTML创建弹出框以便用户输入信息
      在做项目的过程中,我们时常需要进行一些弹框操作,比如在后台管理时需要进行的一些增删改操作,这个时候我们需要使用到弹框,或者在 ... [详细]
    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社区 版权所有