CSS实例(三)：全部使用背景生成栏目

最新推荐文章于 2024-07-18 13:52:01 发布

iteye_19603

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量124

点赞数

文章标签： xhtml

全部使用背景来制作网页中的栏目很巧妙，很亲切，很象以前做桌面程序的感觉。使用三张图片，基本上就生成了整个网页的所有栏目。

titletag.png

Html代码

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"><head>
<title>娱乐频道-搜狐</title>
<styletype="text/css">
a{color:#333;text-decoration:none;font-size:12px}
a:hover{color:#dc0000;text-decoration:underline;}
.column,.column_btm{width:265px;}
.columnh2{background:url(titletag.png)0-60px;color:#fff;height:24px;line-height:24px;font-size:12px;font-weight:weigth;margin:0px;padding:00012px;}
.columna{
background:url(bgx.gif)repeat-x0-85px;height:25px;line-height:25px;vertical-align:middle;display:block;margin:01em;
}
.bgno{background:none;}
.column_btm{background:url(titletag.png)0-259px;height:5px;font-size:1px;clear:both;}
.column{background:url(cutbg.gif)-2585px0;}
</style>
</head>
<body>
<divclass="column">
<h2><span>搜狐视频</span></h2>
<ahref="http://blog.csdn.net/wallimn"title="欢迎访问我的博客"target="_blank">浙江发现潭底恢宏地宫呈北斗七星排列</a>
<ahref="http://blog.csdn.net/wallimn"title="欢迎访问我的博客"target="_blank">干扰演讲学生获保释自称无罪</a>
<aclass="bgno"href="http://blog.csdn.net/wallimn"target="_blank">刘谦诡异魔术影子找扑克牌如鬼魂显灵</a>
<divclass="column_btm"></div>
</body>
</html>

关注