我有一个盒子容器,如下图所示
我想以模块化方式进行编码,以便我可以使用 html css 结构来构建宽度和高度的任何大小的框。我将使用 Bootstrap 对网站进行编码
这是最好的开始方式。
我有一个盒子容器,如下图所示
我想以模块化方式进行编码,以便我可以使用 html css 结构来构建宽度和高度的任何大小的框。我将使用 Bootstrap 对网站进行编码
这是最好的开始方式。
假设顶部的渐变名为 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讨论页面吗?
我尽量保持与您的示例相似,因为我可以使用直接的 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>
如果你愿意尝试 jQuery ui,你可以简单地使用对话框来实现你想要的,这里有更多信息的链接。