圆角属性的应用----精品套装 作业的完整代码
在下面这张图的前提下,当鼠标滑入后产生出第二张图片的效果.
这个作业的完整代码如下:
<!Doctype html>
<lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>81-北极星-圆角应用</title>
<style>
body{
background-color:#ccc;
}
.wrap{
width: 200px;
height: 200px;
background-color: #fff;
margin: 100px auto;
border-radius: 50%;
background: url("images/demo1/7.jpg") no-repeat 0/cover;
/*这里很重要: 不要写成background-image*/
}
.wrap a{
display:none; /*这里很重要.让已经准备好的a 标签显示消失*/
width: 200px;
height: 125px;
background-color: rgb(0 ,0, 0, .6) ;
/*-这里很重要: rgb() 里面的四个数值需要用逗号隔开*/
/*另外,这里是background-color*/
border-radius: 50%;
/*另一种方法: 在上面加一个 over-flow: hidden 溢出隐藏也可以实现消除边角变成圆形*/
padding-top: 75px;
text-align: center;
font-size: 18px;
line-height: 15px;
color: #fff;
/*字体的颜色直接用 color 而不是, font-color 或者其他*/
text-decoration: none;
}
.wrap:hover a {
display: block; /*这里很重要.让消失了的a 标签显示出来*/
}
</style>
</head>
<body>
<div class="wrap">
<a href="">
<p>精品套装</p>
<p>欢迎试用</p>
</a>
</div>
</body>
</html>
前端初学者,欢迎指正!