linear-gradient(270deg,red,yellow,green,pink) 线性渐变
以下是我自己写的一个关于该知识点的一个代码, 仅供参考
html 代码如下
右边定位
- <!DOCTYPE HTML>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <link rel="stylesheet" href="../CSS/comment.css" />
- <link rel="stylesheet" href="../css/index.css" />
- <link rel="stylesheet" href="../css/font/iconfont.css" />
- </head>
- <body>
- <div class="right-fixed">
- <ul>
- <li>
- <a href="">
- 京东秒杀
- </a>
- </li>
- <li>
- <a href="">
- <img src="../iamge/11.png" alt="" />
- <img src="../iamge/r.png" alt="" />
- </a>
- </li>
- <li>
- <a href="">
- 特色优选
- </a>
- </li>
- <li>
- <a href="">
- 频道广场
- </a>
- </li>
- <li>
- <a href="" class="active">
- 为你推荐
- </a>
- </li>
- <li>
- <a href="">
- <span class="iconfont icon-kefu">
- </span>
- 客服
- </a>
- </li>
- <li>
- <a href="">
- <span class="iconfont icon-kefu1">
- </span>
- 反馈
- </a>
- </li>
- <li>
- <a href="" class="active">
- <span class="iconfont icon-xiangshang">
- </span>
- 顶部
- </a>
- </li>
- </ul>
- </div>
- </body>
- </HTML>
CSS 如下:/ 右边定位 /
- .right-fixed{
- width: 60px;
- height: 464px;
- background:white;
- position: fixed;
- top:30%;
- right:80px;
- z-index: 1;
- overflow: hidden;
- }
- .right-fixed ul li{
- width:60px ;
- height: 58px;
- position: relative;
- padding:10px 15px;
- }
- .right-fixed ul li a{
- font-size:14px;
- color: #333;
- line-height: 19px;
- }
- .right-fixed ul li:hover{
- background:#c81623 ;
- cursor: pointer;
- }
- .right-fixed ul li:hover a{
- color: white!important;
- }
- .right-fixed ul li img{
- position: absolute;
- top:0px;
- left: 0;
- width:60px;
- height:58px ;
- }
- .right-fixed ul li img:last-of-type{
- display: none;
- }
- .right-fixed ul li:hover img:last-of-type{
- display: block;
- }
- .right-fixed ul li span{
- text-align: center;
- display: inline-block;
- width:30px;
- height: 20px;
- }
- .right-fixed ul li a.active{
- color:#c81623 ;
- }
- .right-fixed ul li::after{
- content: "";
- position: absolute;
- top:58px;
- left: 5px;
- right:5px;
- height: 1px;
- width: 50px;
- background: linear-gradient(270deg,#fff,#eee,#fff);
- }
涉及图片和效果图片如下
来源: http://www.bubuko.com/infodetail-3273282.html