图文类网页设计单元测试

一. 多选题 (共9题,45.0分)

  1. (多选题, 5.0分)
    HTML5网页常用的图片标签有( )。
    A <img>标签
    B <figure>标签
    C <figcaption>标签

    D <i>标签

  2. (多选题, 5.0分)
    关于CSS3精灵技术,下面理解正确的是( )。
    A 它的本质是多小张图片拼成一张图片。
    B 是为了提高网页性能而使用它。
    C 当访问该页面时,只需要载入一次图片。
    D 利用“background-image”、“background- repeat”、“background-position”组合进行背景定位,将一张大图片中的某个部分显示到网页的固定位置。

  3. (多选题, 5.0分)
    CSS3中可用于动画制作的属性有( )。
    A transition(过渡)
    B transform(变形)
    C animation(动画)

    D background

  4. (多选题, 5.0分)
    在定义动画时,关键帧选择器用来指定当前关键帧要应用到整个动画过程中的位置值,关键帧选择器可以是( )。
    A 一个百分比
    B from,它和0%效果相同表示动画的开始

    C 任意名称
    D to,它和100%效果相同表示动画的结束

  5. (多选题, 5.0分)
    关于3D变形,以下说法正确的是( )。
    A perspective属性定义3D转换元素的透视视图。
    B perspective函数的参数值是一个代表透视深度的数值。

    C 使用skew函数实现立体效果。
    D 3D变形是指某个元素围绕其x轴、y轴、z轴进行旋转、缩放、平移等变换。

  6. (多选题, 5.0分)
    CSS3的变形属性transform是与动画相关的一个属性,2D形状变换可分为( )几种类型。
    A 旋转
    B 倾斜
    C 缩放
    D 移动

  7. (多选题, 5.0分)
    元素的变形都有一个原点,元素围绕着这个点进行变形或者旋转,有关原点的下述描述正确的有( )。
    A 默认的原点起始位置是元素的中心位置。
    B 使用transform-origin属性指定元素变形基于的原点。
    C transform-origin最多接受三个值,分别是x轴、y轴、z轴的偏移量。

    D z轴的偏移量除了可以给具体的长度值,还可以有其它多种给值方式。

  8. (多选题, 5.0分)
    在设置过渡的语法 {transition:property duration timing-function delay;}中,表述有误的有( )。
    A property:应用过渡的CSS属性的名称,只能取值为none或all。
    B delay:过渡效果开始之前需要等待的时间。
    C duration:过渡效果花费的时间,取任何值都可以看到过渡效果。
    D timing-function:过渡效果的时间曲线。

  9. (多选题, 5.0分)
    关于渐变设置的参数color stop描述正确的是( )。
    A 两个color stop之间的区域为颜色过渡区。
    B color stop用于设置颜色边界。
    C color stop中color为边界的颜色,stop为该边界的位置。
    D stop为百分比且小于0%或大于100%,则表示该边界位于可视区域外。

二. 单选题 (共6题,30.0分)

  1. (单选题, 5.0分)
    CSS3用( )属性来使用已定义好的动画。
    A @keyframes
    B animation
    C transition
    D transform

  2. (单选题, 5.0分)
    CSS3过渡采用( )属性进行设置。
    A linear-gradient
    B radial-gradient
    C border-radius
    D transition

  3. (单选题, 5.0分)
    关于圆角边框,下面描述不正确的是( )。
    A 圆角边框实际上是在矩形的四个角分别做内切圆,通过设置内切圆的半径来控制圆角的弧度。
    B 使用border-radius属性来实现圆角边框设置。
    C 设置半径时,如果没有“/”,则表示水平和垂直半径相等。
    D 设置半径时,“/”前面的表示垂直半径。

  4. (单选题, 5.0分)
    CSS3中的渐变使用( )属性来设置。
    A background-color
    B background-attachment
    C background-image
    D background-position

  5. (单选题, 5.0分)
    CSS3中设置元素(盒子)的阴影使用( )属性。
    A text-shadow
    B shadow
    C border-shadow
    D box-shadow

  6. (单选题, 5.0分)
    关于background属性的默认设置,下面不正确的是( )。
    A background-color为transparent
    B background-repeat为repeat
    C background-attachment为fixed
    D background-image为none

三. 判断题 (共7题,35.0分)

  1. (判断题, 5.0分)
    用@keyframes规则创建动画时,可以不指定动画的名称。
    A 对
    B 错

  2. (判断题, 5.0分)
    径向渐变的圆心坐标默认是在元素的中心(center)。
    A 对
    B 错

  3. (判断题, 5.0分)
    线性渐变与径向渐变一样,颜色都是向着某一个方向逐渐变化。
    A 对
    B 错

  4. (判断题, 5.0分)
    径向渐变默认的渐变形状是椭圆形。
    A 对
    B 错

  5. (判断题, 5.0分)
    线性渐变中side-or-corner参数是通过关键词来确定渐变的方向,默认值为top(从上往下)。
    A 对
    B 错

  6. (判断题, 5.0分)
    HTML页面中,通常坐标系是以参考元素对应的盒子的左上角为坐标原点,水平向右为x轴正方向,垂直向上为y轴的正方向。
    A 对
    B 错

  7. (判断题, 5.0分)
    元素阴影扩展半径为正值,则整个阴影都延展扩大,反之值为负值时,则缩小。
    A 对
    B 错

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
图文混排是一种常见的网页设计方式,可以让页面更加丰富多彩。下面是一个简单的示例代码,供您参考: ```html <!DOCTYPE html> <html> <head> <title>图文混排网页设计</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px; } .img-box { flex: 1 1 300px; margin: 10px; } .img-box img { display: block; width: 100%; } .text-box { flex: 1 1 400px; margin: 10px; text-align: justify; } h2 { margin-top: 0; } p { margin-top: 5px; line-height: 1.5; } </style> </head> <body> <div class="container"> <div class="img-box"> <img src="https://picsum.photos/id/237/300/200" alt="图片"> </div> <div class="text-box"> <h2>标题</h2> <p>这是一段文字,用于介绍图片内容。</p> <p>这是另一段文字,可以继续介绍内容。</p> </div> </div> <div class="container"> <div class="text-box"> <h2>标题</h2> <p>这是一段文字,可以先介绍内容。</p> <p>这是另一段文字,继续介绍。</p> </div> <div class="img-box"> <img src="https://picsum.photos/id/1041/300/200" alt="图片"> </div> </div> </body> </html> ``` 这个示例代码使用了 flexbox 布局来实现图文混排效果。通过在容器(`.container`)上设置 `display: flex;`,使得其中的子元素可以以行或列的方式排列。在子元素(`.img-box` 和 `.text-box`)上设置了 `flex` 属性来控制它们的大小和比例。最后,通过在文本框(`.text-box`)上设置 `text-align: justify;`,让文字两端对齐,使得排版更加美观。 您可以根据自己的需求修改样式,以实现您想要的图文混排效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qing影

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值