CSS:何制做1个向各个方位延展box?

日期:2020-12-13 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板


http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/
在HTML中, 假如过你沒有特定1个明确的宽度的话, 块级元素自身就会在竖直方位上延展. 想像1个无序清单. 这个清单会自身拓展来融入它全部的清模块素. 假如客户在她们的访问器中提升了字体样式尺寸, 清单会在竖直方位上延展, 来融入增大的內容. 有时, 觉得仅仅在竖直方位延展是是非非常局限的, 假如水平方位也能和竖直方位1样由于客户提升字体样式尺寸而自延展那就更好了. 概述
假如你用过Firefox 3 Beta的话, 你会发现它早已会全自动这样解决了. 在Firefox 3提升尺寸不仅是提升字体样式尺寸. 它提升全部元素的尺寸. 这样看起来十分当然和好看. 可是虽然Firefox的销售市场市场份额在持续上涨, 可是大家還是不可以期望Firefox的调剂尺寸作用来达到客户要求.
我尝试着解释怎样制做1个有下列特性的各方位延展box:

能在全部流行访问器中工作中.
在竖直和水平方位上延展.
用1个独立的情况照片.


这一些追求完美, 非常是要应用情况照片. 它必须用到1种 CSS小精灵技术性(照片的不一样地区用在不一样的地区)和拖动门技术性(依靠当今的尺寸显示信息不一样长度的照片)的融合方式. 让box水平可延展
有1个简易的方式让box水平可延展: 用em来界定你的宽度. 比如:

.box {
width: 35em;
margin: 50px auto;
}

在这里margin特性只是以便举例, 让它水平垂直居中而且一直和访问器顶边有1定间距. 思索照片精准定位
在这个事例中, 这是个圆角box, 有点投射, 也有点內部黑影. 这就代表着这个box的4个角明显是不一样的. 这里的挑戰是照片是不可以延展的.大家必须1种方式, 让4个不一样的圆角照片各自运用到box的4个角上.
大家还必须接合它们让变化无显著界限, 大家还要尝试着用1个情况照片进行, 来让它尽量起效.
下面是1张你关注的大家必须做甚么的示用意, box将被拼接, 我把它们分开, 你就可以看到全部的box了.

当在建立情况照片时, 要考虑到尺寸, 你的情况照片越大, 在不破坏合理布局的状况下, 你就可以延展的越大. 示例中的情况是700像素宽它能在4 - 5种字体样式尺寸下工作中. 可是假如超出了这个规格, 它最后会分离出来开. 撰写box
自然, 大家要用XHTML来尽量的达到词义化. 这代表着不可以应用附加的不置放內容而纯碎以便设计方案的标识. 悲剧的是, 用4个box来拼接1个box时, 这没法进行.
它是这样进行的:

<div class="box">
<div class="topleft">
<div class="topright">
<div>
CONTENT GOES HERE
</div>
</div>
</div>
<div class="bottomleft">
<div class="bottomright">
</div>
</div>
</div>
为box设置款式
这里是box中的4个地区:

.box div.topleft {
display: block;
background: url("images/box-bg.png") top left no-repeat white;
padding: 2.0em 0em 0em 2.0em;
}
.box div.topright {
display: block;
background: url("images/box-bg.png") top right no-repeat white;
padding: 2.0em;
margin: ⑵.0em 0 0 2.0em;
}
.box div.bottomleft {
display: block;
height: 45px;
margin-top: ⑵.0em;
background: url("images/box-bg.png") bottom left no-repeat white;
}
.box div.bottomright {
display: block;
background: url("images/box-bg.png") bottom right no-repeat white;
height: 45px;
margin-left: 3.0em;
}

留意, 负外补钉是将运用到父级元素上的内补钉值铺满的必要方式. 它能够很好的处理用上内补钉的方式. 让文本包括在box內部, 另外留意, 我把底部div的高宽比用像素界定了, 目地是以便让它们维持短小而且不延展.