css-右侧悬浮固定操作按钮

时间 2018/3/14 16:17:37 加载中...

效果图,右侧操作,位置固定


image.png


代码:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
	.operateBox{
            border: 1px solid #90a3e4;
            position: fixed;
            right: 20px;
            padding: 20px 20px;
            background-color: #e6f4ff;
            text-align: center;
            border-radius:9px;
        }
        .operateBox a{
            display: inline-block;
            width: 81px;
            background-color: #298cd8;
            text-align: center;
            margin: 0 15px;
            color:white;         
            line-height: 2.5em;   
        }

        .operateBox a:hover {
            background-color:#1363a0;
            color:white;
            cursor:pointer;
        }

        .operateBox font{
            display: inline-block;
            width: 81px;
            background-color: gray;
            text-align: center;
            margin: 0 15px;
            color:white;   
            cursor:not-allowed;
        }

        .content{
        	height: 300px;
        	border: 1px solid red;
        }
	</style>
</head>
<body>
	<div class="operateBox">            
	        <a class="" onclick="showView('','pass')">通过</a>
	        <a class="" onclick="showView('','reject')">驳回</a>            
	</div>					
	<div class='content'>这里是内容</div>
	<div class='content'>这里是内容</div>
	<div class='content'>这里是内容</div>
	<div class='content'>这里是内容</div>
</body>
</html>


扫码分享
版权说明
作者:SQBER
文章来源:http://blog.sqber.com/articles/css-fixed-box.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。