html设置某一行的字号为10px,1+x 证书 Web 前端开发初级实操考试（试卷 10 ）

本文编写于 319 天前，最后修改于 251 天前，其中某些信息可能已经过时。

1+x 证书 Web 前端开发初级实操考试(试卷 10 ) 

共 55 道题 总分：200 分 形考总分：0 分

一、单选题共 30 题，60 分

1. 以下说法正确的是： DAtable 的表单标签

Btd 的代表行

Ctr 代表列

Dtable 是表格标签

2. 在 javascript 中，执行结果正确的是： BAtypeof (null) 的结果为 null

Btypeof (typeof (5)) 的结果为 "string"

Ctypeof (5) 的结果为 Number

Dtypeof (typeof (undefined)) 的结果为 undefined

3. 让一个动画名为 fade 的动画持续执行并且在第一次开始时延迟 0.5s 开始，每次动画执行 1s，以下代码正确的是 AAanimation:fade 1s 0.5s infinite

Banimation:fade 0.5s 1s infinite

Canimation:fade 1s 0.5s linear

D 以上都不正确

4.CSS3 中可以用()关键词，自定义字体代表小图标 CAtransition

Btransform

Cfont-face

Dfont-family

5. 在 javascript 中，执行后输出的结果是： Bvar name="zhaonan"; var obj1={ name:"miao", age:20, say:function(){ console.log(this.name); } } var obj2={ name:"xue", age:30, say:function(){ console.log(this.name); } } var f=obj2.say; console.log(f()); var e=f.bind(obj1); console.log(e()); var k=e.bind(obj2); console.log(k());Azhaonan zhaonan miao

Bzhaonan miao miao

Czhaonan miao xue

Dmiao zhaonan xue

6. 不是 HTML5 的新增的特性是： DA 新增了很多语义化标签

B 新增了音频和视频

C 新增了本地存储

D 新增伪类

7.css 样式初始化的原因描述错误的是： CA 清除默认样式

B 由于浏览器的内核不同，对标签的默认样式解析不同，导致显示效果不同，所以需要初始化样式

C 和浏览器没有关系，只是规范而已

D 保证各个浏览器页面效果的一致性

8. 在 jquery 中，常用的 stop ()，关于 stop () 的说法错误的是 DAstop () 停止当前动画，后续动画继续执行

Bstop (true) 是停止当前动画，后续动画不执行

Cstop (true,true) 是停当前执行的动画，直接跳到当前动画的最终状态，后续动画不执行

Dstop (true,true) 是停当前执行的动画，直接跳到当前动画的最终状态，后续动画继续执行

9. 在 javascript 中，关于数学对象说法正确的是: CAMath.round (4.5) 的结果是 4

BMath.floor (4.5) 的结果是 5

CMath.ceil (4.5) 的结果是 5

DMath.min (3,4,5) 的结果是 5

10. 对于 addEventListener 绑定事件的说法错误的是 CA 可以给一元素绑定多个事件

BaddEventListener 中的 this 指绑定的元素

Cdiv.addEventListener ("click",function (),false) 中的 false 代表捕获事件

Ddiv.addEventListener ("click",function (),false) 中的 false 代表冒泡事件

11. 对闭包的理解说法错误的是： AA 闭包不能避免全局污染

B 闭包可以将内部函数保存到外部的时候

C 可以从外部访问内部变量

D 闭包把外部变量保存到内存中不被释放，导致内存泄漏。

12. 设置一个 div 元素的外边距为上：20px, 下：30px, 左：40px, 右：50px，下列书写正确的是：DApadding:20px 30px 40px 50px;

Bpadding:20px 50px 30px 40px;

Cmargin:20px 30px 40px 50px

Dmargin:20px 50px 30px 40px

13. 块级元素说法正确的是： BA 块级元素和其他元素在一行显示

B 块级元素对宽和高，边距生效

C 块级元素对宽和高生效，边距不生效

D 块级元素对宽，高，边距都不生效

14. 关于 jQuery 中删除已有元素的方法说法正确的是() CAremove () 从被选元素中删除子元素

Bremove () 删除被选元素(不会删除其子元素)

Cempty () 从被选元素中删除子元素

