一种给力的带背景的超链接的写法

简介: 该写法源自:http://sg.8864.com/     *{ margin:0px; padding:0px; border:0 none; } .menu{width:504px;height:90px;background:url(.

该写法源自:http://sg.8864.com/

 

 

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">

*{ margin:0px; padding:0px; border:0 none; }

.menu{width:504px;height:90px;background:url(./bj_2.jpg) no-repeat -200px 0;float:right;}

.menu a{display:block;width:126px;height:90px;float:left;background:url(./bj_2.jpg) no-repeat;}

.menu a.a_1{background-position:-200px 0;}
.menu a.a_1:hover{background-position:-704px 0;}

.menu a.a_2{background-position:-326px 0;}
.menu a.a_2:hover{background-position:-830px 0;}

.menu a.a_3{background-position:-452px 0;}
.menu a.a_3:hover{background-position:-956px 0;}

.menu a.a_4{background-position:-578px 0;}
.menu a.a_4:hover{background-position:-1082px 0;}

</style>

</head>

<body>

	<div class="menu">
		<a class="a_1" ></a>
		<a class="a_2" ></a>
		<a class="a_3" ></a>
		<a class="a_4" ></a>
	</div>

</body>

</html>

 

相关文章
|
4天前
|
移动开发 HTML5
高大上HTML5引导页源码 动态效果更好看
高大上HTML5引导页源码 动态效果更好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
12 0
高大上HTML5引导页源码 动态效果更好看
|
5天前
|
移动开发 HTML5
超级高大上HTML5引导页源码 动态效果更好看
超级高大上HTML5引导页源码 动态效果更好看
25 3
超级高大上HTML5引导页源码 动态效果更好看
|
19天前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
19 1
|
前端开发
前端知识学习案例7-开发企业网站7-实现轮播标题依次动画
前端知识学习案例7-开发企业网站7-实现轮播标题依次动画
50 0
前端知识学习案例7-开发企业网站7-实现轮播标题依次动画
|
前端开发 JavaScript
前端知识案例学习10-HTML5滑动选择器美化
前端知识案例学习10-HTML5滑动选择器美化
111 0
|
前端开发 Java C++
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
|
前端开发 IDE 开发工具
「趣学前端」优雅又精致,来看看别人家的表格样式是怎样实现
用技术实现梦想,用梦想打开创意之门。今天分享前端CSS中的表格的知识点。
167 0
|
前端开发
【网页前端】CSS样式表进阶文本样式
【网页前端】CSS样式表进阶文本样式
105 0
【网页前端】CSS样式表进阶文本样式
|
前端开发
全国公祭日,怎么用一行css代码将整个站点变灰
全国公祭日,怎么用一行css代码将整个站点变灰
那些酷炫的网页你也可以做到——第五篇(表格标签)
那些酷炫的网页你也可以做到——第五篇(表格标签)
123 0
那些酷炫的网页你也可以做到——第五篇(表格标签)