第一题 【CSS3的基本用法之按钮】
网站实现如下内容:
(1)包含1个网页。(1分)
(2)完成一个60*20px的区域,作为按钮(1分)
a) 按钮四角为圆角(1分)
b) 用阴影做出按钮立体效果(1分)
c)光标形状改为手形(1分)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.button{
width:60px;
height: 20px;
border: 1px solid #ccc;
border-radius: 14px;
box-shadow: 1px 1px 14px rgb(44, 42, 42);
background-color: cornflowerblue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="button">
</div>
</body>
</html>
第二题 【CSS3的基本用法之图片边框显示】
网站实现如下内容:
(1)包含1个网页,一个图片。(1分)
(2)光标停留在图片上,1s钟时间,出现浅蓝色边框(1分)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
border: 4px solid #fff;
border-radius: 12px;
transition: border 1s ease;
}
img:hover{
border: 4px solid rgb(114, 210, 255);
}
</style>
</head>
<body>
<img src="http://img1.imgtn.bdimg.com/it/u=1216473521,352427174&fm=26&gp=0.jpg" alt="" srcset="">
</body>
</html>