Html 如何在CSS中复制这种效果？

属于谁的那一部分----------

---

这是李的背景吗？关于如何创建这样的东西，我真的是一片空白。

这不是一条水平规则吗？又名

嗯，只是搜索了图片中的文字，找到了网站。这个CSS样式应用于所讨论的p块，我想它是如何完成的

border-top: 1px solid rgba(0, 0, 0, 0.1)

给你：

CSS：

body { font-family:arial,helvetica,sans-serif ;
}

.block-item { width:350px ;
    height:300px ;
    padding:10px ;
    margin:auto ;
    background:#D4D4D4 ;
}

p { font-size:13px ;
    margin-top:14px ;
    margin-bottom:14px ;
    line-height:18px ;
}

.block-item h1 { display:block ;
    background:#D4D4D4 ;
    font-size:18px ;
    color:red ;
    padding:0px 5px 0px 0px ;
    position:absolute ;
    top:3px ;
}

以及HTML：

<div class="block-item">
<hr>
<h1>Who?</h1>
<p>Nulla porttitor sodales quam, et molestie mi euismod vel. Nunc iaculis ligula ac dolor congue consequat. Cras tristique vulputate auctor. Pellentesque mattis massa vel arcu auctor tristique. Mauris rhoncus porta diam, sit amet euismod turpis viverra eu. Nulla in ligula sed nibh tristique laoreet. Nullam id magna erat. Sed porttitor mauris vel diam pharetra a volutpat tellus volutpat. Quisque placerat laoreet odio sit amet posuere. Duis id libero nisl.</p>
</div>​

谁
不必为您的家庭和家庭提供服务。这是一个很好的例子。克拉斯·特里斯蒂克秃鹫拍卖行。佩伦特斯·马蒂斯·韦尔阿尔库·奥克托·特里斯蒂克。Mauris rhoncus porta diam，坐在amet euismod turpis viverra eu。舌苔中的无尾蛇是一种古老的植物。无主标识。毛里斯·维尔迪亚姆·法雷特拉是一个蜗牛。我是拉奥里特·奥迪奥·阿梅特·波苏尔。酒后驾车

​

---

如果你想打扮一下，你可以用CSS设计你的人力资源。这只是一个基本的例子。

另外，还有人力资源解决方案

---

给你，你把它弄得乱七八糟

HTML:

谁
我是22岁的设计师

CSS:

---

这是另一种选择

.title{
背景色：白色；
位置：绝对位置；
z指数：10；
}
.酒吧
{
边框底部：1px实心；
位置：绝对位置；
显示：内联块；
颜色：#b5；
利润上限：-10px；
宽度：350px；
}
.集装箱
{
宽度：350px；
}
W H O？

佩伦特式居住者morbi tristique Sentecus et netus et malesuada是一位著名的土耳其人。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥

---

复制这种效果的简单方法如下：

div.wrapper{ width:  300px;
             font-family: 'Times New Roman';
             font-size: 13px;
             color:  #3b3a3a;
}
div.wrapper div{
    margin: 0px 0px;
}
div.header span{
    font-size: 14px;
    font-family: Verdana;
    font-weight: 300;
    display: inline-block;
    margin: 0px;
    width:  60px;
    background-color: #fff;

}
div.content p
{
    margin: 3px;
}
div.content p span
{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -150px -140px;
    height: 7px;
    width: 30px;
    display: inline-block;
}
div.wrapper div.header{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat 0px -10px;
}
div.wrapper div.footer{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -10px -170px;
    height: 18px;
}


    <div class="wrapper">
        <div class="header"><span>Who?</span></div>
        <div class="content"><p>I'm a 22 year old designer who spends more time on the internet than I should.  
            I am currently living in Upstate NY, but would love to someday move away from the cold.  I am a sucker 
            for Apple products and enjoy a well-brewed beer.<span></span></p>
        </div>
        <div class="footer"></div>
    </div>

div.wrapper{宽度：300px；
字体系列：“新罗马时代”；
字体大小：13px；
颜色：#3b3a3a；
}
div.wrapper div{
保证金：0px 0px；
}
副标题跨距{
字体大小：14px；
字体系列：Verdana；
字体大小：300；
显示：内联块；
边际：0px；
宽度：60px；
背景色：#fff；
}
部门内容p
{
保证金：3倍；
}
分区内容p span
{
背景：url（'http://i.imgur.com/Ta7cZ.png'）无重复-150px-140px；
高度：7px；
宽度：30px；
显示：内联块；
}
div.wrapper div.header{
背景：url（'http://i.imgur.com/Ta7cZ.png'）无重复0px-10px；
}
div.wrapper div.footer{
背景：url（'http://i.imgur.com/Ta7cZ.png'）无重复-10px-170px；
高度：18px；
}
谁
我是一个22岁的设计师，花在互联网上的时间比我应该花的多。
我目前住在纽约州北部，但希望有一天能远离寒冷。我是个笨蛋
购买苹果产品，享受精心酿造的啤酒

---

对我来说，在这样薄的背景下，图像看起来总是更干净。在我的示例中，您显然会减少图像，但您明白了这一点。

这可能是一个带有相对定位元素的上边框。请看一下：我认为使用字段集来复制标题效果是不合适的/我对Jared的代码进行了一点扩展：好吧，这不是我的意思，但实际上是类似的。根据页面的HTML，不。这不会无限延伸吗？或者是否有一个宽度：自动的

width选项？嗯，hr有一个宽度选项，快速搜索会带来一系列技巧。行与文本底部对齐，而不是与文本中间对齐。只是太多了
top:#px
。没有特别固定，不过我更喜欢把它往下推一点。归根结底就是最终用户的偏好
.title{
 background-color:white;
    position:absolute;
    z-index:10;
}
.bar
{
    border-bottom:1px solid;
    position:absolute;
    display:inline-block;
    color:#b5b5b5;
    margin-top:-10px;
    width:350px;
}
.container
{
    width:350px;
}

<div class="container">

    <div class="title">W H O?</div>

    <div class="bar"/>&nbsp;</div>

<p><br/>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

div.wrapper{ width:  300px;
             font-family: 'Times New Roman';
             font-size: 13px;
             color:  #3b3a3a;
}
div.wrapper div{
    margin: 0px 0px;
}
div.header span{
    font-size: 14px;
    font-family: Verdana;
    font-weight: 300;
    display: inline-block;
    margin: 0px;
    width:  60px;
    background-color: #fff;

}
div.content p
{
    margin: 3px;
}
div.content p span
{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -150px -140px;
    height: 7px;
    width: 30px;
    display: inline-block;
}
div.wrapper div.header{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat 0px -10px;
}
div.wrapper div.footer{
    background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -10px -170px;
    height: 18px;
}


    <div class="wrapper">
        <div class="header"><span>Who?</span></div>
        <div class="content"><p>I'm a 22 year old designer who spends more time on the internet than I should.  
            I am currently living in Upstate NY, but would love to someday move away from the cold.  I am a sucker 
            for Apple products and enjoy a well-brewed beer.<span></span></p>
        </div>
        <div class="footer"></div>
    </div>