Dempty () 删除被选元素及其子元素

15. 在 jquery 中，下列哪一个是用来查找表单中所有隐藏元素的 BAvisible

Bhidden

Cvisible()

Dhidden()

16. 设置文字的大小为 14px，加粗，行高为 28px，字体是微软雅黑，字体是倾斜的，以下书写正确的是：DAfont:14px "微软雅黑" 28px 600 italic

Bfont:"微软雅黑" 14px/28px 600 italic

Cfont:14px/28px 600 "微软雅黑" italic

Dfont:600 italic 14px/28px "微软雅黑"

17. 在 javascript 中，数据类型转换正确的是： AANumber ("123abc") 的值为 NaN

BparseInt ("123abc") 的值为 NaN

CparseInt ("10",8) 的值为 10

DparseFloat ("abc123.3") 的值为 123.3

18. 对于事件流说法错误的是：CA 事件流分为三个阶段

B 事件流分捕获阶段、目标节点、冒泡阶段

C 捕获和冒泡同时存在先执行冒泡阶段

D 目标阶段存在捕获和冒泡，按顺序执行

19. 在开发过程中，图片下面有 1 像素的小间隙，如何去除： BA 给图片设置 font-size:0

B 给图片设置 display:block

C 给图片设置 border:0

D 给图片设置 border:none;

20.css3 中的伪类 div p:nth-of-type (3){color:red} 的说法正确的是：BA 给 div 元素的第三个子元素设置文字颜色为红色

B 给 div 元素的后代元素的第三个 p 元素设置文字颜色为红色

C 给 div 的后代元素 p 设置文字颜色为红色

D 以上说法都不正确

