css样式bottom问题

html-css021

css样式bottom问题,第1张

<!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">

<head>

<title></title>

<style type="text/css">

<!--

img{border:1px #ccc solid}

a{color:red}

a:hover img{position:relativebottom:10px}

-->

</style>

<body>

<a href="#">文字</a>

<a href="#">文字</a>

<a href="#">文字</a>

<br /><br /><br />

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>

<br /><br /><br />

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>

</body>

</html>

只改这个hover就可以啊..10px也太大了点.

a:hover img{position:relativetop:1pxleft:1px}

一般有两种方法：

一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。

实例演示如下：

1、实例代码如下：

此时页面效果如下：

2、修改第1步中的txt样式，加入text-decoration:underline。

此时页面效果如下，出现了下划线。

二、通过设置div的border实现效果：

实例演示如下：

在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：

此时页面效果如下：

不要使用绝对定位，这种功能局限性很强，绝对定位就是说不管什么情况，被定位的块都会在页面的一个地方显示，但是要让某块始终位于最下方，LZ已经考虑了它相对与其他块的位置，所以我建议LZ使用相对位置，这是HTML编写的习惯问题，也是页面设计的第一步，要把所要安排的层按照从上到下从左到右的顺序来写，当你写完所有的层以后，剩下的层自然就在最下面了，然后就可以设置相对位置和每个层的大小等具体属性了，如有不懂可以再问。