zoukankan      html  css  js  c++  java
  • 1114.实战移入切换 Walker

    实战移入切换

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>移入切换</title>
    		<link rel="stylesheet" type="text/css" href="../reset.css"/>
    		<style type="text/css">
    			.box{
    				 404px;height: 304px;border: 2px solid black;margin: 50px auto;position: relative;
    			}
    			.zxw{
    				 100px;height: 40px;text-align: center;color: white;
    			}
    			.zxw .top{
    				 100%;height: 100%;line-height: 40px;cursor: pointer;
    			}
    			.zxw .bot{
    				 400px;height: 258px;line-height: 258px;
    				position: absolute;left: 0;top: 42px;
    			}
    			.zxw:hover .bot{
    				z-index: 9;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div class="box">
    			<div class="zxw fl">
    				<p class="top" style="background: red;">1</p>
    				<p class="bot" style="background: red;z-index: 1;">1</p>
    			</div>
    			<div class="zxw fl">
    				<p class="top" style="background: green;">2</p>
    				<p class="bot" style="background: green;">2</p>
    			</div>
    			<div class="zxw fl">
    				<p class="top" style="background: blue;">3</p>
    				<p class="bot" style="background: blue;">3</p>
    			</div>
    			<div class="zxw fl">
    				<p class="top" style="background: orange;">4</p>
    				<p class="bot" style="background: orange;">4</p>
    			</div>
    		</div>
    	</body>
    </html>
    

      

  • 相关阅读:
    文字列をバイトで切る
    把SmartForm转换成PDF
    相对布局和网格布局
    帧布局和表格布局
    计算器布局
    课堂总结和练习
    Android UI组件
    2层导航
    导航
    课堂总结
  • 原文地址:https://www.cnblogs.com/yangqian666/p/15590565.html
Copyright © 2011-2022 走看看