HTML CSS Box容器

时间:2012-05-10 05:08:47

标签: html css twitter-bootstrap

我有一个如图所示的盒子容器

enter image description here

我想以模块化方式编码,以便我可以使用html css结构来构建宽度和高度的任何大小的框。我将使用Bootstrap来编写网站代码

这是最好的入门方式。

3 个答案:

答案 0 :(得分:3)

假设顶部的渐变名为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的discusion页面吗?

答案 1 :(得分:2)

如果您愿意尝试使用jQuery ui,您只需使用对话框即可实现您想要的内容,即链接中包含更多信息。

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

答案 2 :(得分: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

enter image description here

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