Question

我是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/

Answer 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/

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

Answer 2

我认为你需要这样

http://jsfiddle.net/VwPna/

Answer 3

从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;
}

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

Answer 4

以下是您在链接上制作的方式。

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，类和表格，然后你就可以了

Answer 5

他们在参考网站上做的并不特别。他们使用图像作为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;
}

您可以随时在网站上单击鼠标右键并选择“查看页面来源”或类似内容，具体取决于您的浏览器：）

Answer 6

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

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

完美的图像显示方式

6 个答案: