来源 公众号：GDKZZX
试题二（26分）
阅读下列说明、效果图，进行静态网页开发，填写（1）至（13）代码。
【说明】
现接到思极商务有限公司官网页面开发的项目，根据业务需求，需要将业务列表页面的每一个业务以卡片形式展示；同时为提升用户体验，要求实现每个卡片在鼠标经过有旋转和放大效果。
项目名称为goods，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含style.css文件；img文件夹包含icon-img.jpg、icon-img2.jpg、icon-img3.jpg图片。
请使用html+css3完成以下效果，并在对应代码处将空缺代码补全。
【效果图】
（1）图2-1鼠标经过前
（2）图2-2鼠标经过
【代码：首页index.html】
<!DOCTYPE html>
<html>
<head>
<title>第二题</title>
<meta charset="utf-8">
<!-- 根据说明正确导入当前目录下css文件夹中的style.css -->
<link rel="stylesheet" type="text/css" href=" （1） " >
</head>
<body>
<div class="box">
<div class="con">
<ul class="clear">
<li>
<img src="img/icon-img.jpg">
<p>优化速度</p>
<span>更多</span>
</li>
<li>
<img src="img/icon-img2.jpg">
<p>营销分析</p>
<span>更多</span>
</li>
<li>
<!-- 根据上下文填写正确的标签 -->
< （2） src="img/icon-img3.jpg" >
< （3） >SEO和导入链接</p>
<span>更多</span >
</li>
</ul>
</div>
</div>
</body>
</html>
【代码：CSS文件index.css】
/* 注意：此处省略了部分和本题无关的css代码 */
.box .con ul li{
float:left;
background-color: #fff;
width: 380px;
/*设置li边框为圆角15px，文字对齐方式为居中。*/
（4） ： （5） ;
（6） ： （7） ;
overflow: hidden;
}
.box .con ul li:nth-child(2){
margin:0 30px;
}
.box .con ul li img{
margin:50px auto 0;
/*此处设置图片的过渡效果为0.8秒*/
（8） ：0.8s;
}
.box .con ul li p{
/*设置内边距上下为0，左右为15px*/
（9） ： （10） ;
line-height: 140px;
border-bottom:1px solid #ddd;
font-weight: 600;
color:#555;
}
.box .con ul li span{
display: block;
width: 100%;
height:60px;
line-height: 60px;
/*此处设置文字的过渡效果为0.8秒*/
（11） ：0.8s;
}
/*用CSS3的实现鼠标经过图片旋转360度，放大1.3倍，离开再旋转还原。*/
.box .con ul li:hover img{
（12） ： （13） ;
}
.box .con ul li:hover span{
background-color: #f7c324;
font-weight: 600;
}
【问题】（26分，每空2分）
进行静态网页开发，补全代码，在（1）至（13）处填入正确的内容。
【答案】
（1）css/style.css 或者 ./css/style.css
（2）img
（3）p
（4）border-radius
（5）15px
（6）text-align
（7）center
（8）transition
（9）padding
（10）0 15px 或者 0px 15px 或者 0 15px 0 15px 或者 0px 15px 0px 15px
（11）transition
（12）transform
（13）rotate(360deg) scale(1.3) 或者scale(1.3) rotate(360deg)
（每空2分，共26分）
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
