常用组件的写法

1.在页面固定定位的按钮
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* { padding: 0; margin: 0; }
.box1 { width: 400px; height: 300px; box-shadow: 1px 1px 1px 1px #d43f3a inset; }

/*固定按钮的写法*/
.btn_b_fix {
position: fixed;
bottom: 0;
width: 100%;
max-width: 640px;
height: 4.063rem;
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #fff;
border-top: 1px solid #f00;
}
div.btn_b_fix a.btn {
display: inline-block;
width: 82%;
height: 2rem;
line-height: 2rem;
margin: 0.5rem 0 0;
text-align: center;
background-color: #1b6d85;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-size: 1rem;
color: #fff;
}

</style>
<script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body style="position: relative;"><div class="box1"></div>
box-shadow: h-shadow v-shadow blur spread color inset;
<div class="btn_b_fix">
<a class="btn" href="javascript:void(0);">BOTTOM BUTTON</a>
</div>
</body>
</html>
posted @ 2016-03-02 10:39  ifIhaveWings  阅读(205)  评论(0编辑  收藏  举报