CSS 工作总结（nobr标签可以防止换行）

最新推荐文章于 2020-07-28 13:53:29 发布
最新推荐文章于 2020-07-28 13:53:29 发布
阅读量144 收藏
点赞数
分类专栏： CSS 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lan12334321234/article/details/84687324
版权 

<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>

[size=large][color=red]覆盖图片上的文字[/color][/size] 

<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>



[size=large][color=red]Navigator 面板[/color][/size] 


<!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>


[size=large][color=red]table 样式 和 文字排版[/color][/size] 


<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>


[size=large][color=red]toggle方法例子[/color][/size] [color=blue]toggle(function1,function2)[/color] 



<!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>


[size=large][color=red]panel例子[/color][/size] 


<!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>
艾伦蓝
关注
专栏目录
CSS教程:表格的nobr终极解决方案
09-27
当你准备全面进军web标准时，有时候你是不是被表格的弄得焦头烂额呢？比如，原来使用“非法”的nobr现在要用什么来代替呢？今天，就让我来一个终极解决方案。　　　或许你已经Google到white-space： nowrap可以实现nobr，不错，但关键还有一个，那就是table-la
html小技巧之td,div标签里内容不换行
10-25
总结起来，在`<td>`和`<div>`标签中控制内容不换行，可以通过`<nobr>`标签和CSS样式`white-space: nowrap;`两种方法来实现。在实际开发中，推荐使用CSS样式，因为它更加符合Web标准，并且具有更好的跨浏览器支持和...
css nobr
czh4869623的专栏
09-21 663
公司证照公司证照
nobr过时_用CSS替换NOBR标签
culuo8053的博客
07-28 521
nobr过时This is just a simple tip for those still clinging to NOBR HTML tags. The NOBR tag, for those who haven't seen them before, prevent a selection of text from being "broken" into multiple lines. ...
css + css3技术总结报告
weixin_33906657的博客
02-02 475
前言：前段时间写了几篇自己工作中总结的技术文章，感觉在分享自己技术经验的同时，也同时完善了自己的不足。这感觉挺好的。怪不得当老师的都有种深深的满足感。今天这篇文章主要是分享下自己对目前的css3技术上的学习心得。有不对的地方欢迎指出。大家共同提高！闲话不多说，begin！js Bin：http://jsbin.com/?html,output目录：css优先级元素选择符关系选择符属性选择符CSS...
Css问题总结整理(2)
weixin_34150503的博客
09-18 139
1、前端页面有哪三层构成，分别是什么？作用是什么？结构层（由 HTML 或 XHTML 之类的标记语言负责创建）、表现层（由CSS控制）、行为层（Javascript 语言和 DOM 主宰的领域）2、啥子是css内联式，外联式，嵌入式?内联式就是样式的属性内容直接跟在将要修饰的html标记里，如：<div style=”height:30px;font-size:12p...
HTML 标签总结大全
ida0918的博客
09-27 775
这几天把慕课里的html部分看完了，老师说一周就能学会，课程真心好，实力推荐，比从入门到放弃类好多了，良心课程。然而我只是想看懂代码就行，但是强迫症精分总想写点东西。ps：这些标签不要背，现用现找即可，否则只会烧脑子哦，23333333。 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(DTD)。 标签：a 说明：标明超链接的
HTML/CSS总结1
weixin_30782331的博客
09-25 61
1.定义网页背景颜色 <body bgcolor="背景色"> 颜色可以用2种方式表示：1. 直接指定颜色名称，如blue。2.使用十六进制数据表示如#RRGGBB，分别表示两位十六进制数据. 2.设置背景图片 <body background="图片的地址"> 3.设置文字颜色 <body text="文字的颜色...
html css常见问题经验总结 源于css3.0 API
智欣约的博客
08-20 406
如何清除图片下方出现几像素的空白间隙？ 方法1： img{display:block;} 方法2： img{vertical-align:top;} 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的和值都可以 方法3： #test{font-size:0;line-heigh
html中div不自动换行、强制不换行的具体实现
12-04
1.用<nobr>标签实现不换行 复制代码代码如下: <div>Hello world！<nobr> Hello world!<nobr></div> 2.用<用nowrap元素>标签 复制代码代码如下: <div>Hello world! Hello world! Hello world! Hello world!...
js总结
zhanghl150426的博客
07-24 231
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctr...
html pre标签使用（保留空格和回车等操作）
写博客只为学习
05-15 5521
[size=medium][color=red][b]pre 元素可定义预格式化的文本。[/b][/size][/color][size=large][color=blue]被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。[/color][/size] 标签的一个常见应用就是用来表示计算机的源代码。 做网页即时聊天时的文字输入框采用标签。 [co...
CSS 点击div的同时显示或隐藏的div
写博客只为学习
08-16 2076
[code="html"] xxxxx [/code] [size=medium][color=red][b]点击up时up会显示或隐藏[/b][/color][/size] [code="js"] function showorhide(){ // 显示 if($("#up").is(":hidden")){ $("...
js 在页面中跳转到指定位置
写博客只为学习
10-24 1683
应的函数[/b][/color][/size] [code="js"] function scrollTo(id){ jQuery("html, body").animate({ scrollTop: jQuery("#"+id).offset().top }, {duration: 500,easing: "swing"}); } [/code]
CSS td里面两个input不换行设置（white-space: nowrap）
写博客只为学习
07-14 1266
[size=medium][color=red][b]定义和用法[/b][/color][/size] [color=blue][b]white-space 属性设置如何处理元素内的空白。[/b][/color] 这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。 [color=blue][b]可能的值[/...
HTML格式标签详解：标题、换行与分段
2. **换行标签 、不换行标签<nobr></nobr>和分段标签<p></p>** - ` `标签用于强制换行，它是一个行内元素，只会产生一个简单的换行，但不会像<p></p>那样自动添加额外的空白行。 - `<p></p>`标签则用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值