21. 在 jquery 中，下列哪一个是用将 $(“

Bappend()

CappendTo()

Dafter()

22.Jquery 中，找到所有子元素的方法是： CAfind()

Bsiblings()

Cchildren()

Dparent()

23. 在 javascript 中，下列转 Boolean 后值为 false 的是： BABoolean(" ")

BBoolean(0)

CBoolean([])

DBoolean({})

24. 设置背景颜色为 green, 背景图片垂直居中显示，背景图片充满整个区域，但是背景图片不能变形，图片只出现一次，以下书写正确的是： A- *A*background:url("../img/img1.jpg") no-repeat center/cover green;

- *B*background:url("../img/img1.jpg") repeat center/cover green;

- *C*url("../img/img1.jpg") no-repeat center/100% green;

- *D*url("../img/img1.jpg") no-repeat center/100% 100% green;

25.css3 中用什么来定义过渡动画的时间 C

Atransition-property

Btransition-timing-function

Ctransition-duration

Dtransition-delay

26. 在 javascript 中，获取今天是星期几的方法是： C

Anew Date().getDate()

Bnew Date().getTime()

Cnew Date().getDay()

Dnew Date().getFullYear()

27. 在 javascript 中，执行下列代码后输出的结果是： if (function (){}){ console.log (1); } else { console.log (2); } B

A2

B1

C 什么也不输出

D 报错

28. 下列属于内联元素的是： B

Adiv

Ba

Cp

Dtable

29. 在 javascript 中，执行下列代码输出的结果是： console.log (+"5"*2+"6"-"4"+true) B

A13

B103

C104

D12true

30. 在 javascript 中，执行下列代码输出的结果是： for (var i=0;i<4;i++){ console.log (i) } console.log (i) A

A0 1 2 3 4

B0 1 2 3 4 5

C0 1 2 3

D4 4 4 4

二、多选题共 15 题，30 分

1. 关于 @media 书写正确的是： AB

A@media screen and (max-width: 300px)

B@media only screen and (max-width: 500px)

C@media screen (max-width: 500px)

D@media (max-width: 500px)

2. 关于选择器优先级正确的是： AC

Aid 选择器 > 类选择器 > 标签选择器

Bid 选择器 >!important > 类选择器 > 标签选择器 > 通配符

C!important>id 选择器 > 类选择器 > 标签选择器

Did 选择器 > 类选择器 > 标签选择器 >!important

3. 关于 doctype html 说法正确的是： BC

A 区分大小写，只有 才是正确的

B 这句话的作用是告诉浏览器以什么标准去解析网页

C 这句话可以省略，省略后页面呈怪异模式

D 以上说法都正确

4.javascript 中，关于 parseInt () 说法正确的是： AB

A 将其他类型的数据转成数值

B 可以将其他进制的数据转成十进制

CparseInt () 与 Number () 方法功能相同

D 以上说法都正确

5. 下列属于 jquery 选择器的是： ABCD

A 基本选择器

B 层级选择器

C 属性选择器

D 位置选择器

6. 下面哪几种是 Jquery 中表单的对象属性： ABD

A:checked

B:enabled

C:hidden

D:selected

7. 引入样式的方法有哪几种 ABCD

A 内联样式

B 内部样式

C 外部样式

D 以上都正确

8. 在 form 标签中，属性 method 的值有哪些 BC

Arequest

Bget

Cpost

D 以上都正确

9. 以下关于标签的嵌套书写错误的是： ABCD

- *A*

- *B*

- *C*

- *D*以上都是错误的

10.javascript 中，循环语句有哪些？ BCDAif

Bwhile

Cdo while

Dfor

11.javascript 中，下列结果为 NaN 的是： ABCDANumber("adfa")

BparseInt("undefined")

CparseInt("null")

DparseInt("")

12.javascript 中，下列表达式结果为 true 的是： BCDA[]==[]

B![]==false

C[]==false

D[0]==false

13. 下列对于 float 属性的特点说法错误的是： ABCAfloat 能向左和向右移动，也可以上下移动

Bfloat 会占据原有空间

C 清除浮动的作用不大，可以省略

D 给父级元素设置 height 可以清除浮动

14.jQuery 中遍历节点的方法，正确的是 ABDAnext () 取得匹配元素后面紧邻的同辈元素

Bprev () 取得匹配元素前面紧邻的同辈元素

Csiblings () 取得匹配元素前的所有同辈元素

Dparent () 取得元素的父级元素

15. 以下属于 HTML5 新标签的是： BCDAtitle

Bouput

Cnav

Daside

三、判断题共 5 题，10 分

1.jquery 中获取元素宽度包含 padding 的方法是 innerwidth () 对A 对

B 错

2. 在 javascript 中，this 都指向调用者 错A 对

B 错

3.html 是一种超文本标记语言 AA 对

B 错

4. 在 javascript 中，document.getElementById 返回一组元素 错A 对

B 错

5.CSS 中设置字符间距的是 word-spacing 错A 对

B 错

四、客观填空题共 5 题，100 分

1. 阅读下列说明、效果图和 HTML 代码，进行静态网页开发，填写(1)至(20)代码。

【说明】

这是资源管理平台，用 html+css 完成。

项目包含首页 index.html、css 文件夹、img 文件夹，其中，css 文件夹包含 base.css 文件；img 文件夹包含用到的图片。

请根据效果图和已提供的代码，补全(1)-(20)中的代码。

【效果图】

index.html 在 PC 端效果如图所示。

【素材】素材.zip【代码：首页index.html】

1

2

="UTF-8">

资源中心-首页

<

3

href="css/base.css" rel="

4

">

• 5

  ="#">平台首页

• 个人中心
• 我的主页
• 学习中心
• 资源中心

<

6

7

="img/xiaobiao_img3.jpg">

• 

• 李凤鸣同学1

• 

• 

【代码：CSS文件base.css】

@charset "utf-8";

/* CSS Document */

/*样式重置*/

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,hr,span,form,fieldset,table,td,img,div,dl,dt,dd,input{

margin:0;

padding:0;

8

;/*清除列表样式*/

}

body,html{

9

:"Microsoft YaHei";/*设置字体*/

font-size: 14px;

}

a{

10

;/*去掉下划线*/

}

img{

border:none;

display:block;

margin: 0 auto;

}

input,select,textarea{

outline:none;

border:none;

background-color:

11

;/*设置背景透明*/

}

input:focus {

outline: none;

}

textarea{

12

;/*阻止手动改变文本框大小*/

}

/*清除浮动*/

.clearfix:after{

content:"";

display:block;

clear:both;

}

.fl{

float:left;

}

.fr{

float:right;

}

/*头部样式*/

.top{

width:100%;

margin:0;

padding:0;

height:60px;

background-color:#FFCF4E;

13

;/*设置固定定位*/

14

: 9999;/*设置层级*/

}

.top_conten{

width:1200px;

margin:0 auto;

15

;/*设置相对定位*/

}

.top_nav ul{

margin-left: 0px;

}

.top_nav ul li{

position:relative;

float: left;

text-align: center;

color: #383337;

font-size: 16px;

16

: 40px; /*设置行高*/

padding-top: 7px;

margin: 0 15px;

}

.top_nav ul li a{

color: #383337;

}

.top_nav ul .cur{

border-bottom: 1px solid #383337;

}

.top_nav ul .cur a{

color:#383337;

}

.top_nav span{

display:inline-block;

position:absolute;

bottom:-1px;

left:50%;

margin-left:-35px;

width:70px;

height:1px;

background:#383337;

overflow:hidden;

17

:

18

(0);/*放大*/

}

.top_nav ul li:hover span{

transform:scale(1);

19

:all .5s ease;/*设置过渡时间*/

}

.top_secher{

margin-top:18px;

border:none;

width: 0;

line-height: 24px;

height: 24px;

border-radius: 13px;

text-align: left;

transition: all .5s ease;

}

.top_secher img{

margin-left: 4px;

margin-top: 3px;

width: 19px;

display:block;

float: left;

}

.top_secher input{

width: 120px;

float: left;

margin-left: 28px;

line-height: 24px;

position: absolute;

}

.top .open{

width: 158px;

border: 1px solid #343434;

transition: all .5s ease;

}

.top_info ul li{

float:left;

margin:0 10px;

height:46px;

margin-top:7px;

display:table;

line-height:46px;

position:relative;

}

.top_info ul li > div{

display:table-cell;

vertical-align:middle;

text-align: center;

cursor:pointer;

}

.top_info ul li span{

background-color: #FF4A1F;

border: 1px solid #fff;

color: #fff;

padding: 0 4px;

font-size: 12px;

line-height: 15px;

top:3px;

left: 68px;

position: absolute;

20

: 50%;/*设置圆角*/

}打开解析

(1)

(2)charset

(3)link

(4)stylesheet

(5)href

(6)img

(7)src

(8)list-style: none

(9)font-family

(10)text-decoration: none;

(11)transparent

(12)resize:none;

(13)position: fixed

(14)z-index

(15)position:relative

(16)line-height

(17)transform

(18)scale

(19)transition

(20)border-radius阅读下列说明、效果图和 HTML 代码，进行静态网页开发，填写(1)至(10)代码。

【说明】

这个某项目中的其中一部分，应用 HTML5 和 css3 技术完成页面的布局。项目包含主页 index.html、style.css 和 img。要求鼠标经过翻转出现遮罩层，根据效果图和已有的代码补全(1)-(10)的代码

【效果图】

【素材】素材.zip

【代码：主页 index.html】此页代码在此省略，请在 “实操代码” 中第二题查看

【代码：style.css】.clearfix:after{

display:block;

content:'';

1

;/*清除浮动*/

}

.clearfix{

zoom:1;

2

;/*文字居中*/

}

.fl{

float:left;

}

.fr{

float:right;

}

.part5 .tBox{

width: 1154px;

height: 430px;

margin: 30px auto 0;

position: relative;

}

.part5 .tBox .picBox{

width: 1000px;

margin: 0 auto;/*盒子居中*/

height: 100%;

3

;/*溢出隐藏*/

position: relative;

}

.part5 .tBox .picBox .roll{

position: relative;

margin-right: 24px;

perspective: 1000px;

4

;/*鼠标经过变小手状态*/

}

/*最后一个元素*/

.part5 .tBox .picBox .roll:last-child{

margin-right:0;

}

.part5 .tBox .picBox li .bg{

width: 100%;

height: 65px;

background:

5

; /*背景黑色透明80%*/

position: absolute;

left: 0;

bottom: 0;

}

.part5 .tBox .picBox li h3{

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 65px;

text-align: left;

padding-left: 13px;

}

.part5 .tBox .picBox li .tName{

font-size: 18px;

color: #fff;

padding-top: 13px;

margin-bottom: 5px;

}

.part5 .tBox .picBox li .tTitle{

font-size: 12px;

color: #b4b4b4;

}

.roll .box-content{

width: 100%;

height: 480px;

position: absolute;

top: 0;

left: 0;

background: rgba(0,0,0,.8);

transform:

6

;/*Y轴旋转90度*/

transition: all 0.50s ease-in-out 0s;/*过渡效果*/

overflow: hidden;

}

.roll .box-img{

transform: rotateY(0);

transition: all 0.50s ease-in-out 0s;/*过渡效果*/

}

.roll:hover .box-img{

transform:

7

;/*Y轴旋转-90度*/

}

.roll:hover .box-content{

transform:

8

;/*Y轴旋转0度*/;

}

.roll .box-content .t1{

font-size: 20px;

9

: bold;/*文字加粗*/

color: #fff;

padding-top: 50px;

}

.roll .box-content .t2{

font-size: 16px;

color: #fff;

padding-top: 12px;

}

.roll .box-content .t3{

width: 190px;

height: 1px ;

background: #fff;

margin: 20px auto 0;

}

.roll .box-content .t4{

font-size: 14px;

width: 182px;

10

;/*文字两端对齐*/

color: #fff;

margin: 20px auto 0;

}打开解析

(1)clear:both

(2)text-align: center

(3)overflow: hidden

(4)cursor: pointer

(5)rgba(0,0,0,.8)

(6)rotateY(90deg)

(7)rotateY(-90deg)

(8)rotateY(0)

(9)font-weight

(10)text-align: justify阅读下列说明、效果图和代码，用 jquery 完成指定功能。

【说明】

先要完成一个通讯录，在需要添加人员的时候，点击 “添加行”，当点击删除的时候，序号需要重新排序。同时为了提高用户体验，需要用 js 实现隔行换色。请根据现有的代码和效果图补全代码(1)-(10)

【效果图】

【素材】素材.zip【index.html】

通讯录

2

="center">

<

3

>通讯录

序号姓名电话操作

1张三13754448888

删除

2李四13788889999

删除

添加一行

【style.css】

.box{

width: 400px;

margin:30px auto;

text-align: center;

}

.box>button{

width: 100%;

height: 40px;

margin-top:20px;

border:none;

border-radius: 10px;

background-color: green;

color:#fff;

}

table{

width:400px;

text-align:center;

/*边框重叠*/

4

;

}

table caption{

height: 60px;

line-height: 60px;

font-weight: 600;

}

table th{

background-color: #f5f5f5;

}

table,td,th{

border:1px solid #ccc;

}

table tr{

height:50px;

}

【index.js】

$(function(){

// 添加行 绑定点击事件

$(".add").

5

(function(){

var newTr=$("

");

for(i=0;itr>th").length;i++){

newTd=$("

");

if(i==0){

newTd.text($("tbody>tr").length+1);

}

if(i==$("thead>tr>th").length-1){

//设置标签内容

newTd.

6

("删除")

}

//追加节点

newTd.

7

(newTr);

};

$("tbody").append(newTr);

changeColor();

})

// 隔行换色

function changeColor(){

$("tbody tr:odd").css("background","#f5f5f5");

$("tbody tr:even").css("background","#fff");

}

changeColor();

// 删除行

$("tbody").

8

("click","button",function(){

$(this).parents("tr").remove();

changeColor();

order();

});

//重新排序

function order(){

$("tbody tr").

9

(function(index){

$(this).children().eq(0).text(

10

);

});

}

})打开解析

(1)js/jquery.min.js

(2)align

(3)caption

(4)border-collapse: collapse

(5)click

(6)html

(7)appendTo

(8)on

(9)each

(10)index+1

4. 阅读下列说明，用 javascript 编写程序。填写(1)至(10)代码。

【说明】

在某项目中，在首页需要实现左右轮播的效果图，要求用 javascript 完成，根据已经提供的代码，补全(1)-(10)位置上的代码。

【效果图】

【素材】素材.zip

【index.html】

布局结构如下代码，并将样式引入。

第三题-无缝轮播

• 
• 
• 
• 
• 

【style.css】

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,dl{

margin:0;

padding:0;

}

ul,ol{

list-style:none;

}

img{

display:block;

}

.clear:after{

content:"";

display:block;

clear:both;

}

.banner{

position:relative;

width:100%;

overflow:hidden;

}

.banner ul{

position:relative;

width:500%;

}

.banner ul li{

width:20%;

float:left;

}

.banner ul li img{

width:100%;

}

#left,#right{

position:absolute;

top:50%;

margin-top:-25px;

width: 50px;

height:50px;

cursor:pointer;

background-color: rgba(0,0,0,0.4);

}

#left{

left:0;

}

#right{

right:0;

}

