艾伦蓝
- 浏览: 599909 次
- 性别:
- 来自: 厦门
-
文章分类
- 全部博客 (669)
- oracle (36)
- java (98)
- spring (48)
- UML (2)
- hibernate (10)
- tomcat (7)
- 高性能 (11)
- mysql (25)
- sql (19)
- web (42)
- 数据库设计 (4)
- Nio (6)
- Netty (8)
- Excel (3)
- File (4)
- AOP (1)
- Jetty (1)
- Log4J (4)
- 链表 (1)
- Spring Junit4 (3)
- Autowired Resource (0)
- Jackson (1)
- Javascript (58)
- Spring Cache (2)
- Spring - CXF (2)
- Spring Inject (2)
- 汉字拼音 (3)
- 代理模式 (3)
- Spring事务 (4)
- ActiveMQ (6)
- XML (3)
- Cglib (2)
- Activiti (15)
- 附件问题 (1)
- javaMail (1)
- Thread (19)
- 算法 (6)
- 正则表达式 (3)
- 国际化 (2)
- Json (3)
- EJB (3)
- Struts2 (1)
- Maven (7)
- Mybatis (7)
- Redis (8)
- DWR (1)
- Lucene (2)
- Linux (73)
- 杂谈 (2)
- CSS (13)
- Linux服务篇 (3)
- Kettle (9)
- android (81)
- protocol (2)
- EasyUI (6)
- nginx (2)
- zookeeper (6)
- Hadoop (41)
- cache (7)
- shiro (3)
- HBase (12)
- Hive (8)
- Spark (15)
- Scala (16)
- YARN (3)
- Kafka (5)
- Sqoop (2)
- Pig (3)
- Vue (6)
- sprint boot (19)
- dubbo (2)
- mongodb (2)
最新评论
<style type="text/css">
html,body{
height:100%;
width:100%;
margin:0px;
min-width: 1200px;
min-height: 600px;
}
.page{
height:100%;
padding-top:35px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.top{
height:35px;
margin-top:-35px;
margin-right:1.5px;
}
.main{
height:100%;
}
.left
{
height:665px;
width:30%;
border: 1px solid #DADADA;
margin-top:2px;
margin-right:2px;
float: left;
}
.right
{
height:665px;
width:69.3%;
border: 1px solid #DADADA;
margin-top:2px;
float: left;
}
.right_top
{
height:50%;
width:100%;
border-bottom: 1px solid #DADADA;
}
.right_bottom
{
height:50%;
width:100%;
margin-top:2px;
border-top: 1px solid #DADADA;
}
.left_top
{
height:30%;
width:100%;
}
.left_bottom
{
height:70%;
width:100%;
}
.left_top_text,.left_bottom_text
{
padding-top:35px;
padding-left:60px;
font-size:20px;
}
.left_top_tab
{
padding-left:30px;
padding-right:30px;
}
.left_bottom_chart
{
height:89%;
width:100%;
}
a:link {color: blue}
a:hover { cursor:pointer }
</style>
覆盖图片上的文字
<html>
<style type="text/css">
html,body {
height: 100%;
width: 100%;
margin: 0px;
min-width: 1252px;
min-height: 700px;
background-color:white ;
box-sizing：content-box;
}
.page {
height: 100%;
padding-top: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.top {
height: 35px;
margin-top: -35px;
margin-right: 1.5px;
}
.main {
height: 100%;
}
.details
{
margin-top: 2px;
text-align:center;
}
a:hover {
cursor: pointer
}
</style>
<body>
<div class="page">
<div class="top">
</div>
<div class="main">
<div class="details">
<img alt="" src="test.png">
</div>
<div id="loadData">
<span id="buyElectric" style="position: absolute;top: 92px;left: 370px;color:#0080FF;font-size :17px;" ><a onclick="loadDetails('')">680000.00</a></span>
<span id="SWElectric" style="position: absolute;top: 218px;left: 344px;color:red;font-size :22px;" ><a onclick="loadDetails(1)">480000</a></span>
<span id="TDElectric" style="position: absolute;top: 386px;left: 348px;color:red;font-size :22px;" ><a onclick="loadDetails(1)">80000</a></span>
<span id="DFElectric" style="position: absolute;top: 498px;left: 348px;color:red;font-size :22px;" ><a onclick="loadDetails(1)">70000</a></span>
<span id="XGElectric" style="position: absolute;top: 572px;left: 348px;color:red;font-size :22px;" ><a onclick="loadDetails(1)">50000</a></span>
</div>
</div>
</div>
</body>
</html>
Navigator 面板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Untitled Document</title>
<script language="javascript" src="jquery1.8.2.js" ></script>
<style>
/**节点导航面板*/
.center .nav{
border-bottom:2px solid #279CEA;
height:30px;
background:#FFFFFF;
margin-top:5px;
}
ul{
list-style:none;
margin:0;
padding:0;
height:100%;
}
li{
float:left;
margin-right:2px;
background:#D1D1D1;
height:100%;
width:60px;
text-align:center;
color:#333333;
cursor:pointer;
font:12px '宋体';
line-height:30px;
}
/**tab节点选中*/
.nav .selected{
background:#279CEA; color:#FFFFFF
}
/**tab节点未选中*/
.nav .noSelected{
background:#D1D1D1; color:#333333
}
/**节点导航面板 end*/
</style>
<script type="application/javascript">
window.onload = function(){
//节点点击事件
$(".nav ul > li").each(function(index, element) {
$(element).bind("click",(index+1),function(obj){
menuClick(obj.data);
});
});
}
//绑定事件
function menuClick(id)
{
for(var i = 1;i<=5; i++){
$(".menu_"+i).addClass("noSelected");
//内容信息页面id
//$("#detail_"+i).hide();
}
//如果不移除未选中样式直接添加选择样式会被前者覆盖
$(".menu_"+id).removeClass("noSelected").addClass("selected");
//内容信息页面id
//$("#detail_"+id).show();
alert("第"+id+"个tab 响应");
}
</script>
</head>
<body>
<div class="center">
<div class="nav">
<ul>
<li class="menu_1">Menu_01</li>
<li class="menu_2">Menu_02</li>
<li class="menu_3">Menu_03</li>
<li class="menu_4">Menu_04</li>
<li class="menu_5">Menu_05</li>
</ul>
</div>
</div>
</body>
</html>
table 样式 和 文字排版
<style>
.table_panel
{
width:100%;
text-align:center;
min-width:1200px;
}
table{
border-collapse:collapse;
background:#FFFFFF;
width:400px;
color:#F7530B;
text-align:right;
margin-top:2px;
margin-left:35%;
margin-bottom:2px;
align:center;
}
.table_header{
background:#EFEEEE;
font:bold 12px '宋体';
color:#333333;
text-align:center;
}
.detail_label{
color:#000;
font:12px '宋体';
background:#EDF8FE;
width:120px;
text-align:center;
}
td{
border: 1px solid #DADADA;
}
.content
{
font:10px '宋体';
margin:10px;
word-spacing:0.5em;
text-indent:2em;
vertical-align:middle;
text-align:left;
line-height:1.5;
}
.content-panel
{
width:600px;
height:600px;
border:1px solid #DADADA;
text-align:center;
overflow:hidden;
padding-bottom:5px;
}
</style>
<div class="content_top_right">
<div class="table_panel">
<span>列表测试</span>
<table >
<tr class="table_header">
<td></td>
<td>语文</td>
<td>数学</td>
</tr>
<tbody id="spot_check_info_id">
<tr>
<td class="detail_label">小明</td>
<td>89</td>
<td>78</td>
</tr>
<tr>
<td class="detail_label">小红</td>
<td>56</td>
<td>68</td>
</tr>
<tr>
<td class="detail_label">小花</td>
<td>78</td>
<td>99</td>
</tr>
</tbody>
</table>
</div>
<div class="content-panel">
<div style="font-size:20px;margin-top:10px;" >列表标志定位</div>
<div class="content">
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫。
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫。
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫。
</div>
<div class="content">
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫。
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫。士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫。
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫，
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫，士大夫士大夫士大夫士大夫士大夫士大夫。
</div>
</div>
</div>
toggle方法例子 toggle(function1,function2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TOGGLE演示</title>
<script type="text/javascript" language="javascript" src="jquery1.8.2.js">
</script>
<script language="javascript">
$(document).ready(function(){
$("#btn1").toggle(function(){
$("p").hide("slow");
},function(){
$("p").show("slow");
});
});
</script>
</head>
<body>
<p style="background:#3F3">this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
</p>
<input type="button" value="显示/隐藏" id="btn1">
</body>
</html>
panel例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="jquery1.8.2.js" ></script>
<script language="javascript" src="jquery.loadmask.min.js" ></script>
<link href="jquery.loadmask.css" rel="stylesheet" type="text/css">
<style type="text/css">
html,body{
height:99.9%;
margin:0;
}
.box{
width:99%;
margin:auto;
padding-top:30px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid #DDDDDD;
margin-top:2px;
}
.box_top{
height:30px;
margin-top:-30px;
background:#F9F9F9;
cursor:pointer;
border-bottom:0px solid #DDDDDD;
}
.box_center{
height:300px;
background:#FFFFFF;
overflow:auto;
padding:5px 0 0 5px;
display:none ;
}
.box_title{
float:left;
height:100%;
font:bold 14px '宋体';
color:#00538D;
line-height:30px;
padding-left:5px;
}
.box_opera{
float:right;
height:100%;
text-align:right;
}
.top_shrink{
padding-right:5px;
font:bold 24px '宋体';
color:#666666;
/*cursor:pointer;*/
}
</style>
<script type="application/javascript">
window.onload = function(){
$(".box_top").bind("click",null,function(obj){
var box_content = $(this).parent().children(":last-child");
var top_shrink = $(this).children(":last-child").children();
var box_top = $(this);
if(box_content.is(":hidden")){
box_content.show();
top_shrink.html("-");
box_top.css("border-bottom","1px solid #DDDDDD");
}else{
$("body").mask("ddd");
box_content.hide();
top_shrink.html("+");
box_top.css("border-bottom","0px");
window.setTimeout(function(){
$("body").unmask();
},1000) ;
}
});
}
</script>
</head>
<body>
<div class="box">
<div class="box_top">
<div class="box_title">PANEL01</div>
<div class="box_opera">
<span class="top_shrink">-</span>
</div>
</div>
<div class="box_center">
</div>
</div>
<div class="box">
<div class="box_top">
<div class="box_title">PANEL02</div>
<div class="box_opera">
<span class="top_shrink">-</span>
</div>
</div>
<div class="box_center">
</div>
</div>
</body>
</html>
分享到：
发表评论
文章已被作者锁定，不允许评论。
-
html pre标签使用（保留空格和回车等操作）
2018-05-15 08:37 2442pre 元素可定义预格式化的文本。被包围在 pre 元素中的文 ... -
js 鼠标移过去渐变的效果（页面固定 定位栏）
2017-10-31 11:29 6291.html代码 <div id="loc ... -
js 在页面中跳转到指定位置
2017-10-24 15:29 13441.页面中代码 <div style="lef ... -
CSS 块对象（独占一行）和内联对象
2016-11-03 10:13 848块对象也称为块级元素，内联元素也称为行内元素 ① 块级元素（d ... -
CSS 点击div的同时显示或隐藏的div
2016-08-16 17:18 622<div id="up"> ... -
CSS td里面两个input不换行设置（white-space: nowrap）
2016-07-14 16:54 1728定义和用法 white-space 属性设置如何处理元素内的 ... -
CSS NAV页面效果总结
2016-07-11 09:17 621<!DOCTYPE html PUBLIC &quo ... -
CSS 页面置灰等待效果
2016-06-01 11:18 1316<div id='tms-comm-load' st ... -
CSS link和@import的区别
2015-03-11 15:27 565页面中使用CSS的方式主要有3种：行内添加定义style属性值 ... -
Css 表单
2014-12-17 10:50 355table页面 <table style= ... -
CSS 可上下伸缩的PANEL
2014-10-30 19:35 910html代码 <!DOCTYPE html PUB ... -
CSS常用样式总结积累
2014-10-28 20:28 5131.把一个链接设置成一个按钮 .saveButton{ ...
相关推荐
1.用<nobr>标签实现不换行 复制代码代码如下: <div>Hello world！<nobr> Hello world!<nobr></div> 2.用<用nowrap元素>标签 复制代码代码如下: <div>Hello world! Hello world! Hello world! Hello world!...
总结起来，在`<td>`和`<div>`标签中控制内容不换行，可以通过`<nobr>`标签和CSS样式`white-space: nowrap;`两种方法来实现。在实际开发中，推荐使用CSS样式，因为它更加符合Web标准，并且具有更好的跨浏览器支持和...
`nobr`标签在过去用于阻止表格中的文本换行，但现在已被废弃。要达到类似的效果，我们可以使用`white-space`属性，将其设置为`nowrap`。`white-space: nowrap`会让文本在一个行内连续显示，不让其自动换行。这是解决...
通过对HTML5和CSS的学习，我们可以了解到，通过合理的使用 `<p>`、` `、`<nobr>` 以及 `<div>` 等标签，能够有效地控制网页中文字的布局。无论是简单的换行控制还是复杂的对齐需求，都可以通过这些基本的标签得到...
区断标记如`<hr>`创建水平线，` `实现换行，`<nobr>`阻止自动换行，`<p>`定义段落，`<center>`内容居中。`<pre>`保留空格和换行，用于代码展示。 表格是HTML中的重要元素，`<table>`标签开始表格，`align`设置...
` `用于换行，`<nobr>`阻止自动换行，`<p>`定义段落，`<center>`使内容居中。 连结格式使用`<a>`标签，`href`属性定义链接地址，`target`属性决定如何打开链接：`_blank`在新窗口，`_top`在当前窗口全屏，或者...
- ` ` 实现换行，`<nobr>` 阻止自动换行。 - `<p>` 用于创建段落，`<center>` 使内容居中对齐。 4. **链接**： - `<a>` 标签定义链接，`href` 属性指定目标地址。`target` 属性决定打开方式，如`_blank`（新...
`<nobr>`和`<p>`标签处理文本布局，`<nobr>`阻止文本换行，而`<p>`则定义了一个段落。`<center>`标签用于将内容居中对齐。 在链接方面，`<a>`标签是创建超链接的关键，`href`属性定义链接的目标地址。`target`属性...
换行符 用于在文本中插入换行，而<nobr>标签则用于防止内容自动换行。段落标签用来标识一个段落，而标签用于将内容居中显示。 在连结格式方面，标签用于设定页面中所有相对链接的基础路径。而标签用于创建超链接...
`<nobr>`阻止文本换行，`<a>`标签则用于创建链接，`target`属性控制链接打开方式，如`_blank`（新窗口）和`_top`（全窗口）。 图像的插入通常使用`<img>`标签，可以设置图片的宽度、高度、提示文字和边框，例如： ...
- ` `用于换行，`<nobr>`阻止自动换行。 - `<p>`创建段落，`<center>`将内容居中。 4. **链接格式**： - `<a>`标签创建链接，`href`属性设置链接地址。`target`属性控制链接打开方式，如`_blank`（新窗口）、...
不换行标签 `<nobr>` - 用途：防止强制换行。 - 示例： ```html <nobr>这是一段不换行的文字。</nobr> ``` ##### 9. 换行词标签 `<wbr>` - 用途：建议浏览器在指定位置进行换行。 - 示例： ```html This is...
`<p>`标记定义段落，` `实现强制换行，`<nobr>`则用于阻止换行。 2. **文本样式与颜色** - `bgcolor`属性用于设置网页整体背景色，可以使用颜色名或RGB值。 - `<font>`标签用于控制字体样式，包括`size`...
* `<nobr>`：不换行标签，用于创建不换行的文字 * `<center>`：置中标签，用于创建置中的文字 字体效果标签 * `<b>`、`<strong>`：粗体字标签，用于创建粗体字 * `<i>`、`<em>`：斜体字标签，用于创建斜体字 * `...
- ` `实现换行，`<nobr>`阻止文本自动换行。 - `<p>`创建段落，`<center>`将内容居中。 4. **连结格式**： - `<base>`标签设置页面的默认链接基础URL。 - `<a>`标签用于创建超链接，`href`属性指定链接地址...
有时候我们希望文本能够连续显示在同一行内，这时可以使用`<nobr>`标签来实现。该标签会阻止内部的文本自动换行，直到内容超出容器边界。例如： ```html <nobr> HTML+CSS完成自学手册HTML+CSS完成自学手册HTML+CSS...
- ` `标签实现换行，而`<nobr>`阻止浏览器自动换行，使长文本保持在同一行。 预格式化标记`<pre>`： `<pre>`标签保留了文本在源代码中的空白和换行，使得浏览器按原样显示内容，常用于展示代码或保留特定格式的...
11. `<nobr>`：不允许换行标签，用于防止单词或短语因为太长而换行。 12. `<wbr>`：建议折行标签，允许浏览器在需要时在指定的位置进行折行。 13. `<strong>` 和 `<b>`：两者都能实现加粗效果，但`<strong>`强调的...