实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1{height: 7000px;}
a{
display:block;
height: 40px;
width: 180px;
line-height: 40px; /*实现文本居中效果*/
font-size: 22px; /*设置字体大小*/
text-align: center;/*设置居中*/
text-decoration:none;/*取消A标签的下划线*/
}
a:hover{
background-color: #ffa535;
color:#fff;
font-weight: bolder;
font-size: 26px;
}
img{
height: 40px;
vertical-align: top; /*取消图片底部的BUG*/
}
.box1{
width: 180px;
height: 200px;
border: 1px solid #576b67; /*设置边框*/
position: fixed; /*设置右下角的固定定位*/
right: 0;
bottom: 0;
margin-right: 5px; /*设置右边距*/
margin-bottom: 10px;/*设置下边距*/
box-shadow: 2px 2px 2px #576b67;/*设置阴影*/
border-radius: 10px;/*设置弧度*/
}
.box2{
border-top-right-radius: 10px;/*设置弧度*/
border-top-left-radius: 10px;/*设置弧度*/
width: 175px;
height: 40px;
padding-left:5px;
font-size: 30px;
background-color: #253fff;
color: #d1da20;
}
.box1 a:last-child{
border-bottom-right-radius: 10px;/*设置弧度*/
border-bottom-left-radius: 10px;/*设置弧度*/
}
</style>
</head>
<body>
<h1>s</h1>
<div class="box1">
<div class="box2">QQ在线帮助</div>
<a href="">
<img src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/pic/item/4034970a304e251fc50a8bc0aa86c9177f3e530c.jpg" height="100%">
在线帮助一
</a>
<a href="">
<img src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/pic/item/4034970a304e251fc50a8bc0aa86c9177f3e530c.jpg" height="100%">
<span>在线帮助二</span>
</a>
<a href="">
<img src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/pic/item/4034970a304e251fc50a8bc0aa86c9177f3e530c.jpg" height="100%">
<span>在线帮助三</span>
</a>
<a href="" id="item1">
<img src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/pic/item/4034970a304e251fc50a8bc0aa86c9177f3e530c.jpg" height="100%">
<span>在线帮助四</span>
</a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
