伪类和伪元素 , 轮播 , 媒体查询

简介: a:link /* 未访问的链接 */ a:visited /* 已访问的链接 */ a:hover /* 鼠标划过链接 */ a:active /* 已选中的链接 */注意: (1)在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的 (2)在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。 (3)伪类的名称不区分大小

@TOC

一 伪类和伪元素

1.
a:link / 未访问的链接 /

      a:visited /* 已访问的链接 */
    a:hover /* 鼠标划过链接 */
    a:active  /* 已选中的链接 */

注意:

(1)在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
(2)在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
(3)伪类的名称不区分大小

2.
(1)irst-child :选择第一个子元素

   (2)first-of-type:选择元素中指定类型
   (3)last-child:选择所有p元素的最后一个子元素
   (4)last-of-type:选择每个p元素是其母元素的最后一个p元素
   (5)nth-child():选中指定第几个的子元素


注:

  • ()中可填变量
  • 2n:偶数 == even
  • 2n+1:奇数行 == odd

3.伪元素
(1) first-line:伪元素中的样式对 p 元素的第一行文本进行格式化

注意:"first-line、first-letter" 伪元素只能用于块级元素。

(2)first-letter:伪元素用于向文本的首字母设置特殊样式
(3)before:伪元素可以在元素的内容前面插入新内容
(4)after: 伪元素可以在元素的内容之后插入新内容

二 、轮播

实现图片轮播

1、 有相同大小的多个图片
2、 将展示图片横排放在一个图片容器里面
3、在图片容器外再加一个展示容器,展示容器大小为图片大小
4、给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值

注意:

  • 动画效果分为切换和停l留
  • 自定义动画阶段与图片数量相关
  • 动画各阶段偏移值与图片大小相关

CSS部分

#container {
    width: 500px;
    height: 300px;
    overflow: hidden;
}
#picture {
    width: 1500px;
    animation: switch 5s ease-out infinite;
}
#picture > img {
    float: left;
    width: 400px;
    height: 300px;
}
@keyframes switch {
    0%, 25% {
        margin-left: 0;
    }
    35%, 60% {
        margin-left: -400px;
    }
    70%, 100% {
        margin-left: -800px;
    }
}

HTML部分

<div id="contain">
    <div id="picture">
        <img src="p1.png" />
        <img src="p2.png" />
        <img src="p3.png" />
    </div>
    </div>

三、媒体查询

方法: link标签引入:media属性(eg:引入(screen)彩色屏幕显示,并且最大宽度不超过800px时候的CSS样式)

<link rel="stylesheet" media="screen and (max-width:800px)" href="./demo.css">

1、媒体类型(media type) :常用all,screen,print。
2、逻辑操作符 and:合并多个媒体属性

   <a>eg:@media screen and (min-width: 600px) and (max-width:100px)

注:合并多个媒体属性或合并媒体属性与媒体类型, 一个基本的媒体查询,即一个媒体属性与默认指定的screen媒体类型

四、transform中的scale

scale缩放转换:

1、使用方法:transform:scale(值),他的值是指定的缩放倍率,比如0.5就是缩放50%,1就是缩放100%,1.5就是缩放150%;

2、可能的值:
(1)scale(x,y)使元素X轴和Y轴同时缩放;
(2)scale(x)使元素仅X轴缩放;
(3)scale(y)使元素仅Y轴缩放;

目录
相关文章
|
7月前
|
前端开发
伪类,伪元素有什么,区别是什么
伪类,伪元素有什么,区别是什么
142 0
|
2月前
|
前端开发 JavaScript 开发者
伪类和伪元素
伪类和伪元素是 CSS 中用于扩展选择器功能的两种特性,无需额外的 HTML 标签即可创建复杂的样式规则。
|
3月前
|
JavaScript 容器
哪些标签存在伪元素,伪类和伪元素的区别
哪些标签存在伪元素,伪类和伪元素的区别
|
3月前
|
前端开发
伪类是什么?
伪类是什么?
43 3
|
4月前
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
125 3
|
前端开发 JavaScript
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
128 1
|
7月前
|
前端开发
伪类是什么
伪类是什么。
30 1
|
前端开发
伪类和伪元素的区别?
伪类和伪元素的区别?
|
7月前
伪类
1.没有访问过的链接 ​ 2.访问过的链接
|
前端开发 搜索推荐 容器
伪元素的应用
伪元素的应用
伪元素的应用