HTML CSS 盒子容器答案

【问题标题】：HTML CSS Box ContainerHTML CSS 盒子容器
【发布时间】：2016-02-05 05:53:07
【问题描述】：

我有一个如下图所示的盒子

我想以模块化的方式进行编码，以便我可以使用 html css 结构来构建任何尺寸的宽度和高度框。我将使用 Bootstrap 对网站进行编码

这是最好的开始方式。

【问题讨论】：

【解决方案1】：

假设顶部的渐变名为gradient.png

.box {
    border: 1px solid gray;
    border-radius: 3px;
    background: white url("gradient.png") ;
    background-repeat: repeat-y;
    padding-top: 20px;
}

我认为这主要是不言自明的； repeat-y 只是让它在顶部重复，而不是在图像的其余部分重复。填充使文本不会从顶部开始。看看它是如何为您工作的。

顺便问一下，这是来自 Apple 讨论页面吗？

【讨论】：

不。在其中一个站点中找到它作为 UI 元素集。
此外，这将有助于跨浏览器 CSS - css3generator.com

【解决方案2】：

我尽量保持与您的示例相似，因为我可以使用直接的 CSS。鉴于这种方法，您不会在 IE8 及更低版本中立即获得支持。

盒子本身的标记非常简单：

<div id="modal">
  <header><h1>Something Here</h1></header>
  <section>
    <p>Pellentesque habitant morbi tristique...</p>
  </section>
</div>

可以在下面的预览图片下方找到此标记的 CSS。

演示：http://jsbin.com/ogesuf/5/edit

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #modal {
    width: 600px;
    border: 1px solid #CCC;
    box-shadow: 0 1px 5px #CCC;
    border-radius: 5px;
    font-family: verdana;
    margin: 25px auto;
    overflow: hidden;
  }
  #modal header {
    background: #f1f1f1;
    background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
    box-shadow: 0 1px 2px #888;
    padding: 10px;
  }
  #modal h1 {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 1px 2px white;
    color: #888;
    text-align: center;
  }
  #modal section {
    padding: 10px 30px; 
    font-size: 12px;
    line-height: 175%;
    color: #333;
  }
</style>

【讨论】：

【解决方案3】：

如果你愿意尝试 jQuery ui，你可以简单地使用对话框来实现你想要的，这里有更多信息的链接。

http://jqueryui.com/demos/dialog/#default

【讨论】：

这不是对话框。它更像是一个容器。
@Harsha M V 理论上你可以把它当成一个容器来使用，只要设置draggable false，并在加载时设置位置