CSS+HTML实例集合一，改变字体(样式，大小)，overflow布局属性(如显示隐藏文字等)，列表的展开闭合

最新推荐文章于 2020-11-29 01:28:46 发布

King·Forward

最新推荐文章于 2020-11-29 01:28:46 发布

阅读量3.9k

点赞数

分类专栏： JavaWeb 文章标签： html css javascript xhtml 引擎文档

本文链接：https://blog.csdn.net/wjw_java_android/article/details/8050479

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

改变字体(样式，大小)

<!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=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
	a:link,a:visited{/*设置点击前，点击后a标签样式一样*/
		 color:#FF9900;/*颜色*/
		 text-decoration:none;/*文本样式设置为none，即没有样式*/
		 font-size:12px;/*字体大小*/
	}
	a:hover{
		color:#0099FF;/*设置鼠标悬停时，字体颜色*/
	}
	/*如果定义了id选择器的样式，则再定义的class样式就不会加载了，因为id的优先级高于class的优先级 
	  如果想要覆盖id选择器的样式，只能使用不同的id选择器进行替换，但是很少用。可以使用style属性的方式，就是下面javascript中ChangeFont_1函数中直接操纵属性，这种方式比id的优先级还要高
	#news{
		border:1px #0000FF solid;
		font-size:16px;   字体大小不设置的话，默认为16px 
		width:850px;
		color:#666666;    设定默认字体颜色 
	}
	*/
	
	.news{
		border:1px #0000FF solid;
		font-size:16px;/*字体大小不设置的话，默认为16px*/
		width:850px;
		color:#666666;/*设定默认字体颜色*/
	}
	/*
		预先定义好选择器
	*/
	.class_blue_max{
		color:#0000FF;
		font-size:18px;
		background-color:#006600
	}
	.class_red_mideum{
		color:#FF0000;
		font-size:16px;
		background-color:#9966FF
	}
	.class_green_min{
		color:#00FF00;
		font-size:14px;
		background-color:#66FFFF;
	}
</style>
<body>
<!--对文字自定义进行大中小的设置，方便用户浏览，增强上网体验
1，先有数据，并将数据用html标签进行封装；
2，对数据加载一些静态样式
3,确定事件源和时间动作
4，对事件进行处理

注意：
	取消超链接默认点击效果（默认效果为：打开该页面所在的文件夹目录）
	方式一:给a标签中href属性的值定义为#，这是借用了定位标记的原理，不指定具体的位置，这样就取消了超链接的默认效果，但会启动默认的file引擎，不够专业
	方式二： 可以定义javascript：void(0);启动javascript引擎，运行一个函数，void(0);但该函数什么也不做
	超链接的默认事件被取消了，需要自定义事件来完成超链接的点击效果
-->	
	<h1>这是一个大新闻</h1>
	<!--<a href="#">大字体</a>,这样在href中写入#，不专业-->
	<a href="javascript:void(0);" οnclick="ChangeFont_1('18px','red');">大字体</a><!--超链接的默认事件被取消了，需要自定义事件来完成超链接的点击效果,添加onclick事件--> 
	<a href="javascript:void(0)" οnclick="ChangeFont_1('16px','blue');">中字体</a> <!--超链接的默认事件被取消了，需要自定义事件来完成超链接的点击效果,添加onclick事件-->
	<a href="javascript:void(0)" οnclick="ChangeFont_1('14px','green');">小字体</a> <!--超链接的默认事件被取消了，需要自定义事件来完成超链接的点击效果,添加onclick事件-->
	<hr />
	<a href="javascript:void(0)" οnclick="ChangeFont_2('class_blue_max')">大字体</a>
	<a href="javascript:void(0)" οnclick="ChangeFont_2('class_red_mideum')">中字体</a>
	<a href="javascript:void(0)" οnclick="ChangeFont_2('class_green_min')">小字体</a>
	<div id="news" class="news">
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
		数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻数据，新闻<br />
	</div>

