收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style type="text/css">
.main{background-color: aquamarine; width:100%;height: 500px; float: left;}
.left{width: 300px; height: 500px;float: left; background-color: chartreuse;margin-left: -100%;}
.right{width: 300px; height: 500px;float: right;background-color: blueviolet;margin-left: -100%; }
</style>
</head>
<body>
<div class="main">
主体
</div>
<div class="left">
左
</div>
<div class="right">
右
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广告定位</title>
<style type="text/css">
button[type="button"]{ float: right;}
.box1{height: 200px; width: 200px; background-color: #8A2BE2;position: fixed; bottom: 0; right: 0;}
</style>
</head>
<body>
<div class="box1" id="yincang">
<button type="button" onclick="guanbi()">关闭</button>
</div>
</body>
<script type="text/javascript">
function guanbi(){
document.getElementById("yincang").style.display='none'
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中遮罩</title>
<style type="text/css">
body{margin: 0; padding: 0; background-color: blue; }
.shadow{background-color: black;opacity:0.5;width: 100%;height: 800px;}
.container{width: 800px; height: 800px;position: relative; margin: 0 auto;}
.main{position: absolute;left: 40%;bottom: 40%;margin:auto 0;width: 160px;height:160px;background-color: #7FFF00;}
</style>
</head>
<body>
<div class="container">
<div class="shadow">
<div class="main">
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