#left:hover,#right:hover{

background-color: rgba(0,0,0,0.8);

}

#pageNav{

position: absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

}

#pageNav a{

display:inline-block;

margin:0 5px;

width:15px;

height:15px;

background-color: #fff;

border-radius:50%;

}

#pageNav a.cur{

background-color: orange;

}

【index.js】

// 获取元素

//(1)根据标签获取元素

var banner=document.getElementById("banner"),

ul=banner.

1

("ul")[0],

li=ul.getElementsByTagName("li"),

leftBtn=document.getElementById("left"),

rightBtn=document.getElementById("right"),

pageNav=document.getElementById("pageNav"),

index=0,

timer=null,

animate=false;

// 追加小圆点

for(var i=0;i

//创建元素

var pageA=

2

("a");

if(i==0){

//设置类名

pageA.

3

="cur";

}

//追加节点

pageNav.

4

(pageA);

}

// 给小圆点绑定点击事件

var aBtn=pageNav.getElementsByTagName("a");

for(var j=0;j

//记录索引值

5

;

aBtn[j].οnclick=function(){

if(animate){

return

}

//计算偏移量

var offset=

6

;

//传参-当前点击对象的索引值

btnShow(

7

);

imgShow(offset);

index=this.index;

}

}

// 小圆点点亮

