• 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();渐变的设置。



  • 相关阅读:
    c语言中float、double、long double在内存中存储方式
    linux路由表配置
    linux下ip命令用法
    Ajax与Comet
    JavaScript之JSON
    Mustache学习
    微信小程序环境搭建
    JavaScript之模仿块级作用域
    JavaScript之call()和apply()方法详解
    JavaScript引用类型之Array数组之强大的splice()方法
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/5153815.html
Copyright © 2020-2023  润新知