Html 制作此容器的最具语义的方法_Html_Css

Html 制作此容器的最具语义的方法

html css

Html 制作此容器的最具语义的方法,html,css,Html,Css,我想使用div和border-radius创建以下形状，对于旧浏览器，可以返回到方形角。请不要拍照我在制作标题旁边的下角（用红色框突出显示）时遇到了一些问题。我不想要很多不必要的div，它必须尽可能的简单和语义。标题内容 .container{宽度：660px；背景：#fff；} .container.header{float:左；宽度：110px；背景：#333；边框半径：5px 5px 0；} .container.body{clear:左；宽度：660px；背景：#333；边框半

我想使用div和border-radius创建以下形状，对于旧浏览器，可以返回到方形角。请不要拍照

我在制作标题旁边的下角（用红色框突出显示）时遇到了一些问题。我不想要很多不必要的div，它必须尽可能的简单和语义。


标题
内容
.container{宽度：660px；背景：#fff；}
.container.header{float:左；宽度：110px；背景：#333；边框半径：5px 5px 0；}
.container.body{clear:左；宽度：660px；背景：#333；边框半径：0 0 5px 5px；}

有什么想法吗

编辑1:

我是这样做的：


.container{宽度：660px；背景：#fff；}
.container.header{float:left；宽度：110px；高度：30px；背景：#333；边框半径：10px 10px 0；}
.container.headerspacer{float:左；位置：相对；宽度：550px；高度：30px；背景：#333；}
.container.headerspacer.headercorner{位置：绝对；宽度：550px；高度：30px；背景：#fff；边界半径：010px；}
.container.body{clear:left；宽度：660px；高度：100px；背景：#333；边框半径：0 10px 10px；}

编辑2:

我将使用这种方法：

我还发现了一种使用图像的方法，如果浏览器不支持圆角，该图像将不会显示。它更具语义，使用边界半径的全部目的是消除不必要的标记。我想我实际上会使用这种方法，但我不会接受它作为答案，因为我说过我不想要图像

<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;}


.container{宽度：660px；背景：#fff；}
.container.header{float:left；宽度：110px；高度：30px；背景：#333；边框半径：10px 10px 0；}
.container.header:在{content:url之后(http://img24.imageshack.us/img24/1112/corner0.gif)；显示：块；边距：20px 0 0 110px；}
.container.body{clear:left；宽度：660px；高度：100px；背景：#333；边框半径：0 10px 10px；}

这是您的纯CSS解决方案，目前仅与FF兼容。您可以使其与其他浏览器兼容。

我的想法是在左下角使用黑色背景的白色圆形div。（我自己无法让它工作，所以看到结果会很好：）

正如许多人之前建议的那样，黑色的

div

，里面有白色div，左下角有边框半径

代码很粗糙，应该重写，但它可以工作。您应该将div背景色与页面颜色同步。

这是我的解决方案

我肯定这不是最好的，但我这样做是为了学习，我想这可能会帮助别人

“最终”结果如下：

你可以看到它在工作

代码如下所示：

HTML

希望有帮助，祝你好运

我还发现了一种使用图像的方法，如果浏览器不支持圆角，该图像将不会显示。它更具语义，使用边界半径的全部目的是消除不必要的标记。我想我实际上会使用这种方法，但我不会接受它作为答案，因为我说过我不想要图像。但这是：


.container{宽度：660px；背景：#fff；}
.container.header{float:left；宽度：110px；高度：30px；背景：#333；边框半径：10px 10px 0；}
.container.header:在{content:url之后(http://img24.imageshack.us/img24/1112/corner0.gif)；显示：块；边距：20px 0 0 110px；}
.container.body{clear:left；宽度：660px；高度：100px；背景：#333；边框半径：0 10px 10px；}
< /代码> 您还应该考虑使用<代码> dl < /c>元素> < /p>
此HTML：
<dl>
    <dt>..</dt>
    <dd>..</dd>
</dl> 


..
..

将具有比嵌套div更纯的语义，但如果只有一个“title-content”块，可能会更麻烦
最后h（1-6）
元素将比div class=“header”
具有更多的语义。您的问题是“最语义的方式”。容器的容器/布局div没有任何语义。语义网意味着帮助其他人理解不同的内容，比如一个表应该是一个表，一个列表应该是一个列表等等
注意，如果您没有正确地标记元素，请小心使用div标记来替换它们的真正含义
<div class="whatever_label">
   <h2>Title</h2> <!-- or lower level heading: h3,h4 etc. -->
   <span></span>
   <p>Content</p>
</div>

/* Container of module */
.whatever_label{
}
/* Heading Tab */
.whatever_label h2{
}
/* Radius: Heading Tab */
.whatever_label span{
}
/* Content */
.whatever_label p{
}


标题
内容
/*模块容器*/
.随便什么标签{
}
/*标题选项卡*/
.不管标签是什么{
}
/*半径：标题选项卡*/
.不管你的标签是什么{
}
/*内容*/
.随便什么{
}

判断html文档是否使用了良好的语义的一个好技巧是关闭浏览器中的css样式，如果它仍然符合逻辑，那么它将倾向于语义
编辑，这似乎是我能想到的最干净的方法，希望它能帮助：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Box Demo</title>
<style type="text/css">

/* :: Reset default browser stylings.
-------------------------------------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, cite, dfn, ins, kbd, q, code, samp, del, em, var, strong, pre,/* sub, sup,*/
a, abbr, acronym, address, big, font, img, s, 
small, strike, tt, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline;}
body {color: black; background: white;}
ol, ul {list-style: none;}
table{border-collapse: collapse;}

/* Container of module */
.box{
  width:600px;
}
/* Heading Tab */
.box h2{
  float:left;
  font-size:1.0em;
  color:white;
  background: #333;
  height:10px;
  padding:15px 20px 25px 20px;
  margin:0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.box div.radius{
  background: #333;
  float: left;
  height: 25px;
  margin: 25px 0px 0px 0px;
  width: 20px;
}
/* Radius: Heading Tab */
.box span{
  background-color: white;
  -moz-border-radius:0 0 0 10px;
  border-radius: 0 0 0 10px;
  float: left;
  height: 25px;
  margin: 0;
  width: 20px;
}
/* Content */
.box p{
  display:block;
  clear:both;
  color:white;
  background: #333;
  width:560px;
  padding:20px;
  margin:0;
}

</style>

</head>
<body style="margin:20px;">
<div class="box">
   <h2>Whatever title</h2> <!-- or lower level heading: h3,h4 etc. -->
   <div class="radius"><span></span></div>
   <p>Nullam fermentum nibh eget lectus cursus elementum. Vestibulum congue elementum erat, 
    at adipiscing libero blandit sed. Aliquam erat volutpat. Duis feugiat blandit sagittis. 
    Praesent interdum fringilla rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc dui nulla, sodales et posuere nec, varius quis nisl. Cras mauris ipsum, commodo sit amet 
    sollicitudin ut, rutrum eget erat. Nullam aliquam, massa et sagittis suscipit, massa erat 
    adipiscing turpis, et luctus metus velit quis ante. Maecenas elementum tristique euismod. 
    Phasellus iaculis arcu eget libero tempor accumsan. Vestibulum at turpis ac dui venenatis condimentum.
    Duis tristique neque at nisi feugiat ac congue nibh luctus. Proin non elit et sapien feugiat dictum nec at diam.
    Quisque quis feugiat velit. Mauris id tortor id ligula vulputate dictum ac vitae elit. 
    Maecenas congue tincidunt leo, ut lobortis mi tempor sit amet. Vestibulum condimentum euismod neque. 
    Vivamus ullamcorper odio ut lacus ullamcorper id pellentesque orci euismod. Ut vitae arcu nulla.
    </p>
</div>
</body>
</html>


盒子演示
/*：：重置默认浏览器样式。
-------------------------------------------------------------------------------------------------------------------- */
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、引用、dfn、ins、kbd、q、代码、samp、del、em、var、strong、pre、/*sup、*/
a、 缩写，首字母缩写，地址，大号，字体，img，s，
小，罢工，tt，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、tbody、tfoot、thead、tr、th、td{边距：0；填充：0；边框：0；轮廓：0；字体大小：正常；字体样式：正常；字体大小：100%；垂直对齐：基线；}
正文{颜色：黑色；背景：白色；}
ol，ul{列表样式：无；}
表{边框折叠：折叠；}
/*模块容器*/
.盒子{
宽度：600px；
}
/*标题选项卡*/
.方框h2{
浮动：左；
字号：1.0em；
颜色：白色；
背景：#333；
高度：10px；
填充：15px20px25px20px；
保证金：0；
-moz边界半径：10px 10px 0；
边界半径：10px 10px 0；
}
.箱形分区半径{
#big{
    background-color:#aaa;
    float:left;
    border: 1px solid red;    
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 50px;
    width: 100px;
}

#cont{
    background-color:#aaa;
    float:bottom;
    margin-top:51px;
    border: 1px solid red;    
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    height: 250px;
    width: 300px;
}

#small{
    float:left;
    margin:25px 0 0 -27px;
    border: 1px solid red;    
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-left-radius: 15px;
    height: 25px;
    width: 25px;
    background-color:#fff;
}

#other{
    z-index:-1;
    float:left;
    margin:25px 0 0 -1px;
    border: 1px solid red;
    height: 25px;
    width: 25px;
    background-color:#aaa;
}

<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;}

<dl>
    <dt>..</dt>
    <dd>..</dd>
</dl> 

<div class="whatever_label">
   <h2>Title</h2> <!-- or lower level heading: h3,h4 etc. -->
   <span></span>
   <p>Content</p>
</div>

/* Container of module */
.whatever_label{
}
/* Heading Tab */
.whatever_label h2{
}
/* Radius: Heading Tab */
.whatever_label span{
}
/* Content */
.whatever_label p{
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Box Demo</title>
<style type="text/css">

/* :: Reset default browser stylings.
-------------------------------------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, cite, dfn, ins, kbd, q, code, samp, del, em, var, strong, pre,/* sub, sup,*/
a, abbr, acronym, address, big, font, img, s, 
small, strike, tt, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline;}
body {color: black; background: white;}
ol, ul {list-style: none;}
table{border-collapse: collapse;}

/* Container of module */
.box{
  width:600px;
}
/* Heading Tab */
.box h2{
  float:left;
  font-size:1.0em;
  color:white;
  background: #333;
  height:10px;
  padding:15px 20px 25px 20px;
  margin:0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.box div.radius{
  background: #333;
  float: left;
  height: 25px;
  margin: 25px 0px 0px 0px;
  width: 20px;
}
/* Radius: Heading Tab */
.box span{
  background-color: white;
  -moz-border-radius:0 0 0 10px;
  border-radius: 0 0 0 10px;
  float: left;
  height: 25px;
  margin: 0;
  width: 20px;
}
/* Content */
.box p{
  display:block;
  clear:both;
  color:white;
  background: #333;
  width:560px;
  padding:20px;
  margin:0;
}

</style>

</head>
<body style="margin:20px;">
<div class="box">
   <h2>Whatever title</h2> <!-- or lower level heading: h3,h4 etc. -->
   <div class="radius"><span></span></div>
   <p>Nullam fermentum nibh eget lectus cursus elementum. Vestibulum congue elementum erat, 
    at adipiscing libero blandit sed. Aliquam erat volutpat. Duis feugiat blandit sagittis. 
    Praesent interdum fringilla rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc dui nulla, sodales et posuere nec, varius quis nisl. Cras mauris ipsum, commodo sit amet 
    sollicitudin ut, rutrum eget erat. Nullam aliquam, massa et sagittis suscipit, massa erat 
    adipiscing turpis, et luctus metus velit quis ante. Maecenas elementum tristique euismod. 
    Phasellus iaculis arcu eget libero tempor accumsan. Vestibulum at turpis ac dui venenatis condimentum.
    Duis tristique neque at nisi feugiat ac congue nibh luctus. Proin non elit et sapien feugiat dictum nec at diam.
    Quisque quis feugiat velit. Mauris id tortor id ligula vulputate dictum ac vitae elit. 
    Maecenas congue tincidunt leo, ut lobortis mi tempor sit amet. Vestibulum condimentum euismod neque. 
    Vivamus ullamcorper odio ut lacus ullamcorper id pellentesque orci euismod. Ut vitae arcu nulla.
    </p>
</div>
</body>
</html>