您的位置：首页 > 其它

词语解释（一）

2017-03-03 14:45 155 查看

css如下：

@charset 'utf-8';

body {font-size:12px; color:#333; font-family:arial,'\5fae\8f6f\96c5\9ed1','\5b8b\4f53';line-height:1.8; background:#f2f5ee url("../images/bg01.jpg") no-repeat top center;}

.iframeBody {background-image:none; background-color:transparent;}

.ma{width:1100px; margin:0 auto;}

a,a:hover{text-decoration:none;}

/*拓展学习*/

.expandS{margin-top:23px;padding:0 15px;background:url("../images/verticalLine.gif") repeat-y 24px top;position:relative;}

.expandS ul li{padding-bottom:20px;}

.expandS ul li .order,.expandS ul li .orderHL{width:19px;height:19px;background:#999;border-radius:50%;font-weight:600;color:#fff;text-align:center;font-size:16px;line-height:19px;margin-right:15px;}

.expandS ul li .orderHL{background:#6e8d3a;position:relative;}

.termExplan{width:80%;}

.termExplan .term{line-height:20px;}

.termExplan .term span{font-size:14px;line-height:20px;margin-right:30px;font-weight:bold;position:relative;cursor:default;}

.termExplan .term.hover span,.termExplan .term:hover span{color:#6e8d3a;}

.termExplan .term .span_click{cursor:pointer;}

.termExplan .term .expl{background:#f5f5f5;left:0px;top:11px;/*top:30px;*/z-index:10;display:none;}

.termExplan .term .expl .ExpCon{padding:20px;font-size:13px;color:#666;margin-bottom:20px;}

.termExplan .term .expl em{width:22px;height:11px;background:url("../images/xiaosanjiao.gif") no-repeat;left:2%;top:-10px;}

--------------------------------------------------------------------------------------------

html如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link rel="stylesheet" href="css/reset_base.css" />

<link rel="stylesheet" href="css/wordExplain.css" />

<style>

.termExplan .term .expl .ExpCon {margin-bottom:20px;}

.termExplan .term .expl {top:30px;}

.termExplan .term .expl{width:500px;}

</style>

</head>

<body class="iframeBody">

<div class="p20 f16">这么做有点问题,容器宽度窄时，解释内容会超出页面，需改良</div>

<div class="content clearfix expandS">

<ul class="clearfix">



<li class="clearfix">

<div class="fl orderHL">ok</div>

<div class="fl termExplan clearfix">

<div class="fl term pr">

<span class="span_click">1111111</span>

<div class="expl pa">

<div class="ExpCon clearfix">斜坡上的岩屑或块体在重力作用下，快速向下坡移动称为崩塌。崩塌过程按块体的地貌部位和崩塌形式又可分为山崩、塌岸和散落。

</div>

<em class="pa"></em>

</div>

</div>

<div class="fl term pr">

<span class="span_click">22222222</span>

<div class="expl pa">

<div class="ExpCon clearfix">

由冰川运动对地表土石体造成机械破坏作用的一系列现象称为冰川侵蚀(glacier erosion)。高山高原雪线以上的积雪，经过外力作用，转化为有层次的厚达数十米至数百米的冰川冰。而后冰川冰沿着冰床作缓慢塑性流动和块体滑动，冰川及其底部所含的岩石碎块不断锉磨冰床。同时在冰川下因节理发育而松动的岩块突出部分有可能和冰川冻结在一起，冰川移动时将岩块拔出带走。冰川侵蚀活跃于现代冰川地区，我国主要发生在青藏高原和高山雪线以上。

</div>

<em class="pa"></em>

</div>

</div>

</div>

</li>

</ul>

</div>

<script src="js/jquery-1.11.0.min.js"></script>

<script src="js/chosen.jquery.js"></script>

<script type="text/javascript">

$(function(){



$(".term").on("click",function(){

var $this = $(this),

expl_ = $this.find(".expl");

if (expl_&&expl_.length>0){

if(expl_.css("display") == "none"){

$this.parents(".content").find(".expl").hide();

$this.find(".expl").show();

$this.parent().find(".term").removeClass('hover');

$this.addClass('hover');

}else if(expl_.css("display") == "block"){

$this.find(".expl").hide();

$this.removeClass('hover');

}

}else{

return false;

}

});

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： class

相关文章推荐

新的分享

章节导航