function btnShow(num){

for(var i=0;i

aBtn[i].className="";

}

aBtn[num].className="cur";

}

// 切换图

function imgShow(offset){

animate=true;

var speed=offset/10;

var newLeft=parseInt(ul.style.left)+offset;

var go=function(){

if(speed<0&&parseInt(ul.style.left)>newLeft || speed>0 && parseInt(ul.style.left)

ul.style.left=parseInt(ul.style.left)+speed+"%";

//延时计时器

8

(go,50);

}else{

ul.style.left=(index+1)*(-100)+"%";

animate=false;

}

}

go();

}

// 给左右箭头绑定点击事件

leftBtn.οnclick=function(){

if(animate){

return

}

index--;

if(index<0){

index=aBtn.length-1;

}

btnShow(index);

imgShow(100);

}

rightBtn.οnclick=function(){

if(animate){

return

}

index++;

if(index==aBtn.length){

index=0;

}

btnShow(index);

imgShow(-100);

}

// 自动轮播

function lunbo(){

rightBtn.onclick();

}

timer=setInterval(lunbo,3000);

// 鼠标经过Banner区域清除计时器

banner.οnmοuseοver=function(){

9

;

}

// 鼠标离开继续自动轮播

banner.

10

=function(){

console.log(1);

timer=setInterval(lunbo,3000);

}打开解析

