星空网 > 软件开发 > 网页设计

应用越来越广泛的css伪类

说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的。但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码量。开发网页代码的效率也极大提高,今天我就跟大家分享一下学习css伪类的一些小经验.


对于开始接触css的朋友来说,在看其他人的代码的时候会经常看到 :hover,:foucs,:before,:after等相关代码,其实这些就是css伪类代码。简单来说应用css伪类就是增加了一个块。

接下来我们看一下伪类到底有哪些,并且各自有哪些用:

1.锚伪类:

a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

相信后面的注释的应该能看见吧,这个相对简单一点就不详解了

2.:before,:after:

这个是我们今天要说的重点,而事实上很多的非常精美的css动画都是离不开这两个元素的。 举例:

:before是在该类名前面加一个块。那么:after是在该类名后面增加一个快元素

例如  html:

we are famliy

css:  .a{color:#fff;}

.a:before{

content:"";

width:30px;

height:30px

position:absoulate;

}

该例中就是在文本前面增加了一个宽为30px,高为30px;的一个空白快  这里面要说的是在伪类里面

对于元素的位置定位绝对是absoulate。不能是其他的,你可以控制left:或者top 定位它的位置

content可以向快里面增加内容,图片,文字等等。如果不需要的话。content:“”;为空。但是代码不能省略。

下面给大家一些真实的案例供大家理解

   

  • Home
  • About
  • Work
  • Contact

得到的效果如图;

应用越来越广泛的css伪类







原标题:应用越来越广泛的css伪类

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

HIP2SAVE:https://www.ikjzd.com/w/1602
Dealdoktor_德国折扣网:https://www.ikjzd.com/w/1603
Sparblog_德国销售折扣网:https://www.ikjzd.com/w/1604
Dealbunny:https://www.ikjzd.com/w/1605
2Checkout_支付商_数字商务:https://www.ikjzd.com/w/1606
柠檬树:https://www.ikjzd.com/w/1607
浏阳市里面哪里好玩的地方 浏阳市内有什么好玩的地方:https://www.vstour.cn/a/404233.html
你心目中的十大旅游景点有哪些?:https://www.vstour.cn/a/404234.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流