细线表格的制作

细线表格的制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>细线表格制作</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.denglu1{
				float: left;
				width: 107px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				background: url(img/lib1.png) no-repeat left;
				color: #fff;
			}
			.denglu2{
				float: left;
				width: 107px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				background: url(img/lib2.png) no-repeat left;
				color: #fff;
			}
		</style>
		<script type="text/javascript">
			function change(ss){
				if (ss=="left") {
					document.getElementById("left").style.backgroundImage="url(img/lib2.jpg)"
					document.getElementById("right").style.backgroundImage="url(img/lib1.jpg)"
				} else{
					document.getElementById("left").style.backgroundImage="url(img/lib1.jpg)"
					document.getElementById("right").style.backgroundImage="url(img/lib2.jpg)"
				}
			}
		</script>
	</head>
	<body>
		<table  width="283px" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="110px" id="left" class="denglu1" onmouseover="change('left')">登录</td>
				<td class="denglu2" id="right"  onmouseover="change('left')">注册</td>
			</tr>
			<tr>
				<td height="192" colspan="2" background="img/denglu.png"></td>
			</tr>
		</table>
	</body>
</html>

原生表格直接给 border:1px 会出现双线粗边框，因为表格单元格、表格自身都有边框，重叠后变粗；细线表格本质是消除边框间隙、合并边框。

固定定位＋锚记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位+锚记</title>
		<style type="text/css">
			.main{
				height: 3000px;
				/*padding: 1500px 0;*/
			}
			.img{
				position: fixed;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<h1 id="top">我是顶部</h1>
			<!--点击图片，返回顶部-->
			<div class="img">
				<a href="#top"><img src="img/top.png"</a>
			</div>
			
		</div>
	</body>
</html>
posted @ 2026-07-08 17:10  碰一下猫猫头  阅读(12)  评论(0)    收藏  举报