CSS+HTML实例集合一，改变字体(样式，大小)，overflow布局属性(如显示隐藏文字等)，列表的展开闭合
2012-10-08 23:28
791 查看
改变字体(样式，大小)
<!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);" onclick="ChangeFont_1('18px','red');">大字体</a><!--超链接的默认事件被取消了，需要自定义事件来完成超链接的点击效果,添加onclick事件-->
<a href="javascript:void(0)" onclick="ChangeFont_1('16px','blue');">中字体</a> <!--超链接的默认事件被取消了，需要自定义事件来完成超链接的点击效果,添加onclick事件-->
<a href="javascript:void(0)" onclick="ChangeFont_1('14px','green');">小字体</a> <!--超链接的默认事件被取消了，需要自定义事件来完成超链接的点击效果,添加onclick事件-->
<hr />
<a href="javascript:void(0)" onclick="ChangeFont_2('class_blue_max')">大字体</a>
<a href="javascript:void(0)" onclick="ChangeFont_2('class_red_mideum')">中字体</a>
<a href="javascript:void(0)" onclick="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 onclick="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 onclick="list(this);">电视频道</dt>
<dd>新闻频道</dd>
<dd>娱乐频道</dd>
<dd>体育频道</dd>
<dd>电影频道</dd>
<dd>卡通频道</dd>
</dl>
<dl>
<dt onclick="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)" onclick="list(this);">好友列表</a>
<div>
好有名称<br />
好有名称<br />
好有名称<br />
好有名称<br />
好有名称<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="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)" onclick="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)" onclick="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)" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS+HTML实例集合二，表格行颜色间隔显示，加有鼠标移入移出高亮效果，还有单击选中高亮再单击消除高亮
- jquery实现改变显示的文字的背景色和字体大小
- 同一个TextView如何显示不同颜色的文字、字体大小、字体样式
- 改变TextView里面某部分字体的颜色、大小、样式等属性
- 改变下拉列表文字显示大小
- 根据html容器大小和显示文字多少调节字体大小
- 安卓运行时监听配置更改：sim卡、本地语言、键盘显示或隐藏、字体大小、UI模式、屏幕方向、屏幕布局（另一个屏幕）、可用屏幕大小（横纵向）、无屏幕大小（外接屏幕）。
- CSS font-size字体文字大小样式属性
- css+html中字体样式改变
- IOS label导入带html标签文字，并且可以改变字体大小
- CSS3--字体样式，自动隐藏一行中多余文字，以省略号显示。
- html的样式例子，改变文本字体，大小
- （7）展开闭合列表：布局overflow在列表中应用
- 一个按钮改变字体的大小，一个按钮改变字体的样式
- Eclipse中改变控制台显示字体大小
- iOS-UIButton-文字位置，字体大小，边角样式,button种类，点击事件，内容位置
- iOS TextView 中的文字 点击一次全部展开， 在点击一次 显示原有大小。
- TextView使用Html来处理图片显示、字体样式、超链接等
- html用title属性实现鼠标悬停显示文字
- 微信小程序之动态改变内容①文字改变②显示隐藏