Advanced - Create link box

Example analysis:

Use display:block; to convert the a element into a block element, and then set the width and height of the a element.

Use the font-weight property to set the font weight.

Use the color and background-color properties to set the font color and background color.

Use text-align:center; to center the text within the a element horizontally.

Use text-decoration; to remove the underline of the link.

new file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>

submit Reset Code

Automatic operation

Full Screen