前段时间看别人写的关于空白的连接区域的CSS教程，个人觉得不是很好，虽然方法类似。下面我来写写我的方法。
首先，建立DIV框架
<div id="logo"><a href="#">LOGO</a></div>
现在这样是一个普通的文字连接。此时，你可以设置这个DIV下A的属性，但是，你无法讲其变成空白的连接区块。
CSS部分这样写
<style>
#logo{width:200px; margin:0 auto; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:3.6em; font-weight:bold}/*这里是设置整个区块的背景*/
#logo a:link, #logo a:visited{background:#cccccc; display:block; width:184px; height:100px; padding:20px; color:#FF6600; text-decoration:none}
#logo a:hover{background:#FF6600; display:block; width:184px; height:100px; padding:20px; color:#FFFFFF; text-decoration:none}
/*这里是LOGO区块下连接样式的设定，可以根据自己的需求写。这里是同时包含连接前，访问后，变换过程三个样式的并列写法，这是在不需要有连接变换时的写法。*/
</style>
这样看下来，你的连接是怎么样的？连接区域是不是确实变大了？但是上面的字体没有消失阿！对，DIV构架下少了个东西，其实前面应该这样写。
<div id="logo"><a href="#"><span>LOGO</span></a></div>
这样之后，再在CSS下添加这一条既可：
#logo span{display:none}
看吧！空白区域的连接，本博客LOGO处也使用的是这样的方式，当你选中COPY我的LOGO，你可以COPY到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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Evan制作-空白区域连接教程</title>
<style>
#logo{width:200px; margin:0 auto; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:3.6em; font-weight:bold}/*这里是设置整个区块的背景*/
#logo span{display:none}
#logo a:link, #logo a:visited{background:#cccccc; display:block; width:184px; height:100px; padding:20px; color:#FF6600; text-decoration:none}
#logo a:hover{background:#FF6600; display:block; width:184px; height:100px; padding:20px; color:#FFFFFF; text-decoration:none}
/*这里是LOGO区块下连接样式的设定，可以根据自己的需求写。这里是同时包含连接前，访问后，变换过程三个样式的并列写法，这是在不需要有连接变换时的写法。*/
</style>
</head>
<body>
<div id="logo"><a href="#"><span>LOGO</span></a></div>
</body>
</html>
回复Comments
{commenttime}{commentauthor}
{CommentUrl}
{commentcontent}