3

在此处输入图像描述

http://i.imgur.com/Ta7cZ.png

Who右边的部分带有----------

是李的背景吗？对于如何创建类似的东西，我真的是一片空白。

4

6 回答 6

3

在这里，您可以解决这个问题。

http://jsfiddle.net/fjZfL/3/

HTML：

<div id="box">
    <h2>who?</h2>
    <p>I am 22 Year old designer …&lt;/p>
</div>

CSS：

#box {
    width: 200px;
    height: 150px;
    background: #eee;
    padding: 0 8px;
}
h2 {
    display: inline-block;
    padding: 18px 4px 0 10px;
    margin: 0;
    background: #eee;
}
p {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 20px 10px;
    margin-top: -10px;
}
于 2012-08-27T00:11:04.260 回答
2

或者 - 有人力资源解决方案

http://jsfiddle.net/UYYh5/4/

于 2012-08-27T00:05:55.857 回答
0

这不就是一条横线吗？又名<hr />？

好吧，刚刚搜索了图片中的文字，并找到了网站。我猜这种应用于 p 块的 CSS 样式是如何完成的。

border-top: 1px solid rgba(0, 0, 0, 0.1)
于 2012-08-26T23:54:48.650 回答
0

复制这种效果的一种简单方法是：

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>

对我来说，对于那么薄的背景，图像总是看起来更干净。在我的示例中，您显然会削减图像，但您明白了。

于 2012-08-27T00:37:06.493 回答
0

给你：http: //jsfiddle.net/x63x2/

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

如果你想打扮这条线，你可以用 CSS 来设计你的 HR。这只是一个基本的例子。

于 2012-08-27T00:03:28.017 回答
0

这是另一种选择。

http://jsfiddle.net/PZxA7/

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

 

于 2012-08-27T00:15:58.180 回答