我在一个正文内容中制作了一个列，看起来有描述名称的边框

我是初学者，正在自学如何掌握这种编程语言html和css。

我的身体里有3列，我想要一个像标签边框一样的设计，而段落在框边框中。边框顶部的颜色为带有选项卡名称的红色。下图显示了我想要获得的东西

http://tinypic.com/view.php?pic=2gu9yzn&s=8

<style>
    body{
        background-color:#EDC8F7;
    }
    #column h3 {
        display:block;
        width:300px;
        background-color:#333;
        border:solid 1px #fff;  
        text-align:center;
        color:#fff;
    }       
    p {
        border:solid 1px #fff;
        width:300px;
        height:400px;
    }
</style>
<body>
    <div id = "column">
        <h3>ipsum</h3>
        <p>paragraph</p>
    </div>
</body>

为此，我会考虑研究引导面板。方法如下：

<div class="panel panel-default">
  <div class="panel-heading">Your panel heading here/div>
  <div class="panel-body">
    And your panel content here...
  </div>
</div>

您可以进一步自定义面板。例如，如果你想要一个红色背景标题，你可以使用<div class="panel panel-danger">而不是<div class="panel panel-default">

希望能有所帮助。

相关内容

最新更新

热门标签：