据说是Google首页的网页模块拖动代码_布局与层

程序员文章站 2022-04-21 22:30:31

...

.dragDiv,.nodragDiv{ 
position:relative; 
filter:alpha(opacity=100); 
opacity:1; 
margin-bottom:6px; 
background-color:#FFFFFF; 
} 
</style>
<table id="dragTable" cellpadding="3" style=" border:solid 0px green;width:98%;"><tr>
<td valign="top" style="width:30%"> 
<div class="dragDiv" id="dragDiv1"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar1" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on">Title1</th> 
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top">
<td unselectable="on">这里的字比较长....我来了....中国....中国...外国.，看一下有没有溢出></td> 
</tr>
</table>
</div> 
<div class="dragDiv" id="dragDiv2"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on">Title2</th> 
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top">
<td unselectable="on">Content2...</td> 
</tr>
</table>
</div> 
</td> 
<td valign="top" style="width:50%"> 
<div class="dragDiv" id="dragDiv3"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on">Title3</th> 
</tr>
<tr style="height:230px;padding:3px;" align="left" valign="top">
<td unselectable="on">Content3...</td> 
</tr>
</table>
</div> 
</td> 
<td valign="top" style="width:20%"> 
<div class="dragDiv" id="dragDiv4"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on">Title4</th> 
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top">
<td unselectable="on">Content4...</td> 
</tr>
</table>
</div> 
<div class="dragDiv" id="dragDiv5"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on">Title5</th> 
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top">
<td unselectable="on">Content5...</td> 
</tr>
</table>
</div> 
</td> 
</tr></table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

相关标签： Google 网页模块拖动

上一篇：最大子序列和算法分析，子序列算法分析

下一篇：如何让网页中的文字倾斜90度_html/css_WEB-ITnose