</body>
<script type="text/javascript">
	function ChangeFont_1(size,clr){
		var div=document.getElementById("news");//获取对象
		 	//div.style.fontSize=size;//通过对象设置相应的样式，不懂可查html帮助文档
		 	//div.style.color=clr;//设定字体颜色
			//以上那样写能达到效果，但如果属性多了，就会冗余，可用with简化代码
			with(div.style){//with确定作用范围
				fontSize=size;
				color=clr;
			}
	}
	/*
		虽然上面用with能解决问题，但是每次增删改属性都要修改该javascript，比较麻烦，下面定义修改封装信息数据的div的class属性，即达到修改数据样式的目的
		由于关联性太强，所以将样式进行选择器的封装，只要改变class属性的赋值即可
	*/
	function ChangeFont_2(style){
		var div=document.getElementById("news");
		//alert(div.className);//通过属性可以拿到其class属性，当然也可以修改
		div.className=style;
	}
</script>
</html>

overflow布局属性(如显示隐藏文字等)

<!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=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
	div{
	height:16px;
	overflow:hidden;
	}
</style>
<body>
<!--
	展开闭合效果
		利用属性overflow,有四个参数，	1，visible,全都显示；
										2，auto,自适应；
										3，hidden，超出的部分隐藏
										4，scroll,滚动条
-->

<!--注意：这里是height，不是font-size.           小知识：字体的默认高度为：16px-->
<!--<div style="height:16px;overflow:hidden"> 这样操作，实现隐藏第一行下面所有的,但这样写死了，看下面的方式-->
	<div οnclick="list();">
	fjkdl;asifd  附近的卡附近看到了撒jfkdlsafj<br />kdlsa房价肯定是啦瑞沃附近的开始啦
</div>
</body>
<script type="text/javascript">
	function list(){
		var div=document.getElementsByTagName("div")[0];//通过getElementsByTagName获取的是数组，所以指定角标
		//div.style.overflow="visible";
		with(div.style){
			overflow=(overflow=="hidden")?"visible":"hidden";//实现每单击一下，显现和隐藏数据
		}
	}
</script>
</html>

列表的展开闭合

一般方式(不能跨浏览器)

<!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=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
	dl{
	height:16px;
	overflow:hidden
	}
	.open{
	height:16px;
	overflow:visible;}
	.clase{
	height:16px;
	overflow:hidden;}
</style>
<body>
	<!--通过点击电视频道列表，对子列表进行展开及闭合-->
	<dl>
		<dt οnclick="list(this);">电视频道</dt>
		<dd>新闻频道</dd>
		<dd>娱乐频道</dd>
		<dd>体育频道</dd>
		<dd>电影频道</dd>
		<dd>卡通频道</dd>
	</dl>
	<dl>
		<dt οnclick="list(this);">-------电视频道</dt>
		<dd>--------新闻频道</dd>
		<dd>--------娱乐频道</dd>
		<dd>--------体育频道</dd>
		<dd>--------电影频道</dd>
		<dd>--------卡通频道</dd>
	</dl>
	<!--注意，不同的浏览器，解析方式不同，显示效果可能有所不同-->
</body>
<script type="text/javascript">
	function list(list_obj){
		//方法一
		/*//var list=document.getElementsByTagName("dl")[0];//这种方式获取对象不太明确,因为可能有多个dl
		
		with(list.style){
			overflow=(overflow=="hidden")?"visible":"hidden";
		}*/
		
		//方法二
		//为了方便，获取当前事件源的dl最合适
		/*方式1，获取事件源 "event.srcElement"可获取事件源，但这种获取事件源方式并不通用，在IE中没问题，但火狐不支持event
		alert(event.srcElement.nodeName);//通过事件源获取对象的名称
		
		//alert(event.srcElement.parentNode.nodeName);//通过事件源获取对象，并获取该对象的父类对象
		var dl_obj=event.srcElement.parentNode;
		with(dl_obj.style){
			overflow=(overflow=="hidden")?"visible":"hidden";
		}
		*/
		//方式二，在时间源方法中传入this,这种方式，浏览器都支持，同时也很简单
		//alert(list_obj.nodeName);
		var parent=list_obj.parentNode;
		if(parent.className=="open"){
			parent.className="close";
		}else{ 
			parent.className="open";//动态改变dl的class属性的值	
		}
	}
