制作此容器的最语义方式 [英] The most semantic way of making this container

问题描述

我想使用div和边框半径制作以下形状，可以回到旧浏览器的方角。没有图片。

我有一个麻烦，使标题旁边的底角（用红色框突出显示 ）。我不想要很多不必要的div，它必须尽可能简单和语义。

 < div class =container> 
< div class =header> Title< / div> 
< div class =body>内容< / div> 
< / div> 
 
 .container {width：660px; background：#fff;} 
 .container .header {float：left; width：110px;背景：＃333; border-radius：5px 5px 0 0;} 
 .container .body {clear：left; width：660px;背景：＃333; border-radius：0 0 5px 5px;} 
  

任何想法？

编辑1：

我这样做： http://jsfiddle.net/a93Rb/16/

 < div class =container> 
< div class =header>< / div> 
< div class =headerspacer> 
< div class =headercorner>< / div> 
< / div> 
< div class =body>< / div> 
< / div> 
 
 .container {width：660px; background：#fff;} 
 .container .header {float：left; width：110px; height：30px;背景：＃333; border-radius：10px 10px 0 0;} 
 .container .headerspacer {float：left;位置：相对; width：550px; height：30px; background：＃333;} 
 .container .headerspacer .headercorner {position：absolute; width：550px; height：30px; background：#fff; border-radius：0 0 0 10px;} 
 .container .body {clear：left; width：660px; height：100px;背景：＃333; border-radius：0 0 10px 10px;} 
  

编辑2： / p>

我要使用此方法： http：// jsfiddle.net/a93Rb/13/

我还发现了一种使用图像的方法，如果浏览器不支持圆角，则不会显示该图像。它更多的语义，使用border-radius的整个观点是否定不必要的标记。我想我会使用这种方法，但我不会接受它作为答案，因为我说我不想要图像。

 < div class =container> 
< div class =header>< / div> 
< div class =body>< / div> 
< / div> 
 
 .container {width：660px; background：#fff;} 
 .container .header {float：left; width：110px; height：30px;背景：＃333; border-radius：10px 10px 0 0;} 
 .container .header：after {content：url（http://img24.imageshack.us/img24/1112/corner0.gif）;显示：block; margin：20px 0 0 110px;} 
 .container .body {clear：left; width：660px; height：100px;背景：＃333; border-radius：0 0 10px 10px;} 
  

解决方案

想法是白色圆的div与黑暗的背景在左下角。 （我不能让它自己工作，所以很高兴看到结果:)）

I want to make the following shape using divs and border radius, with fall back to square corners for old browsers. No images please.

I am having a bit of trouble making the bottom corner next to the title (highlighted with the red box). I don't want a lot of unnecessary divs, it has to be as simple and semantic as possible.

<div class="container">
   <div class="header">Title</div>
   <div class="body">Content</div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; background: #333; border-radius: 5px 5px 0 0;}
.container .body{clear: left; width: 660px; background: #333; border-radius: 0 0 5px 5px;}

Any ideas?

EDIT 1:

I did it like this: http://jsfiddle.net/a93Rb/16/

<div class="container">
    <div class="header"></div>
    <div class="headerspacer">
       <div class="headercorner"></div>
    </div>
    <div class="body"></div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}  
.container .headerspacer{float: left; position: relative; width: 550px; height: 30px; background: #333;} 
    .container .headerspacer .headercorner{ position: absolute; width: 550px; height: 30px; background: #fff; border-radius: 0 0 0 10px;} 
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

EDIT 2:

I am going to use this method: http://jsfiddle.net/a93Rb/13/

I also found a method of using an image which will not appear if the browser does not support rounded corners. It is much more semantic, and the whole point of using border-radius is to negate unnecessary markup. I think I will actually use this method, but I won't accept it as an answer as I stated that I do not want images.

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

解决方案

My idea was white rounded div with dark background under bottom left corner. (I can't get it to work myself, so it would be great to see result :) )

这篇关于制作此容器的最语义方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！