一个常见的网页布局和浮动的3种情况
网页布局效果图源代码
帮我设计一下呀，css 实在是太复杂了
整体格局 不动，就是让那些按钮 字体大一些 绝对在div中居中 就可以了
<!DOCTYPE.html>
<html>
<head>
<title> 实时经营信息系统 </title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div {
margin-left: 10%;
margin-top: 4%;
padding-top: 3%;
padding-left: 12%;
font-size: 24px;
}
.s1 {
width: 200px;
height: 100px;
float: left;
border: 1px solid #f00;
line-height: 30px;
}
.s2 {
width: 200px;
height: 100px;
float: left;
border: 1px solid #f00;
}
.s3 {
width: 200px;
height: 150px;
float: left;
border: 1px solid #f00;
}
.s4 {
width: 200px;
height: 150px;
float: left;
border: 1px solid #f00;
margin-left: 10%;
}
.sytle3 {
margin-left: 3%;
vertical-align: middle;
font-size: 24px;
}
</style>
</head>
<body>
<div class="s1">
<button id="denglu" class="style3" type="button"><b>本日首次录入</b></button><br><br>
<button id="xiugai" class="style3" type="button"><b>补录(修改)</b></button>
</div>
<div class="s2">
<button id="chaxun" class="style3" type="button">日报查询 </button><br><br>
<button id="ybchaxun" class="style3" type="button">月报查询 </button>
</div>
<div class="s3">
<button id="xiugaimima" class="style3" type="button"><b>密码修改</b></button>
</div>
<div class="s4">
<button id="rizhicx" class="style3" type="button"><b>日志查询</b></button><br><br>
<button id="zbwh" class="style3" type="button"><b>指标维护</b></button><br><br>
<button id="mimacsh" class="style3" type="button"><b>密码初始化</b></button>
</div>
</body>
</html>
页:
[1]