1.布局前的认知1.1 三种基本方案多栏布局有三种基本的实现方案：固定宽度、流动、弹性。固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100 像素宽（最常见的是 960 像素）。流动。布局的大小会随用户调整浏览器窗口大小而变化。（结合 CSS 媒体查询，能够适应最大和最小的屏幕，业界称之为 响应式设计。）弹性。在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化。（实现太过复杂，不多介绍。）1.2 布局高度多数情况下，布局中结构化元素（乃至任何元素）的高度是 不必或者不应该设定的。因为保持元素 height 属性的默认值 auto 不变，才能使元素根据自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随内容数量的增减而垂直伸缩。1.3 布局宽度为了使浏览器窗口宽度合理变化，布局能作出适当的调整，我们 需要精细地控制 布局宽度。2.三栏-固定宽度布局结构如下：上代码：&!DOCTYPE html&&html lang=&en&&&head&& & &meta charset=&UTF-8&&& & &title&三栏-固定宽度布局&/title&& & &style&& & & & * {& & & & & & margin: 0;&& & & & & & padding: 0;& & & & }& & & & #wrapper{& & & & & & width: 960& & & & & & margin: 0& & & & & & border:1& & & & }& & & & header{& & & & & & background: #f00;& & & & }& & & & nav{& & & & & & background: #dcd9c0;& & & & & & width: 150& & & & & & float:& & & & }& & & & article{& & & & & & background: #ffed53;& & & & & & width: 600& & & & & & float:& & & & }& & & & aside{& & & & & & background: #6a6b6c;& & & & & & width: 210& & & & & & float:& & & & }& & & & footer{& & & & & & clear: & & & & & &&& & & & & & background: #6a6b6c;& & & & }& & &/style&&/head&&body&& & &div id=&wrapper&&& & & & &header&& & & & & & This is header.& & & & &/header&& & & & &nav&& & & & & & This is nav&br&& & & & & & This is nav&br&& & & & & & This is nav&br&& & & & &/nav&& & & & &article&& & & & & & This is article.&br&& & & & & & This is article.&br&& & & & & & This is article.&br&& & & & & & This is article.&br&& & & & & & This is article.&br&& & & & & & This is article.&br&& & & & & & This is article.&br&& & & & & & This is article.&br&& & & & & & This is article.&br&& & & & &/article&& & & & &aside&& & & & & & This is aside.& & & & &/aside&& & & & &footer&& & & & & & This is footer.& & & & &/footer&& & &/div&&/body&&/html&结果如图：说明几点：通过给整个外包装（#wrapper）设定宽度值（960px），并将其水平外边距设定为 auto，就能实现居中。随着向里面添加内容，相关的栏的高度会增加。设置宽度并浮动中间三栏（nav、article 和 aside），让它们并排显示。使用属性：width 和 float。三栏的总宽度加起来要等于外包装的宽度（150 + 600 + 210 = 960）。同样使用该方法就可以加任意多栏，只要它们的总宽度等于外包装的宽度即可。页脚（footer）位于浮动元素后面，所以就会尽量往上移动。解决这个问题的方法就是使用 清除浮动（clear:或者使用clear:也可以，因为这里只有左浮动元素）。3.为栏设定内边距和边框在上面的布局中，只要一调整各栏中的内容，布局就可能超过容器宽度，而右边的栏就可能滑到左边的栏下方。例如为了让内容与栏边界空开距离，为栏添加水平外边距和内边距，或者为了增加爱栏间距，为栏添加外边距，导致布局宽度增大，进而浮动栏下滑；又或者在栏中添加大图片，或者没有空格的长字符串（如长URL），也会导致栏宽大超过布局宽度。示例：article{& & background: #ffed53;& & width: 600& & float:& & padding: 10px 20 & &/* 添加这一行CSS规则 */}结果就会变成这样：我们把这种现象称为 浮动滑移，可以使用三种方法来预防发生：从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。在容器内部的元素上添加内边距或外边距。使用 CSS3 的 box-sizing 属性切换盒子缩放方式。应该该属性后，给元素添加边框和内边距都不会增大盒子，相反会导致内容变窄。下面来讨论这三种方法：3.1 重设宽度以抵消内边距和边框由于上面给 article 栏添加了左右 20px 的水平边距，故将该栏宽度从 600px 减至 560px，故修改后的 article 栏 css 样式规则如下：article{& & background: #ffed53;& & width: 560 & &/* 这里 */& & float:& & padding: 10px 20 & /* 别忘了这里 */}效果如下：虽然能实现，但每次只要调整内、外边距就要重设布局宽度，非常烦人，而且还可能导致页面错乱。3.2 给容器内部的元素应用内边距和边框把外边距和内边距应用到内容元素上确实有效，前提是这些元素没有明确地设定宽度，这样它们的内容才会随着内、外边距的增加而缩小。根据盒模型定义，没有宽度的元素在水平方向上会适应其父元素，其内容会随着外边距、边框和内边距的增加而减少。考虑到将来修改的时候，一栏中可能包含大量不同内容的元素，如果想重新调整内容与容器边界的距离，就必须每个元素都要进行调整，这样不仅麻烦，而且容易出错。况且，给栏添加边框同样会增大栏宽，不可能通过为其包含的内容元素逐个添加应用样式来做到。所以说，与其为容器中的元素添加外边距，不如 在栏中再添加一个没有宽度的 div，让它包含所有内容元素，然后再给这个 div 应用边框和内边距。如此一来，只要为内部 div 设定一次样式，就可以把让所有内容元素与栏边界保持一致的距离。而且，将来再需要调整时也会很方便。任何新增内容元素的宽度都由这个内部 div 决定。还是拿 article 栏来开刀：&article&& & &div class=&inner&& & &&!-- 添加一个div --&& & & & This is article.&br&& & & & This is article.&br&& & & & This is article.&br&& & & & This is article.&br&& & & & This is article.&br&& & & & This is article.&br&& & & & This is article.&br&& & & & This is article.&br&& & & & This is article.&br&& & &/div&&/article&增改样式如下：article{& & background: #ffed53;& & width: 600& & float:}&article .inner{& & margin: 10& & border:2& & padding: 20} &&效果如下：从结果可以看出，中间栏的宽度并未因此有多少变化，因为内容区减少的宽度抵消了应用到内部 div 上的外边距、边框和内边距的总宽度。于是，我们可以这样结论：如果布局中的栏是浮动的，而且都设定了宽度，你就不要去动它！要动，就把内容放在内部 div 里，动这个 div。3.3 使用 box-sizing:border-box这是最简单的一个方法。只要在三个浮动的栏的 CSS 规则中分别 加上 box-sizing:border-box 声明，再给栏添加内边距（和边框）就不会导致盒子的宽度变化。此时，既不用调整栏宽去抵消增加的内边距，也不用使用内部 div。添加内边距的结果就是内容收缩。示例：以下是简介清晰的没有内部 div 的标记：&div id=&wrapper&&& & &header&& & & & &!-- 标题 --&& & &/header&& & &nav&& & & & &ul&& & & & & & &!-- 链接 --&& & & & &/ul&& & &/nav&& & &article&& & & & &!-- 文本 --&& & &/article&& & &aside&& & & & &!-- 文本 --&& & &/aside&& & &footer&& & & & &!-- 文本 --&& & &/footer&&/div&相应的，CSS 规则如下：* {&& & margin: 0;&& & padding: 0;}#wrapper{& & width: 960& & margin: 0& & border:1}header{& & background: #f00;}nav{& & box-sizing:border- & &/* 这里！ */& & background: #dcd9c0;& & width: 150& & float:& & padding: 10px 20 & & & /* 添加内边距 */}article{& & box-sizing:border- & &/* 这里！ */& & background: #ffed53;& & width: 600& & float:& & padding: 10px 20 & & & /* 添加内边距 */}aside{& & box-sizing:border- & &/* 还有这里！！ */& & background: #6a6b6c;& & width: 210& & float:& & padding: 10px 20 & & & &/* 添加内边距 */}footer{& & clear: & & /* 清除浮动，防止页脚往上移动 */ & &&& & background: #6a6b6c;}结果如下：box-sizing:border-box 确实起作用了。当我们取消勾选该属性时，footer 栏就会由于 article栏的推挤产生了浮动滑移，移位到 nav栏下方。多么好用的一个属性啊！当然也就少不了 但是 —— IE6 和 IE7 不支持该属性。废话少说，解决方案 如下：使用一个专门解决这个问题的腻子脚本（polyfill），名叫 borderBoxModel.js.可以使用 条件注释 把它添加到 HTML 标记之后、结束的 &/body& 标签之前，以保证在加载 DOM 之后再执行该脚本：&body&&!-- HTML 标记 --&&!-- 只让 IE8 之前的 IE 加载它 --&&!-- [if It IE 8] --&&script src=&helpers/borderBoxModel.js&&&/script&&![endif]--&&/body&备忘：【关于表现性标记的思考】、【子-星选择符】、【预防过大的元素】。转自：&/a/8802作者： dopppler&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&==========阅读原文==========前端JavaScript(cjscwe_2015)　
　文章为作者独立观点，不代表大不六文章网立场
cjscwe_2015web前端技术交流，JavaScript，HTML5，CSS3……热门文章最新文章cjscwe_2015web前端技术交流，JavaScript，HTML5，CSS3……孔夫子旧书网该图书“网页DIY+CSS布局和动画美化全程实例 第2版”已经找不到了, 还有其他店铺销售此图书。Copyright(C)
孔夫子旧书网
京ICP证041501号
海淀分局备案编号Discuz! DIY_Discuz! 资料库
DIY 使用指导
DIY 使用指导
DIY功能主要是利用页面拖拽技术，在不编写代码的情况下实现快速布局页面、聚合调用站内数据的功能。下面我们来看如何使用DIY功能 以及如何美化DIY的数据模块。
基本DIY流程
以管理员身份登录网站前台，点击头部右上方“DIY”按钮，进入DIY模式：
进入DIY模式后，页面中内置的可DIY区域（模板标签中已经讲过）将会以灰蓝色显示：
(1)首先，要选择合适的框架，点击 框架 来选择合适的框架拖拽到所需位置：
(2)然后，点击 模块 ，来选择合适的模块，拖拽到框架中，拖拽进去后，页面便会弹出编辑模块属性窗口，如下图所示：
根据所需要调用的数据类型设置各属性即可。
修改模块页面显示样式
如何在模块中增加“标题”及 “更多”的链接 如下图样式方法：通过框架或模块都可以实现上述样式
，我们以框架为例，我们在DIY的时候
选中要编辑的框架点击编辑 如下图所示：之后点击标题在弹出的层中可以添加标题及链接,位置选择居左
如下图所示，同时可以设置标题的颜色及大小接下来增加“更多”的链接
点击弹出层的添加新标题按扭 如下图所示
，会“复制”出一份新的标题
你只需修改就可以了把其中的“精彩教程” 改成“更多” ，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右” 完成，这样框架就有了标题及更多
，模块的方法同上
DIY的模块中如何调整链接的颜色 如下图样式方法：选中要修改的模块 ， 点击编辑，选择 数据
如下图所示：在弹出层中选择 编辑 如下图所示： 在弹出的层中 可以对标题进行 加粗、斜体、加下划线、修改颜色 等操作
如何在现有的模块中添加新的数据选中要添加数据的模块 点击编辑--数据
如下图所示：在弹出的层中 选择任意一条数据
如下图所示：点击编辑后 在弹出的层中选择从数据源获取 此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据 如下图所示： 点击获取会填充模块内相应的数据字段 （此处的数据字段会根据模块样式的不同有所变化，请注意）完成。
DIY时如何调用外部程序的数据,当我们与第三方程序整合后 如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据,首先我们可以在需要调用的地方拖一个展示类中的静态模块 如下图所示：如上图所示 选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的 我们把第三方程序提供的JS代码粘贴进 HTML代码框就可以了，如下图所示：完成。
首页多格或首页四格如何DIY出来, 我们以论坛首页为例 （在任何页面都可以） 来制作一个首页四格。首先在论坛首页拖一个 1:1的框架
如下图所示：接下来向已拖好的1-1框架的框架里 左侧的1 里面拖入一个1:1的框架 如下图所示：接下来向右侧的1-1里面也拖入一个1:1的框架，如下图所示：接下来我们就可以通过拖拽模块到框架中去了此时我们可以去掉框架的标题 ，同时为每一个模块增加一个标题
如下图所示：你可以通过不同的模块样式或者CSS来美化这里。
如何修改整个模块的链接样式
比如下图 方法：选中要编辑的模块
，点击编辑--样式
进行修改 如下图所示：以上修改针对整个模块完成 。
如何修改两个模块或两个框架之间的距离
如下图样式选择要编辑的框架或者模块
，点击编辑--样式 选择外边距，勾选分别设置 ，在右边距中写入合适的数字就可以了 例如如下图所示：完成后的效果
如下图样式完成。
DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过）实现方法：拖一个TAB框架到页面中，点编辑，选择标题 如下图所示：在弹出的窗口中选择切换类型 如下图所示：你可以根据你的需要选择是点击还是滑过即可完成。
在DIY模块中的模块数据中固定是什么意思，如下图解答： 当勾选固定后 此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉
如何实现两个模块中间一条竖线的效果，如下图效果实现方法：选中要操作的DIY模块 选择样式
如下图所示：在弹出的层中 ，选择边框的分别设置 ，在边框的“左” 大小 设置为1px，“样式”选择实线，“颜色”选择灰色，如下图所示：这样设置后 我们就能看到一个边线了
这时你会看到内容与边线挤在了一起
如下图所示：接下来我们进行调整内边距改变上图中的样式
同理，打开样式编辑层 选择“内边距” 点分别设置 在“左”中添加10px调整后如下图所示：
大家可以根据实际情况调整 内、外边距的大小与边框的设置 ，灵活使用
如何将一个文章模块转换为一个帖子模块,比如官方提供的门户及频道都是文章类模块 ，我们如何转换为帖子类,编辑模块的属性
把其中的模块分类进行切换
如下图所示：选择帖子模块就可以变换
这里要注意
切换之后，原来的模块样式将变成私有的（自定义样式） 修改显示样式只能通过模块模板进行修改
如何在模板（官方发布的频道及门户）里面插入DIY区域
，如下图所示：首先打开 模板文件 例如亲子模板， 打开template\default\portal\list_baby.htm
文件找到这两段代码的之间插入一行代码&!--[diy=guanggao]--&&div id="guanggao" class="area"&&/div&&!--[/diy]--&其中 “guanggao” 可以任意取名，注意 不可与本模板中其它重名，必须保证唯一性 如下图所示：当前位置： >
jQuery实现左侧版块滚动右侧版块固定页面效果_JS代码
简介：jQuery的插件可实现右侧固定区块随滚动条滚动而滚动，适合网站右侧广告和推荐内容的展示
jQuery实现左侧版块滚动右侧版块固定页面效果_JS代码
使用方法：
1.引用样式文件css/93diy.css
2.引用jquery的库文件js/jquery.js
3.引用效果的具体js代码文件js/js.js复制至html文件中。
4.将class为fixed的div的内容复制到您的html文件
(责任编辑：93diy)
------分隔线----------------------------
友情链接 |
本站部分资料来源于互联网，仅供网友参考和学习，请勿抄袭或做其他用途。
如果我们无意中侵犯了您的版权，敬请告之，我们核实后，将在第一时间删除，谢谢！
Copyright 2012-, All Rights Reserved 京ICP备号-1 京ICP备号-2
QQ在线咨询