你将如何设计CSS和HTML来划分这个圆形的部件？

问题描述

你会如何分割div并拼接图像做到这一点？它需要可以调整大小。

我应该切掉角落并有左上角，右上角，顶部中间，中间左侧，中间右侧，左下，中下，右下？这样的div结构会是什么样子？

我需要能够在顶部栏和底部栏上放置文本，这就是为什么我认为做法。我支持IE7，所以我认为使用图像切片可能是合理的。

我很好奇你会如何划分div来创建这个构件结构。 >

解决方案

真正具有阴影和圆角的流体盒是一种痛苦： p>

 < div class =box> 
< div class =nw> 1< / div> 
< div class =n> 2< / div> 
< div class =ne> 3< / div> 
< div class =w> 4< / div> 
< div class =e> 6< / div> 
< div class =sw> 7< / div> 
< div class =s> 8< / div> 
< div class =se> 9< / div> 
 
< div class =content> 5< / div> 
< / div> 
  

• 1-4,6-9将被定位为绝对宽度的各种组合顶部：0，右：0，左：0，底部：0


• 1,3,7,9将固定宽度/高度，非重复背景和更高z-指数超过2,4,6,8
  2,8将是固定高度，100％宽度，background-repeat：repeat-x


• 4,6将固定宽度，100％高度，background-repeat：repeat-y


• 5将是您的内容所在的位置

I have the following image which I need to turn into an HTML widget on my site.

alt text http://db.tt/lRJq4s

How would you divide up the divs and splice up the image to make this? It needs to be resizable.

Should I slice off the corners and have a Top-Left, Top-Right, Top-Middle, Middle-Left, Middle-Right, Bottom-Left, Bottom-Middle, Bottom-Right? What would the div structure for something like that look like?

I need to be able to place text on both the top bar and bottom bar which is why I was thinking that approach. I'm supporting IE7 so I think using image slices is probably reasonable.

I'm really curious how you would divide up the divs to create this widget structure.

解决方案

Having truly fluid boxes with drop shadows and rounded corners is a pain:

http://dev.meagar.net/misc/2198371153.png

<div class="box">
  <div class="nw">1</div>
  <div class="n">2</div>
  <div class="ne">3</div>
  <div class="w">4</div>
  <div class="e">6</div>
  <div class="sw">7</div>
  <div class="s">8</div>
  <div class="se">9</div>

  <div class="content">5</div>
</div>

• 1-4,6-9 would be positioned absolutely width various combinations of top:0, right:0, left:0, bottom:0
• 1,3,7,9 would be fixed width/height with non-repeating background and a higher z-index than 2,4,6,8
• 2,8 would be fixed height, 100% width, background-repeat:repeat-x
• 4,6 would be fixed width, 100% height, background-repeat:repeat-y
• 5 would be where your content sits

这篇关于你将如何设计CSS和HTML来划分这个圆形的部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！