</script>

</html>

跨浏览器方式

<!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=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
	table{
		border:#0000FF solid 3px;
		border-collapse:collapse;/*设定单元格边框与表格边框合并*/
		width:200px;
	}
	table td{
	border:#990000 solid 1px;/*设置单元格边框*/
	text-align:center;/*设置td中的数据居中*/
	background-color:#66FF00;/*设置单元格背景 ，注意，因为设置单元格背景与单元格中的div的背景颜色不同，从而使a标签的颜色看似不同，这个搭配狠给力！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！*/
	}
	table td div{
	background-color:#66FFFF;/*设定表格中td标签中div的北京颜色*/
	text-align:left;/*设置td中的div中的数据居左*/
	}
	a{
	/*background-color:#0000FF;}如果单独设置a标签的背景颜色，不能设置其所在的一行，所以该方法不行*/
	 }
	 
	 table td a:link,table td a:visited{/*设置点击前，点击后样式一样*/
	 color:#990000;
	 text-decoration:none;/*去掉文字的样式，即去掉下划线样式*/}
	 table td a:hover{/*设置鼠标悬停时样式*/
	 color:#0000FF;}
	 
	 table td div{
	 display:none;/*display这个属性对文本隐藏，显示等等有很强的支持，可以多试试*/}
	.open{
	display:block;}
	.close{
	display:none;}
</style>
<body>
<!--=======================这是跨浏览器的列表站尅闭合=============================

1，对数据的标签封装
2，对数据css样式的设定
3，明确事件源和事件
4，事件处理方式
-->
<table>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list(this);">好友列表</a>
			<div>
				好有名称<br />
				好有名称<br />
				好有名称<br />
				好有名称<br />
				好有名称<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list(this);">好友列表1</a>
			<div>
				1好有名称<br />
				1好有名称<br />
				1好有名称<br />
				1好有名称<br />
				1好有名称<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list(this);">好友列表2</a>
			<div>
				2好有名称<br />
				2好有名称<br />
				2好有名称<br />
				2好有名称<br />
				2好有名称<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list(this);">好友列表3</a>
			<div>
				3好有名称<br />
				3好有名称<br />
				3好有名称<br />
				3好有名称<br />
				3好有名称<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list(this);">好友列表4</a>
			<div>
				4好有名称<br />
				4好有名称<br />
				4好有名称<br />
				4好有名称<br />
				4好有名称<br />
			</div>
		</td>
	</tr>
</table>
</body>
<script type="text/javascript">
	function list(list){
		//var div1=list.nextSibling;//用兄弟层次关系获取，还要判断两个节点之间有没有空白文本，所以最好不用
		//var div2=list.parentNode.childNodes[1];//通过拿到本节点的父节点，再找到相应的子节点，当然这些节点当中包含文本节点，也不好确定 你懂的
		var div3=list.parentNode.getElementsByTagName("div")[0];
		/*with(div3){
			if(className=="open"){
				className="close";
			}else{
				className="open";
			}
		}*/
		
		/*
			想要实现开一个而关其他，需要拿到所有的div节点，并对当前的节点进行开关的判断，而对其他的节点进行display：none
		*/
		var table0=document.getElementsByTagName("table")[0];
		var divAll=table0.getElementsByTagName("div");//获取表格中所有的div对象
		for(var i=0;i<divAll.length;i++){
			if(divAll[i]==div3){
				with(divAll[i]){
					if(className=="open"){
						className="close";
					}else{
						className="open";
					}
				}		
			}else{
				divAll[i].className="close";
			}
		}
	}
</script>
</html>

King·Forward

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS+HTML实例集合一，改变字体(样式，大小)，overflow布局属性(如显示隐藏文字等)，列表的展开闭合

改变字体(样式，大小)无标题文档 a:link,a:visited{/*设置点击前，点击后a标签样式一样*/ color:#FF9900;/*颜色*/ text-decoration:none;/*文本样式设置为none，即没有样式*/ font-size:12px;/*字体大小*/ } a:hover{ color:#0099FF;/*设置鼠标悬停时，
复制链接

扫一扫