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

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

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

代码：

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

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。