`

Blueprint(蓝图) Css框架入门例子

阅读更多

自己简单用了一下蓝图,大体布局很方便

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Import fancy-type plugin for the sample page. -->
<link rel="stylesheet" href="plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
<style type="text/css">
.cgray {
	background-color:#CCC;
}
.cblue {
	background-color:#09F
}
.cred {
	background-color:#F39
}
</style>
</head>

<body>
<div class="container">
  <div class="span-24 cblue">
    <h6>span-24(这里是header)</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
  </div>
  <div class="span-7 cred">
    <h6>span-7(这里是导航)</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
  </div>
  <div class="span-17 cgray last">
    <h6>span-17(这里是正文)</h6>
    <p>他俩是一对新婚数月的小夫妻,恩爱非常。石比霜大八岁,从三年前认识起便对霜如珠似宝地宠爱着。由于两人不在一个城市,几经努力仍无法调动到一个城市。直到半年前,石才辞去了工作,只身到霜所在的城市。

  霜有一份报表必须在明天上交,但因为搞错了一个数据,使得总数一直对不上。不得不在晚上继续加班,到了10点半却还没找出问题出在哪,于是打了个电话向丈夫诉苦娇。于是石带了夜宵来陪她的妻子,并和她一起查对着文件中的数据。见丈夫走进办公室里,霜满肚的烦乱立刻烟消云散。石,一直是她的支柱,在外人看来,她是位很能干的女孩子,但在石前面,她永远是个小女人。看着丈夫的英俊的脸庞,心情就象窗外的星空一般,灿烂无比。石怜爱的摸着她的头发,命令着说:"乖,去吃东西。我来查。"于是霜乖乖的端着夜宵坐到石的对面,一边吃着一边满含柔情地盯着他,他的脸,他的一切,是她永远都看不厌的。她相信,只要丈夫出马,这世上便没什么办不到的事。果然,不到一刻钟,石便找出了那个错误,正微笑着想调侃他的妻子几句。而就在此时,这栋早在一年前便说要拆而勉强使用至今的办公楼,似乎在此时再也承受不起负荷,竟毫无征兆的轰然一声倒塌了。

  几秒钟之内,两人便被埋在了废墟之中。不知过了多久,当霜从昏迷中醒来时,眼前一片漆黑,一时竟不知身在何处。身上压着一条空心水泥板,但运气不错,这条水泥板的另一端却被另一条水泥板支撑着,只是压在她的身上令她无法动弹,却不会令她受伤。刚才的昏迷是因为有东西砸在了她的头上,另外腿部不知道是被什么砸到,骨头似乎断了,并好象在流血,但因为板压着,她摸不到自己的小腿。肩背处也有痛感,一摸也在流血。

 </p>
  </div>
  <div class="span-24 cblue">
    <h6>span-24(这里是footer)</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
  </div>
</div>
</body>
</html>
分享到:
评论

相关推荐

    使用Flask快速开发WEB应用.doc

    # Flask 微型框架入门详解 ## 1. Flask 框架介绍 Flask 是一个轻量级的 Web 开发框架,它以其简洁、灵活的特性受到许多开发者喜爱。作为一个微型框架,Flask 提供了核心功能,允许开发者根据需要添加其他扩展以...

    基于Simulink的底层模型构建与代码生成系统:DBC自动导入、硬件信号支持

    内容概要:本文深入探讨了Simulink If模块在嵌入式系统开发中的强大功能,特别是在汽车电子领域的应用。主要介绍了两种核心技术:一是DBC文件的自动导入生成模型及代码,二是硬件信号的导入生成模型及代码。DBC文件的自动导入能够快速构建CAN总线通信模型,简化信号解析和报文处理,生成的代码可以直接应用于AUTOSAR架构,实现ASW和BSW的无缝对接。硬件信号导入功能则允许开发者轻松地将硬件设备产生的信号集成到Simulink模型中,自动生成带有信号处理逻辑的代码,适用于实时数据采集和控制算法实现。此外,文中还详细展示了具体的MATLAB代码示例,解释了关键步骤和技术细节。 适合人群:从事嵌入式系统开发、汽车电子开发的工程师和技术人员,尤其是那些希望提高开发效率、减少手动配置工作的专业人士。 使用场景及目标:① 快速搭建基于DBC文件的CAN通信模型,自动生成符合AUTOSAR标准的代码;② 实现硬件信号的实时处理和控制,如数据采集、信号滤波等;③ 提升开发效率,缩短项目周期,降低错误率。 其他说明:文中提到的技术不仅限于汽车电子领域,也可广泛应用于工业自动化和其他需要复杂信号处理和实时控制的场合。

    交变磁场对含感应材料沥青路面温度的影响

    内容概要:本文探讨了交变磁场下含感应材料的沥青路面温度变化现象及其背后的物理原理。通过引入交变磁场与感应材料的相互作用,沥青路面能够产生感应电流并转化为热量,从而提高路面温度。文中详细介绍了这一过程的理论基础,如焦耳定律和涡流损耗,并提供了多个Python代码片段用于模拟和验证相关物理现象。此外,还讨论了该技术的实际应用场景,特别是在寒冷地区的冬季融雪除冰方面,以及对道路养护工作的积极影响。同时,文章提到了当前面临的技术挑战,如材料配比、施工难度和成本问题,并展望了未来的发展方向,包括智能化控制系统的应用。 适合人群:从事道路工程、物理学、材料科学及相关领域的研究人员和技术人员。 使用场景及目标:适用于希望了解新型道路工程技术的研发人员,旨在探索交变磁场与感应材料结合在沥青路面温度控制方面的潜力,推动技术创新和发展。 其他说明:文章不仅阐述了基本原理,还展示了具体的数学建模和编程实例,帮助读者深入理解该技术的具体实现方法。同时也指出了现有技术和未来发展的局限性和改进空间。

    模块化多电平(MMC)仿真:4电平MMC仿真模型

    内容概要:本文详细介绍了4电平模块化多电平变换器(MMC)的仿真模型建立过程。首先回顾了MMC的基本原理,即通过控制子模块(SM)的投入和切除来合成所需电压。接着分别展示了基于Python和Matlab两种环境下的具体实现方式,包括子模块类的设计、桥臂电压计算、仿真参数配置等。文中不仅提供了完整的代码示例,还分享了许多实用技巧,如避免上下管同时导通、正确处理电容电压平衡、优化载波移相角等。此外,作者强调了实际操作过程中可能遇到的问题及解决方案,例如电容电压纹波过大、IGBT损耗增加、输出电压频谱存在毛刺等。 适合人群:从事电力电子相关领域的研究人员和技术人员,尤其是对MMC感兴趣并希望深入了解其内部机制的人士。 使用场景及目标:帮助读者掌握4电平MMC的工作原理,学会利用Python或Matlab进行仿真建模,提高解决实际工程问题的能力。 其他说明:文章内容丰富详实,既有理论讲解也有实践经验分享,非常适合想要深入学习MMC技术的专业人士阅读。

    西门子PLC与发那科机器人协同工作:净水器碳芯检测案例

    内容概要:本文详细介绍了西门子S7-1200 PLC与发那科机器人、三菱伺服以及视觉系统的集成应用,用于净水器碳芯的检测。系统通过PLC进行四轴伺服控制,两台发那科机器人分别完成抓取和分拣任务,视觉系统负责精准定位。文中深入探讨了硬件布局、通讯协议、伺服控制逻辑、机器人程序、视觉处理算法等方面的细节和技术难点,如电机抖动、视觉补偿失效、通讯丢包等问题及其解决方案。最终,系统实现了4.5秒/件的检测节拍,误检率降至0.3%,展示了跨品牌设备高效协同工作的可能性。 适合人群:从事工业自动化领域的工程师、技术人员,尤其是对PLC编程、机器人控制、视觉系统集成感兴趣的读者。 使用场景及目标:适用于需要深入了解PLC与机器人协作、视觉系统集成的实际应用场景,旨在提高工业生产线的自动化水平和检测精度。 其他说明:文中不仅提供了具体的代码示例,还分享了许多调试经验和优化技巧,有助于读者更好地理解和掌握相关技术。

    自动泊车APA超声波算法开发技术详解

    内容概要:本文详细探讨了自动泊车辅助系统(APA)中超声波算法的作用及其面临的挑战。首先介绍了超声波传感器的基本工作原理,即通过发射和接收超声波来测量距离。接着阐述了超声波算法在自动泊车系统中的具体应用,如构建车辆周围的环境模型、路径规划以及应对复杂的停车场景。文中还讨论了多种优化算法和技术手段,比如动态阈值调整、概率栅格法、Hybrid A*算法等,旨在提高系统的鲁棒性和准确性。此外,针对实际环境中可能出现的问题,如天气条件对超声波的影响、多传感器数据融合困难等,提出了相应的解决方案,如天气补偿算法、温度补偿模块等。 适用人群:从事自动驾驶技术研发的工程师、研究人员,以及对智能交通感兴趣的科技爱好者。 使用场景及目标:适用于希望深入了解自动泊车系统内部机制的人群,帮助他们掌握超声波算法的设计思路和实现方式,从而更好地应用于实际产品开发中。 其他说明:文章不仅提供了理论知识,还包括大量实用的代码示例,有助于读者快速理解和实践。同时强调了工程实践中遇到的具体问题及解决办法,使读者能够全面认识这一领域的现状和发展趋势。

    基于小波变换的图像融合步骤详解:从分解到融合,生成融合图像的过程

    内容概要:本文详细介绍了基于小波变换的图像融合技术,涵盖了从理论到实践的具体步骤。首先解释了小波变换的基本原理,即将图像分解为不同频段的子图像,再通过特定的融合规则处理这些子图像,最后利用小波逆变换重建融合图像。文中提供了详细的Python代码示例,包括图像预处理、小波分解、融合规则应用以及最终的图像重建。此外,还讨论了该技术在医学图像融合、遥感图像融合等领域的广泛应用前景。 适合人群:对图像处理感兴趣的初学者和有一定编程基础的研发人员。 使用场景及目标:适用于需要将多个来源的图像信息整合为一张更具信息量的图像的场合,如医学影像诊断、遥感数据分析等。通过学习本文,读者可以掌握基于小波变换的图像融合技术的基本原理和实现方法。 其他说明:文中提到的技术不仅限于医学图像,还可以应用于其他类型的图像融合任务。同时,文中提供的代码片段可以直接运行,帮助读者快速理解和实践相关概念。

    锂离子电池的电化学阻抗谱

    锂离子电池的电化学阻抗谱 关于数据集 在SoC为100%、90%、80%、70%、60%、50%、40%、30%、20%和10%的四个全新三星圆柱形ICR18650-26J可充电锂离子电池上测量了电化学阻抗谱(EIS)。对每个电池重复测量六次。其他电池的测量值将在可用时添加到数据集中。 请注意,当前数据集中的测量值不包括在同一作者的先前(链接)数据集中。 计算所有EIS频谱,测量频率为[0.05、0.1、0.2、0.4、1、2、4、10、20、40、100、200、400、1000]Hz的阻抗。 阻抗值的格式为:Re{Z}+Im{Z}j ###阻抗。csv文件 MEASURE_ID:每个EIS测量的唯一识别码 SOC:电池的充电状态 BATTERY_ID:电池的唯一识别码 FREQUENCY_ID:频率ID。查找frequencies.csv文件以获取赫兹值 IMPEDANCE_VALUE:测量的复阻抗值,单位为欧姆,格式为:(Re{Z}+Im{Z}j) 6个测量值x 4个电池x 10个SOC x 14个频率=3360个阻抗值(行) ###频率。csv文件 FREQUENCY_ID:频率识别码 FREQUENCY_VALUE:频率值,单位为赫兹

    2025年成都大学专升本计算机基础知识点模板.doc

    2025年成都大学专升本计算机基础知识点模板.doc

    开关电源辐射骚扰测试.zip

    开关电源辐射骚扰测试.zip

    组态王仿真学习案例:石灰石断烧系统详解,实时历史曲线记录、报表分析与报警管理一网打尽,入门到进阶全功能展示

    内容概要:本文详细介绍了利用组态王进行石灰石煅烧系统的仿真开发,涵盖实时曲线绘制、报警系统配置、报表生成功能等多个方面。文章从实际案例出发,通过具体的代码片段和操作步骤,讲解了如何实现温度PID控制、设备联锁、能源统计等功能。同时,作者分享了许多实践经验,如解决曲线不刷新问题、优化报警逻辑、提高报表生成效率等,帮助读者快速掌握组态王的核心技术和应用场景。 适合人群:对工业自动化感兴趣的初学者以及希望深入了解组态王使用的工程师。 使用场景及目标:适用于需要构建工业控制系统仿真模型的学习者或开发者,旨在通过实例演练提升对组态王的理解和运用能力,最终能够独立完成类似项目的开发。 其他说明:文中提供了丰富的代码示例和技术细节,有助于读者更好地理解和实践。此外,还特别强调了一些常见的错误和注意事项,如控件命名规范、数据源绑定规则等,确保项目顺利实施。

    智慧社区与楼宇管理系统:集成智能照明、安防与设备运维的Web端及可视化大屏解决方案

    内容概要:本文详细介绍了智慧社区系统的多个关键技术模块及其代码实现,涵盖智能照明、楼控系统、安防系统以及运维管理等方面。首先探讨了智能照明系统的实现逻辑,通过人体移动传感器和环境光强度进行双重要素判断,确保照明系统的智能化运作。接着深入分析了楼控系统中的电梯调度算法,强调了动态负载均衡算法的应用,特别是在高峰时段的优化调度。对于安防系统,则着重于门禁系统和视频监控的联动,利用事件驱动机制实现异常情况的及时响应。最后讨论了可视化大屏的数据展示技术,采用ECharts等工具实现高效的数据可视化。此外,还提到了设备台账管理和运维管理中的定时任务脚本,展示了如何通过代码解决实际问题。 适用人群:适用于具有一定编程基础的研发人员和技术爱好者,特别是对物联网、智能家居等领域感兴趣的开发者。 使用场景及目标:帮助读者理解并掌握智慧社区各子系统的具体实现方法,能够应用于实际项目的开发中,提升系统的智能化水平和用户体验。 其他说明:文中不仅提供了具体的代码示例,还分享了许多实战经验和技巧,如MQTT协议用于设备通信、WebSocket用于状态同步、ECharts用于数据可视化等。同时指出了实际开发过程中可能会遇到的问题及解决方案,如设备状态同步、视频流处理性能优化等。 适合人群:具备一定编程基础,对物联网、智能家居等领域感兴趣的研发人员和技术爱好者。 使用场景及目标:①理解智慧社区各子系统的具体实现方法;②将相关技术应用到实际项目开发中,提高系统的智能化水平和用户体验。 阅读建议:本文不仅提供具体代码示例,还分享了大量实战经验与技巧,在学习过程中应重点关注这些实践经验,并结合自身项目情况进行实践探索。

    白光jbc245 T12 OLED焊台控制板全套开发资料,含C语言程序、STC芯片方案、原理图PDF及PCB设计,四合一体完整分享。

    内容概要:本文详细介绍了白光JBC245/T12/936-A1321/A1322 OLED焊台控制板的开发资料,涵盖硬件设计与软件实现两大部分。硬件方面,提供了详细的原理图、PCB设计文件以及关键元器件的选择和应用技巧,如运放A1321/A1322的应用、电源设计、温度传感器接口等。软件部分则包含了完整的C语言源代码,涉及PID温度控制算法、OLED显示驱动、菜单系统设计等。此外,文中还特别强调了PID参数调整方法、硬件SPI配置、状态机编程等实战经验和注意事项。 适合人群:电子爱好者、硬件开发工程师、嵌入式程序员。 使用场景及目标:适用于想要深入了解焊台控制板设计原理和技术细节的人群,帮助他们掌握从原理图设计到PCB制版,再到固件编程的全流程技能。无论是新手入门还是进阶提升,这套资料都能提供有价值的指导和支持。 其他说明:资料中不仅包含理论讲解,更有大量实际案例和代码示例,便于读者理解和实践。同时,针对一些常见的开发难题给出了具体的解决方案,如温度控制波动、OLED显示异常等问题。

    openai-1.59.8-py3-none-any.whl

    该资源为openai-1.59.8-py3-none-any.whl,欢迎下载使用哦!

    Labview OPC UA Toolkit/DSC/OPC 2016 SERVERS软件包:支持多种通讯设备与测试工具

    内容概要:本文详细介绍了LabVIEW OPC UA Toolkit及其配套的DSC模块在工业自动化领域的应用。主要内容涵盖如何利用这些工具包实现不同品牌PLC(如西门子、欧姆龙、三菱)之间的高效通信。文中提供了具体的代码示例和技术细节,帮助用户解决常见的配置问题,如节点命名空间、数据类型转换、字节序处理等。此外,还探讨了TestStand与LabVIEW的集成,用于自动化测试流程优化。 适合人群:从事工业自动化系统的开发人员、工程师以及相关技术人员。 使用场景及目标:适用于需要将不同品牌PLC设备进行互联互通的项目,旨在提高设备间的数据交换效率,减少配置复杂度,确保系统的稳定性和可靠性。 其他说明:文章强调了不同版本工具包的特点和适用范围,建议根据具体项目需求选择合适的版本。同时,提到了一些常见陷阱和解决方案,如防火墙规则配置、内存泄漏预防等。

    PCS储能逆变并网模型:包括逆变侧设计、DCDC控制、逆变算法及额外功能与技术支持

    内容概要:本文详细介绍了PCS储能逆变并网系统的实现细节和技术难点。系统采用背靠背三电平拓扑结构,结合SVPWM算法进行调制,有效降低了谐波含量。双闭环控制系统确保了稳定的电压和电流调节,特别是在应对电网电压骤变时表现出色。PQ控制通过正负序分离算法实现了高效的功率因数调节,并具备完善的孤岛检测机制。此外,文章还讨论了硬件设计中的关键问题,如IGBT驱动、散热管理和电磁兼容性设计。 适合人群:从事电力电子、储能系统和并网逆变器设计的研发工程师和技术人员。 使用场景及目标:适用于需要深入了解储能逆变并网系统的设计原理和实现方法的专业人士,帮助他们掌握三电平拓扑、SVPWM调制、双闭环控制以及PQ控制等核心技术,提高系统的稳定性和可靠性。 其他说明:文中提供了大量实际案例和调试经验,有助于解决实际工程中的常见问题。同时,附带的源码和硬件设计资料为项目实施提供了宝贵的参考资料。

    逆磁致伸缩效应:应变导致磁导率改变

    内容概要:本文详细介绍了逆磁致伸缩效应,即材料在机械应变作用下磁导率发生变化的现象。首先解释了逆磁致伸缩效应的基本概念和原理,指出材料内部磁畴结构在应变作用下重新排列,从而影响磁导率。接着通过Python代码模拟了应变与磁导率之间的线性和非线性关系,展示了应变对磁导率的具体影响。此外,文中还探讨了该效应在传感器领域的应用,如应力传感器的设计,并提供了硬件实现的代码示例,包括Arduino程序用于读取应变数据以及温度补偿算法。最后讨论了实际应用中面临的挑战,如温度漂移等问题。 适合人群:对电磁学感兴趣的科研人员、工程师及学生。 使用场景及目标:适用于希望深入了解逆磁致伸缩效应原理及其在传感器设计中应用的读者。目标是掌握应变与磁导率之间的关系,能够进行相关仿真和硬件实现。 其他说明:文中提供的代码和理论模型有助于理解和验证逆磁致伸缩效应的实际效果,同时强调了在实际应用中需要考虑的因素,如温度补偿等。

    “Socket通信框架-客户端部分”商业级物联网项目核心代码

    内容概要:本文介绍了一个来自商业物联网项目的C# Socket通信框架,该框架封装了Socket通信的核心功能,如断线重连、心跳包监测、粘包处理等。通过简单的几行代码即可实现稳定的Socket通信,适用于各种物联网应用场景。框架提供了丰富的特性,包括但不限于:自动重连机制、数据发送接收接口、事件驱动的数据处理模型以及灵活的协议解析扩展能力。此外,文中还分享了一些实际项目中的优化经验和注意事项。 适合人群:具有一定C#编程基础,从事物联网相关开发的技术人员。 使用场景及目标:① 快速集成Socket通信模块到现有系统中;② 解决传统Socket开发中的常见难题,如断线重连、粘包处理等;③ 提升系统的稳定性与可靠性,特别是在网络环境较差的情况下。 其他说明:文档不仅详细介绍了框架的功能特点,还给出了具体的代码示例和最佳实践建议,帮助开发者更好地理解和使用该框架。同时,针对可能出现的问题提供了解决方案,确保开发者能够顺利地将该框架应用于实际项目中。

    2025年3月计算机等级考试二级C语言笔试版.doc

    2025年3月计算机等级考试二级C语言笔试版.doc

    方波、锯齿、三角波和正弦波发生电路仿真实验

    方波、锯齿、三角波和正弦波发生电路仿真实验

Global site tag (gtag.js) - Google Analytics