zoukankan      html  css  js  c++  java
  • css3中关于伪类的使用

    目标:

    css中after伪类,last-child伪类的使用。以及部分css3的属性。

    过程:

    在制作导航时。常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果。

    如图

    那么制作这种一个效果。怎么用纯css非常easy的完毕了。这里用到了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{
    		  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;
             1px;
             height:15px;
             background:linear-gradient(to bottom, #f82f87,#B0363F,#f82f87);</strong>
    		}
            /*删除第一项和最后一项导航分隔线*/
    		<span style="color:#ff0000;">.nav li:last-child:after</span>{
        <strong>	 0px;
             height:0px;</strong>
    		}
    		.nav a,
    		.nav a:hover{
    		  color:#fff;
    		  text-decoration: none;
    		}
    

    css中的.nav li:after表明了在每个li后面加入一个元素。正是content内容(制作渐变时。不须要有内容被加入。所以为空)。

    background:linear-gradient(to bottom ,#f82f87,#bo363f,#f82f87) //css3中的渐变样式

    对每个li后面加入了一个渐变后,须要清除最后一个li的。

    这里面使用了.nav li:last-child:after的伪类,将其宽高设置为0。


    结果:

    通过对伪类的使用,非常easy的制作了导航中常常碰到的问题。

    案例中,还有css3中的transition动画的使用。transform变形。background:linear-gradient();渐变的设置。



  • 相关阅读:
    第七课——iOS数据持久化
    第三章-动态规划
    IOS第五课——Gesture and TableView
    第六课——UIDynamicAnimator
    文本居中换行、边框设置
    属性优先级、图片属性设置、内联标签设置大小
    打开、悬浮、访问、点击、状态用:
    属性选择器用【】
    组合使用用逗号,
    3种选择器的使用方式
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/5153815.html
Copyright © 2011-2022 走看看