热门标签 | 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的基本语法和功能。 ... [详细]
    • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
      学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
    • 导航栏样式练习:项目实例解析
      本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
    • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
    • 在前两篇文章中,我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象,分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor,即用于描述 Action 方法参数的对象,并详细介绍其工作原理。 ... [详细]
    • 本文深入探讨了 Java 中的 Serializable 接口,解释了其实现机制、用途及注意事项,帮助开发者更好地理解和使用序列化功能。 ... [详细]
    • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
    • 本文详细介绍了Java中org.w3c.dom.Text类的splitText()方法,通过多个代码示例展示了其实际应用。该方法用于将文本节点在指定位置拆分为两个节点,并保持在文档树中。 ... [详细]
    • 本文详细介绍了 com.facebook.drawee.view.SimpleDraweeView 中的 setScaleType 方法,提供了多个实际代码示例,并解释了其在不同场景下的应用。 ... [详细]
    • 本文详细探讨了JDBC(Java数据库连接)的内部机制,重点分析其作为服务提供者接口(SPI)框架的应用。通过类图和代码示例,展示了JDBC如何注册驱动程序、建立数据库连接以及执行SQL查询的过程。 ... [详细]
    • 本文介绍如何在现有网络中部署基于Linux系统的透明防火墙(网桥模式),以实现灵活的时间段控制、流量限制等功能。通过详细的步骤和配置说明,确保内部网络的安全性和稳定性。 ... [详细]
    • RecyclerView初步学习(一)
      RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
    • MySQL索引详解与优化
      本文深入探讨了MySQL中的索引机制,包括索引的基本概念、优势与劣势、分类及其实现原理,并详细介绍了索引的使用场景和优化技巧。通过具体示例,帮助读者更好地理解和应用索引以提升数据库性能。 ... [详细]
    • 使用GDI的一些AIP函数我们可以轻易的绘制出简 ... [详细]
    • dotnet 通过 Elmish.WPF 使用 F# 编写 WPF 应用
      本文来安利大家一个有趣而且强大的库,通过F#和C#混合编程编写WPF应用,可以在WPF中使用到F#强大的数据处理能力在GitHub上完全开源Elmis ... [详细]
    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社区 版权所有