css如何将图片绝对居左下

html-css015

css如何将图片绝对居左下,第1张

绝对居左下的方式:

图片包括任何的标签都是不能默认绝对居下的,都是需要通过css样式控制的,这个就要用到定位。给img添加一个绝对定位position:absoluteleft:0bottom:0也需要给它的某个父级添加一个相对定位。

img标签是向网页中嵌入一幅图像。

注意,从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

<img>标签有两个必需的属性:src 属性 和 alt 属性。

二楼说的甚是

我来帮你完整解决一下残留的问题吧

两种解决方法

先说原因吧,原因就是LOGO是通过背景图片导入的

#header {

background:url("../../templates/teakiagy/images/logo.jpg") no-repeat scroll 100px 50% transparent

height:100px

margin-bottom:0

overflow:hidden

}

#header {

background:none repeat scroll 0 0 #373A3C

border-bottom:0 solid #373A3C

margin-bottom:8px

min-width:980px

width:100%

而怪就怪在你有两份儿#header。宽度是执行的第二个width:100%,而不是980px,就不会随着下面的内容一起居中。

所以,解决方法就是

一,更改为width:980px

二,重新写hmtl中logo的代码,你可以写一个<span class="logo">logo</span>,CSS代码 .logo{display:block背景图片地址指向logo,宽度,高度大小与logo一致,}

显然第一种方法简单……

加油

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<html>

<head>

<style>

#aa{

float:left}

#main_footer_zw {text-align:leftmargin-bottom:8pxfloat: leftwidth: 690px}

#main_footer_zw ul {display:inlinemargin:0 autotext-align: leftfloat: leftpadding-top: 0padding-right: 0padding-left:1pxmargin-top:4px}

#main_footer_zw ul li {float:leftdisplay:inlinewidth:224pxfloat:lefttext-align:leftmargin-top: 8pxmargin-bottom: 0pxmargin-left: 2pxpadding: 0px}

#main_footer_zw ul li a {float:leftdisplay:inlinefloat: none}

#main_footer_zw ul li img { margin-bottom:1px}

</style>

<title</title>

<body>

<div id="main_footer_zw">

<ul>

<li><a href="#"><img class="aa" src="images/cy_06_08.jpg" width="224" height="180" border="0" onMouseOver="this.src='images/cy_06_08x.jpg'" onMouseOut="this.src='images/cy_06_10.jpg'"/></a>

</li>

<li><a href="#"><img src="images/cy_06_10.jpg" width="224" height="180" border="0" onMouseOver="this.src='images/cy_06_10x.jpg'" onMouseOut="this.src='images/cy_06_10.jpg'"/></a>

</li>

<li><a href="#"><img src="images/cy_06_12.jpg" width="224" height="180" border="0" onMouseOver="this.src='images/cy_06_12x.jpg'" onMouseOut="this.src='images/cy_06_12.jpg'"/></a>

</li>

</ul>

</div>

</body>

</html>