布局图像和编写CSS的最佳方法

时间：2011-07-15 07:06:53

标签： html css

enter image description here

我是html和css.now的新手我想知道其他大师如何用html和更少的CSS布局上面的图像。谢谢。

我的方式： 首先，切割八个小图像和一个白色小背景图像（圆角图像）。

html：

<div id="top" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>

</div>
<div id="bottom"  style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>

ps：将这些图像用作背景图像而不是img标记的区别是什么。哪个更好？为什么吗

4 个答案:

答案 0 :(得分：4)

使用具有适当宽度的ul并将其li向左浮动（例如，如果这是导航），div中的div或直接在body中进行div。

这应该让它更容易理解：

style.css（CSS在同一目录中，否则链接href应指向路径）：

ul { margin: 0; padding: 0;  width: 500px; }
li { float: left; /* width: 100px - if your images are different size. */ }

HTML：

<!DOCTYPE ...>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en-US" />
    <!-- ... -->
    <title>My Page</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript" src="some js file"></script>
</head>
<body>
    <!-- .... -->
    <ul>
        <li><a href="http://target.com/target1" title="Latest News"><img alt="Latest News" src="..." /></a></li>
        <li><a href="http://outer.com" title="Outer Link" target="_blank"><img alt="Latest News" src="..." /></a></li>
        <!-- .. -->
    </ul>
    <!-- .... -->
</body>
</html>

答案 1 :(得分：1)

首先：使用这些作为背景图片，而不是img tag＆amp;如果您使用sprites，这会更好。

秒：使用此列表样式＆amp;给float:left 

 <ul>
  <li>wew</li>
  <li>er</li>
  <li>rer</li>
 </ul>

css： 

li{
 float:left:
 margin:5px;
}

答案 2 :(得分：1)

你走了：

http://jsfiddle.net/Wrd7F/

HTML：

<ul>
    <li class="link1"><a href="#">Lipsum</a></li>
    <li class="link2"><a href="#">Lipsum</a></li>
</ul>

CSS：

ul { width: 600px; float: left; }

ul li {
    background-image: url("http://i.stack.imgur.com/l2qJt.png");
    background-repeat: no-repeat;
    width: 137px;
    height: 46px;
    float: left;
    margin: 20px;
}

ul li a {   
    padding-left: 57px; /* Note: substract this amount from the width */
    width: 80px; /* Original width 137px - Substract the amount of padding you want to use on right */
    height: 46px;
    line-height: 46px; /* Should be same as height if you want text to stay in the middle */
    text-align: left;
    float: left;
    text-decoration: none;
    color: #222222;
}

.link1 { background-position: -13px -19px; }
.link2 { background-position: -200px -19px; }

请注意，您必须手动输入背景位置但不是那么难。如果您在图像文档中的图像位置混乱，Firebug会对此有所帮助。

将图像放在一个图像文档中时，应遵循特定的样式。 比如，所有图像水平并排，如果你有悬停图像，你将它们并排放在那些图像之下。在为悬停和正常状态建立第一个项目的垂直或水平定位后，您只需更改其中一个值，因为另一个值不会从该点开始更改。

为什么要在<img>上使用css背景：

  • 在很多情况下，它更灵活（大小，填充，样式）
  • 易于编辑（无需打开photoshop并更改文字）
  • ：悬停状态（如果要定义：悬停状态（.link1：hover { background-position：0px 0px;你不必诉诸于JS。 ）

编辑：在CSS中我想评论：“在左侧提取您想要使用的填充量”

Edit2：另请注意，在这种情况下，这可能是一种熊陷阱，因为有限宽度和文本可能会变得棘手。对于圆形边框和所有这些，这需要一些技巧，使其更灵活。

答案 3 :(得分：0)

这是一个示例，其中的图标也会像截图中的白框一样突出

http://jsfiddle.net/RYAZp/

CSS 

ul li {
    border: 1px solid #333;
    background: #FFF;
    border-radius: 10px;
    display: inline-block;
    padding: 10px 10px 10px 45px;
    overflow: visible;
    font-size: 15px;
    height: 1em;
    position: relative;
    margin-bottom: 1em;
}

ul li img {
    position: absolute;
    top: -0.5em;
    left: 5px;
}

HTML 

<ul>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li> 
    <li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>  
</ul>
相关问题
最新问题