(1)getElementsByTagName

(2)document.createElement

(3)className

(4)appendChild

(5)aBtn[j].index=j

(6)(this.index-index)*(-100)

(7)this.index

(8)setTimeout

(9)clearInterval(timer)

(10)onmouseout

5. 阅读下列说明、效果图和代码，完成移动端布局。

【说明】

在某项目中，项目中的文件包含 index.html、style.css 和 images 文件夹。请根据现有的代码和效果图补全代码(1)-(5)

【效果图】

【素材】素材.zip

【index.html】

在线公开课学习app

临床学院

科研学院

医考学院

科员学院

精品推荐

从基础到实战：全面讲解补液

￥215.00 新课特惠 ￥398

Meta 分析零基础的实用教程

￥215.00 ￥398

脊柱MRI进阶指南 分析零基础的实用教程

￥215.00 新课特惠 ￥398

从基础到实战：全面讲解补液

￥215.00￥398

【style.css】

html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, textarea, th, td {

margin: 0;

padding: 0;

}

html,body {

color: #333;

margin: 0;

height: 100%;

font-family: '微软雅黑';

font-weight: normal;

}

* {

box-sizing: border-box;

}

a {

text-decoration: none;

color: #000;

}

img {

width: 100%;

height: auto;

display: block;

border: 0;

}

