圆角属性的应用----精品套装作业的完整代码

最新推荐文章于 2024-08-29 09:00:00 发布

liliming86575513

最新推荐文章于 2024-08-29 09:00:00 发布

阅读量195

点赞数 1

分类专栏：作业代码文章标签：圆角属性的应用 hover滑入

本文链接：https://blog.csdn.net/liliming86575513/article/details/89440060

版权

作业代码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在下面这张图的前提下,当鼠标滑入后产生出第二张图片的效果.

这个作业的完整代码如下:

<!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>