CSS常用伪类别属性

最新推荐文章于 2023-12-29 00:15:00 发布

潇潇雨歇_

最新推荐文章于 2023-12-29 00:15:00 发布

阅读量1.4k

点赞数

文章标签： css 标签 html class

本文链接：https://blog.csdn.net/linhaiyun_ytdx/article/details/52595654

版权

HTML 5 学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

代码：

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常用伪类别属性</title>
<style>

  #navigation{width:200px; font-family:Arial, Helvetica, sans-serif}
  #navigation ul{list-style-type:none; padding:0px}
  #navigation ul li{ border-bottom:1px solid red #F00}
  #navigation ul li a{text-decoration:none; display:block; width:500px; height:25px;/*border:1px solid red;*/ border-left:10px solid red #6F9; border-right:10px solid red #F30}
  #navigation ul li a:link,#navigation ul li a: visited{
	  background-color:#F00;
	  color:#FFF;
  }
   #navigation ul li a:hover{
	   background-color:#0F3;
	   color:#000
   }
    #navigation ul li a:active{
		color:#FFF
	}
  
  /*
   padding为内间距
   border:1px solid red;
   border-bottom:1px solid red #60C
  */
</style>
</head>

<body>
  <div id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">My friend</a></li>
      <li><a href="#">My Web</a></li>
      <li><a href="#">My pets</a></li>
      <li><a href="#">Contact me</a></li>
    <ul>
  </div>
</body>
</html>

制作截图：