可以自由调页面布局DIV资源-CSDN文库

共4个文件

js：2个

html：1个

css：1个

需积分: 9 161 浏览量 2008-12-20 09:53:02 上传评论收藏 5KB RAR 举报

在网页设计中，"可以自由调页面布局DIV"是一个关键概念，它涉及到前端开发中的响应式设计和灵活性。DIV（Division）是HTML中一个非常重要的布局元素，用于将页面分割成多个区域，每个区域可以独立设置样式，实现复杂的网页结构。通过调整这些DIV的尺寸、位置和排列方式，我们可以构建出多样化的页面布局。 1. **CSS布局基础**：CSS（层叠样式表）是控制网页外观的核心工具，其中的盒模型（Box Model）概念对于理解如何调整DIV布局至关重要。盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin），这些属性共同决定了一个元素的总体尺寸和位置。 2. **定位技术**：在CSS中，可以使用`position`属性（如static、relative、absolute、fixed）来控制元素的位置。相对定位（relative）保持元素的原始位置，但可以通过`top`、`right`、`bottom`、`left`属性进行微调。绝对定位（absolute）则脱离正常文档流，基于最近的非static定位祖先元素进行定位。 3. **Flexbox布局**：dfFlexiGrid相关的文件很可能涉及到了Flexbox布局。Flexbox是一种现代的布局模式，适用于一维布局（行或列）。通过`display: flex`开启Flex容器，可以轻松地调整子元素的大小、顺序和对齐方式，例如使用`flex-grow`、`flex-shrink`、`flex-basis`来控制元素的伸缩性。 4. **Grid布局**：虽然标题中没有明确提到Grid，但它也是现代布局的重要组成部分。CSS Grid布局提供二维布局能力，允许我们定义行和列，使元素按网格对齐。如果dfFlexiGrid包含Grid相关的代码，那么可能涉及到`grid-template-columns`、`grid-template-rows`等属性。 5. **JavaScript增强**：压缩包中的`.js`文件可能包含了JavaScript代码，用于实现更动态的布局调整。例如，根据屏幕尺寸或用户交互改变DIV的布局，这通常涉及事件监听器（如`resize`事件）和DOM操作（如`innerHTML`、`appendChild`等）。 6. **响应式设计**：考虑到布局的自由调整，可能还涉及到响应式设计，确保页面在不同设备和屏幕尺寸上都能良好显示。媒体查询（Media Queries）是实现这一目标的关键，可以根据设备特征应用不同的CSS规则。 7. **框架与库**：dfFlexiGrid可能是某种自定义的布局框架或库，它可能封装了常见的布局功能，如栅格系统、弹性盒子或网格布局，以简化开发工作。 "可以自由调页面布局DIV"涉及了HTML结构、CSS样式控制、JavaScript交互以及响应式设计等多个层面的技术。通过深入理解和灵活运用这些知识，开发者可以创建出高度定制化且适应性强的网页布局。

资源详情

资源评论

资源推荐

收起资源包目录

DIV.rar （4个子文件）

dfFlexiGrid_inc.js 3KB

dfFlexiGrid.js 3KB

dfFlexiGrid.css 932B

dfFlexiGrid.html 4KB

<!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" xml:lang="en" lang="en"> <head> <title>dfGrid 1.0</title> <script type="text/javascript" src="dfFlexiGrid_inc.js"></script> <script type="text/javascript" src="dfFlexiGrid.js"></script> <link rel="stylesheet" media="screen, projection" href="dfFlexiGrid.css"> </head> <body onload="mygrid=new dfGrid('wrapper','left_column','right_column');"> <div id="wrapper"> <div id="header"> <a href="#" onclick="mygrid.toggleLeft();">Toggle Left</a> <a href="#" onclick="mygrid.toggleBlock('block1');">Left Accordion</a> <a href="#" onclick="mygrid.toggleRight();">Toggle Right</a> <a href="#" onclick="mygrid.resize(700,'px');">800 PX</a> <a href="#" onclick="mygrid.resize(1000,'px');">1000 PX</a> <a href="#" onclick="mygrid.resize(100,'%');">100%</a> <a href="#" onclick="mygrid.resizeFont(0.05);">+ Font</a> <a href="#" onclick="mygrid.resizeFont(-0.05);">- Font</a> </div> <div id="left_column" > <div class="left_column"> Appropriately seize pandemic channels and multidisciplinary imperatives. Rapidiously promote tactical innovation rather than front-end strategic theme areas. <div class="blockdivider"> <a class="accord_toggle" href="#" onclick="mygrid.toggleBlock('block1');">TOGGLE(+/-)</a> <div id="block1"> Appropriately seize pandemic channels and multidisciplinary imperatives. Rapidiously promote tactical innovation rather than front-end strategic </div> </div> Appropriately seize pandemic channels and multidisciplinary imperatives. Phosfluorescently expedite pandemic sources whereas performance based.</div> </div> <div id="right_column"> <div class="right_column"> <p>Appropriately seize pandemic channels and multidisciplinary imperatives. Phosfluorescently expedite pandemic sources whereas performance based architectures. Rapidiously promote tactical innovation rather than front-end strategic theme areas.</p> <p>Phosfluorescently communicate state of the art opportunities without extensible web-readiness. Monotonectally parallel task equity invested content vis-a-vis installed base platforms. Interactively disintermediate tactical products with effective models. </p> </div> </div> <div id="center_column"> <div class="center_column"> <h2>Dezinerfolio.com</h2> <p>This liquid grid based javascript is a free resource by <a href="http://dezinerfolio.com" target="_blank">Dezinerfolio</a></p> <p>Appropriately seize pandemic channels and multidisciplinary imperatives. Phosfluorescently expedite pandemic sources whereas performance based architectures. Rapidiously promote tactical innovation rather than front-end strategic theme areas.</p> <p>Phosfluorescently communicate state of the art opportunities without extensible web-readiness. Monotonectally parallel task equity invested content vis-a-vis installed base platforms. Interactively disintermediate tactical products with effective models. </p> <p>Uniquely syndicate compelling internal or "organic" sources through parallel benefits. Assertively underwhelm effective synergy without backward-compatible information. Collaboratively communicate flexible manufactured products whereas scalable web services. </p> <p>Conveniently develop enterprise-wide resources without compelling users. Synergistically implement B2B mindshare for effective systems. Credibly leverage existing business strategic theme areas through economically sound infomediaries. </p> <p>Assertively empower dynamic infomediaries rather than superior metrics. Proactively generate standards compliant results for cost effective supply chains.</p> </div> </div> </div> </body> </html>