This week learning to achieve a tab, but involves the entire js function to improve, so will not be described today. Mainly on the following two points: positioning and gradient line
positioning: position: fixed / relative / absolute ; are fixed relative and absolute foregoing has about notes.
Overflow ellipsis (three primary hereinafter in conjunction):
overflow: hidden;
text-overflow: Eclipse;
White Space-: NoWarp;
gradient line
:: before / After ::
{
Content: "";}
linear-gradient (270deg, red, yellow, green, pink) linear gradient
following is a code on the knowledge of my own writing, for reference
html code below
to the right positioning
<! DOCTYPE html>
<html>
<head lang = "EN">
<Meta charset = "UTF-. 8">
<title> </ title>
<Link the rel = "this stylesheet" the href = "../ CSS / comment.css" />
<Link the rel = "this stylesheet" = the href "../ CSS / index.css" />
<Link the rel = "this stylesheet" the href = "../ CSS / font / iconfont.css" />
</ head>
<body>
<div class = "right the -fixed ">
<UL>
<Li> <a href=""> jingdong spike </a> </ Li>
<Li> <a href=""> <IMG the 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);
}
relates to the following pictures, pictures and effects
