Web小案例图片中加入文字,<a>链接标签消除下划线

<div id="div2" style="position: relative;">
				
						 <img src="img/login_head.gif" />
						 <span style="position: absolute;top: 0;left: 30px; color: white;">拍拍用户登录</span><table></div>

效果图

<a>链接标签消除下划线

a{
	textdecoration:none;
}

具体demo

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test4.css" />
	</head>

	<body>
		<div>

			<div >
				<hr />
				<img src="img/top.jpg" />
		
			</div>
			<div id="div2" style="position: relative;">
				
						 <img src="img/login_head.gif" />
						 <span style="position: absolute;top: 0;left: 30px; color: white;">拍拍用户登录</span>
					
				<table>
					

					<tr>
						<td><label for="name">QQ号码</label></td>
						<td><input type="text" id="name" /></td>
						<td>
							<a href="">忘记QQ号码>></a>
						</td>
					</tr>

					<tr>
						<td><label for="name">QQ密码</label></td>
						<td><input type="password" id="password" /></td>
						<td>
							<a href="">忘记QQ号码>></a>
						</td>
					</tr>
					<tr>
						<td><label for="yzm">验证码</label></td>
						<td><input type="text" id="yzm" /></td>
						<td></td>
					</tr>
					<tr>
						<th colspan="3">
							<a href="">看不清换一张</a>
						</th>
					</tr>
					
					<tr>
						<th colspan="3">
							<img src="img/code.jpg" />
						</th>
					</tr>
					<br />
					<tr>
						<th colspan="3">
							<img src="img/login_submit.gif" />
						</th>
					</tr>
					<tr>
						<th colspan="3"><input type="radio" style="shape" />
							<a href="">阅读并同意拍拍用户协议</a>
						</th>
					</tr>

				</table>
			</div>
			<div>
				<img src="img/bottom.jpg" />
			</div>
		</div>
	</body>

</html>

css的代码

#name_3{
	border: none 0;
	outline: medium;
	border-bottom: 1px solid black;
}
 #password_3{
 	border: none 0;
	outline: medium;
	border-bottom: 1px solid black;
 }

里面涉及的图片，如果有小伙伴喜欢可以关注我哦，每天发布小demo

Web小案例图片中加入文字,<a>链接标签消除下划线

猜你喜欢