css3_html/css_WEB-ITnose での疑似クラスの使用について-htmlチュートリアル-php.cn

css3_html/css_WEB-ITnose での疑似クラスの使用について

WBOY

リリース： 2016-06-24 11:53:40

オリジナル

1106 人が閲覧しました

目標:

CSS での after 疑似クラスと last-child 疑似クラスの使用。そしていくつかのcss3プロパティ。

プロセス:

ナビゲーションを作成するとき、各 li の後に区切り記号を追加する効果が頻繁に発生し、最後の要素に到達すると区切り記号が削除されます。

写真に示すように

それでは、純粋な CSS を使用してそのような効果を非常に簡単に作成する方法を説明します。ここでは CSS 疑似クラスが使用されます。

html パート

<body>	<ul class="nav">    	<li><a href="">Home</a></li>    	<li><a href="">About Me</a></li>    	<li><a href="">Portfolio</a></li>    	<li><a href="">Blog</a></li>    	<li><a href="">Resources</a></li>    	<li><a href="">Contact Me</a></li>	</ul></body>

ログイン後にコピー

を呼び出して、CSS スタイルを呼び出します

body{		  background: #ebebeb;		}		.nav{		  width:560px;		  height: 50px;		  font:bold 0/50px Arial;		  text-align:center;		  margin:40px auto 0;	      background: #f65f57;		  /*制作圆*/		  border-radius:9px;          /*制作导航立体风格*/          box-shadow:0px 5px #911;		}		.nav a{		  display: inline-block;		  -webkit-transition: all 0.2s ease-in;		  -moz-transition: all 0.2s ease-in;		  -o-transition: all 0.2s ease-in;		  -ms-transition: all 0.2s ease-in;		  transition: all 0.2s ease-in;		}		.nav a:hover{		  -webkit-transform:rotate(10deg);		  -moz-transform:rotate(10deg);		  -o-transform:rotate(10deg);		  -ms-transform:rotate(10deg);		  transform:rotate(10deg);		}		.nav li{		  position:relative;		  display:inline-block;		  padding:0 16px;		  font-size: 13px;		  text-shadow:1px 2px 4px rgba(0,0,0,.5);		  list-style: none outside none;		}		/*使用伪元素制作导航列表项分隔线*/		<span style="color:#ff0000;">.nav li:after</span>{    	<strong> content:"";         position:absolute;         top:15px;         right:0px;         width:1px;         height:15px;         background:linear-gradient(to bottom, #f82f87,#B0363F,#f82f87);</strong>		}        /*删除第一项和最后一项导航分隔线*/		<span style="color:#ff0000;">.nav li:last-child:after</span>{    <strong>	 width:0px;         height:0px;</strong>		}		.nav a,		.nav a:hover{		  color:#fff;		  text-decoration: none;		}

ログイン後にコピー

CSS の .nav li:after は、各 li の後に要素が追加されることを示します。これは、コンテンツの内容です (グラデーションを作成するときは、コンテンツを追加する必要がないため、空です)。

background:linear-gradient(tobottom,#f82f87,#bo363f,#f82f87) //css3 のグラデーションスタイル

各 li の後にグラデーションを追加した後、最後の li をクリアする必要があります。

ここでは .nav li:last-child:after 疑似クラスが使用され、その幅と高さは 0 に設定されます。

結果:

疑似クラスを使用することにより、ナビゲーションでよく発生する問題は簡単に解決されます。

その場合、css3 のトランジションアニメーション、変形変形、background:linear-gradient(); の使用もあります。