0

我是 CSS 新手。我正在尝试以完美的方式显示我的图像

这是我的html代码：

<div id="photos">
            <h3>Photo title</h3>
            <P class="like"><a href="#">Like</a> </P>
            <p class="date">date </p>
            <div id="image">
                <img src="something.jpg" />
            </div>
            <p class="about">about image goes here</p>

        </div>

现在我想像这样设计相同的样式：

http://www.desolve.org/

4

6 回答 6

1

CSS 

    #photos{
margin:10px;
    border:solid 1px red;
    font-family:arial;
    font-size:12px;

}
#photos h3{
font-size:18px;
}

.date, .like{
text-align:right;
}

.about{
margin:10px;
}
#image img{
width:100%;
}

HTML

<div id="photos">
            <h3>Photo title</h3>
            <P class="like"><a href="#">Like</a> </P>
            <p class="date">date </p>
            <div id="image">
                <img src="http://www.desolve.org/_images/chicago_banner.jpg" />
            </div>
            <p class="about">about image goes here</p>

        </div>

现场演示http://jsfiddle.net/46ESp/

现在根据您的布局设置为边距*填充*带有或高度

于 2012-06-05T11:35:21.947 回答
1

我想你需要这样

http://jsfiddle.net/VwPna/

于 2012-06-05T11:35:40.427 回答
1

从http://www.w3schools.com/css/default.asp 您可以轻松学习......您还可以在浏览器中查看来自 firebug 的其他网站 css。

下面的代码是您为横幅类提供的站点 css。

.banner {
    background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
    height: 350px;
    margin-bottom: 4em;
    overflow: hidden;
    padding-left: 3.9%;
    position: relative;
}

同样的方式你可以给他们更多的风格。

于 2012-06-05T11:37:01.690 回答
1

这是在您提供的链接上制作的方式。

HTML：

<div class="banner">
  <h1>We love urban photography</h1>
  <p>
    We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a  small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
    <strong>Welcome</strong>
    .
  </p>
</div>

CSS：

.banner {
    background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
    height: 350px;
    margin-bottom: 4em;
    overflow: hidden;
    padding-left: 3.9%;
    position: relative;
}

.banner h1 {
    color: #FFFFFF;
    font-size: 2.2em;
    letter-spacing: 0.1em;
    padding-top: 290px;
}

.banner p {
    background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
    color: #FFFFFF;
    font-size: 1em;
    height: 350px;
    padding: 1% 1% 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 21%;
}

你只需要把它翻译成你的 id、classes 和 form，然后你就拥有了

于 2012-06-05T11:41:46.957 回答
1

他们在参考网站上没有什么特别之处。他们将图像用作 div 的背景属性class="preview"。
这是(x)HTML：

<section class="chicago">
  <h2><a href="chicago.htm" title="Chicago gallery">Chicago</a></h2>
  <p class="pubdate">
    <time datetime="2011-04-24" pubdate="">April 2011</time>
  </p>
  <div class="preview"><a href="chicago.htm" title="Chicago gallery"></a></div>
  <p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>

以及对应的CSS 

.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}

您总是可以通过鼠标右键单击网站并选择“查看页面源”或类似的东西来偷看，具体取决于您的浏览器:)

于 2012-06-05T11:45:24.620 回答
1

如果你想让你的图像像那个墙贴一样，我在下面给出的小提琴链接中做到了。

http://jsfiddle.net/zWS7c/1/

于 2012-06-05T11:49:31.223 回答