body {

background: #fff;

color: #666;

}

ul,ol{

list-style: none;

}

.clearfix::after {

clear: both;

content: "";

display: block;

}

.header{

height: 44px;

position: relative;

display: flex;

z-index: 102;

background:#fefefe;

}

.header .center{

-webkit-box-ordinal-group: 3;

1

;/*设置弹性盒子*/

justify-content: center;

align-items: center;

height: 44px;

width: 90%;

margin-left: 4%;

}

.search-box {

background: #ededed;

border-radius: 22px;

position: relative;

width: 100%;

margin: 0 auto;

height: 32px;

}

.icon-search {

position: absolute;

background-image: url("../images/index.png");

left: 8px;

top: 0.4rem;

background-size: 19px;

}

.search-box input {

width: 100%;

background: none;

border: none;

font-size: 0.85rem;

text-align: left;

height: 32px;

border-radius: 3px;

padding: 0.55rem 0 0.55rem 1.8rem;

}

.scrollView {

width: 100%;

height: 100%;

2

;/*剩余空间全部分给该盒子*/

overflow-y: auto;

overflow-x: hidden;

position: relative;

padding-bottom: 53px;

}

.slider-wrapper {

display: flex;

width: 96%;

margin:0 auto;

transform: translate3d(0px, 0px, 0px);

position: relative;

z-index: 1;

padding:0.55rem;

}

.slider-wrapper img {

width: 100%;

height: auto;

display: block;

border: none;

}

.item {

width: 96%;

margin:0 auto;

padding: 0.5rem;

position: relative;

overflow: hidden;

display: flex;

justify-content: space-between;

}

.palace-grid .palace-grid-icon{

width: 40px;

height: 40px;

margin:0 auto;

}

.palace-grid .palace-grid-text {

display: block;

text-align: center;

color: #333;

font-size: 0.85rem;

3

;/*阻止换行*/

4

;/*文字溢出显示省略号*/

overflow: hidden;

padding-top: 0.2rem;

}

.palace-grid .palace-grid-text h2 {

font-size: 0.8rem;

font-weight: normal;

color:

#666666;

}

.flex {

display: flex;

align-items: center;

padding: 15px;

position: relative;

}

.flex h1 {

flex: 1;

min-width: 0;

font-size: 14px;

color: #333;

}

.list-theme{

width: 96%;

margin:0 auto;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.list-item {

width: 46%;

margin: 0 2% 2% 2%;

background: #fff;

display: block;

overflow: hidden;

}

.list-theme-message {

background:

#fff;

padding: 0.3rem 0;

}

.list-theme-title {

color: #333;

font-size: 0.92rem;

margin: 0.2rem 0;

overflow: hidden;

font-weight: normal;

white-space: nowrap;/*阻止换行*/

text-overflow: ellipsis;/*文字溢出显示省略号*/

}

.list-theme-message p {

color: #f68f40;

font-size: 0.99rem;

font-weight: 500;

height: 1.5rem;

}

.list-theme-message p i {

font-style: normal;

font-size: 0.7rem;

border: 1px solid

#f68f40;

border-radius: 2px;

padding: 0 0.2rem;

}

.list-theme-message p em {

font-style: normal;

font-size: 0.7rem;

padding: 0 0.2rem;

color: #999999;

5

;/*删除线*/

}打开解析

(1)display: flex

(2)flex: 1

(3)white-space: nowrap

(4)text-overflow: ellipsis

(5)text-decoration: line-through

《Web 前端开发》等级考试样题～以国家 “1+X” 职业技能证书为标准，厚溥推出 Web 前端开发人才培养方案

http://blog.zh66.club/index.php/archives/156/

这人还没有写标签哦～