一同事的原本精简而来
<!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" />
<script type="text/javascript" src="weixin/js/jquery.js"></script>
<!-[if lte IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div,ul,img,li,input,a,.current,background,h3');
</script>
<![endif]->
<script type="text/javascript">
$(document).ready(function(e) {
var lastmenu = $('.info_tab li a.current');
var a=$("#1").offset().top;
var b=$("#2").offset().top;
var c=$("#3").offset().top;
var d=$("#4").offset().top;
var f=$("#5").offset().top;
var g=$("#6").offset().top;
$(window).scroll(function(e) {
var y=$(this).scrollTop();
if(y>=a-42 && y<b){
$('.info_tab li a[href*=#]').removeClass('current');
$("#01").addClass('current');
}
if(y>=b-42 && y<c){
$('.info_tab li a[href*=#]').removeClass('current');
$("#02").addClass('current');
}
if(y>=c-42 && y<d){
$('.info_tab li a[href*=#]').removeClass('current');
$("#03").addClass('current');
}
if(y>=d-42 && y<f){
$('.info_tab li a[href*=#]').removeClass('current');
$("#04").addClass('current');
}
if(y>=f-42 && y<g){
$('.info_tab li a[href*=#]').removeClass('current');
$("#05").addClass('current');
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.info_tab li a[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
});
</script>
<title>借款详情</title>
<style>
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
text-decoration:none;
font-family:"宋体";
font-size:14px;
font-style:normal;
color:#333333;
}
.jkxq{
margin:auto;
background:#fcfefd;
border:1px solid #d5e6e3;
}
.jkxq_left{
padding:28px 0 0 29px;
}
/*信息列表(开始)*/
.jkxq_left .information{
width:748px;
height:2339px;
border:1px solid #c1dfd8;
border-top:none;
background:#f8fdfc;
}
.jkxq_left .information .pd42{
padding-top:52px;
}
.jkxq_left .information .info_tab{
height:39px;
position:relative;
top:0;
_margin-top:14px;/*兼容ie6*/
z-index:1000;
}
.jkxq_left .information .info_tab ul{
height:37px;
width:748px;
border-top:1px solid #c1dfd8;
border-bottom:1px solid #27aa91;
background:url(images/tab_bg.png);
}
.jkxq_left .information .info_tab ul li{
list-style:none;
float:left;
width:124px;
height:37px;
line-height:37px;
text-align:center;
border-right:1px solid #c1dfd8;
cursor:pointer;
vertical-align:bottom;
}
.jkxq_left .info_tab ul li a{
display:block;
width:143px;
}
.jkxq_left .information .info_tab ul .current{
background:url(images/tab2.png) no-repeat;
position:relative;
_top:1px;/*兼容ie6*/
left:-1px;
margin-top:-15px;
height:38px;
line-height:38px;
width:143px;
padding-top:15px;
font-weight:bold;
border:none;
}
.jkxq_left .information .info_tab ul .last_li{
border-right:none;
}
.jkxq_left .information h3{
background:url(images/title1.png) no-repeat;
height:52px;
width:150px;
padding-left:41px;
margin-left:-11px;
line-height:52px;
text-align:left;
clear:both;
color:#FFF;
position:relative;
}
/*信用信息*/
.jkxq_left .information .info_lend .level{
width:680px;
height:38px;
margin:18px 0 0 33px;
line-height:38px;
background:#f9f9f9;
border:1px solid #e1e1e1;
}
.jkxq_left .information .info_lend p{
margin-top:20px;
width:100%;
font-size:12px;
line-height:22px;
text-align:center;
color:#999991;
}
.jkxq_left .information .info_lend p a{
font-size:12px;
}
.jkxq_left .information .info_lend .level .left{
float:left;
width:227px;
}
.jkxq_left .information .info_lend .level .right{
float:left;
}
.jkxq_left .information .info_lend .level label{
margin-left:11px;
color:#666666;
display:block;
float:left;
}
.jkxq_left .information .info_lend .level img{
border:none;
margin:9px 10px 0 0;
vertical-align:middle;
float: left;
}
.jkxq_left .information .info_lend .history,.jkxq_left .information .info_lend .data{
border-top:1px dashed #999999;
width:684px;
margin:5px 0 15px 33px;
}
.jkxq_left .information .info_lend .data .red2{
color:#ff0000;
}
.jkxq_left .information .info_lend .history h4,.jkxq_left .information .info_lend .data h4{
font-size:14px;
line-height:50px;
}
.jkxq_left .information .info_lend .history td,.jkxq_left .information .info_lend .data td{
width:168px;
height:20px;
line-height:20px;
text-align:left;
font-size:12px;
}
.jkxq_left .information .info_lend .history td em,.jkxq_left .information .info_lend .data td em{
font-size:12px;
}
/*用途说明*/
.jkxq_left .information .info_instructions{
}
.jkxq_left .information .info_instructions .use{
margin:25px 0 0 33px;
width:684px;
}
.jkxq_left .information .info_instructions .use p{
font-size:12px;
line-height:20px;
}
.jkxq_left .information .info_instructions .use h4{
font-size:12px;
line-height:25px;
}
/*档案*/
.jkxq_left .information .info_audit .necessary,.jkxq_left .information .info_audit .optional{
padding-top:18px;
margin:0px 0 0 33px;
width:684px;
}
.jkxq_left .information .info_audit .necessary ul li,.jkxq_left .information .info_audit .optional ul li{
list-style:none;
border-bottom:1px dashed #999999;
height:30px;
line-height:30px;
font-size:12px;
vertical-align:bottom;
}
.jkxq_left .information .info_audit .necessary ul li:first-child,.jkxq_left .information .info_audit .optional ul li:first-child{
border:none;
}
.jkxq_left .information .info_audit .necessary ul li label,.jkxq_left .information .info_audit .optional ul li label{
display:block;
float:left;
}
.jkxq_left .information .info_audit .necessary ul li h4,.jkxq_left .information .info_audit .optional ul li h4{
width:225px;
float:left;
}
.jkxq_left .information .info_audit ul li .black{
color:#333333;
}
.jkxq_left .information .info_audit .div1{
width:225px;
text-align:left;
font-size:12px;
float:left;
}
.jkxq_left .information .info_audit .div2{
width:156px;
text-align:left;
font-size:12px;
float:left;
}
.jkxq_left .information .info_audit .div2 img{
border:none;
vertical-align:middle;
margin-top:8px;
padding-left:5px;
}
.jkxq_left .information .info_audit .div3{
width:198px;
text-align:left;
font-size:12px;
color:#999999;
float:left;
}
.jkxq_left .information .info_audit .div4{
width:87px;
text-align:left;
font-size:12px;
color:#999999;
float:left;
}
/*记录*/
.jkxq_left .information .info_record{
width:684px;
}
.jkxq_left .information .info_record .now_bid_2,.jkxq_left .information .info_record .list{
margin-left:33px;
clear:both;
}
.jkxq_left .information .info_record .now_bid_2 .now_bid_2_left,.jkxq_left{
float:left;
}
.jkxq_left .information .info_record .now_bid_2 .now_bid_2_right{
float:right;
}
.jkxq_left .information .info_record .now_bid_2 .now_bid_2_left ul{
width:410px;
}
.jkxq_left .information .info_record .now_bid_2 .now_bid_2_left ul li{
list-style:none;
height:32px;
line-height:32px;
vertical-align:bottom;
}
.jkxq_left .information .info_record .now_bid_2 .now_bid_2_left ul li label{
color:#666666;
}
.jkxq_left .information .info_record .list ul li{
list-style:none;
height:28px;
line-height:28px;
border:1px solid #e4e4e4;
border-top:none;
background:#ffffff;
vertical-align: bottom;
}
.jkxq_left .information .info_record .list ul li:first-child{
border-top:1px solid #e4e4e4;
background:#f7f7f7;
}
.jkxq_left .information .info_record .list ul li:first-child span{
color:#8f8f8f;
}
.jkxq_left .information .info_record .list ul li span{
text-align:center;
font-size:12px;
display:block;
float:left;
}
.jkxq_left .information .info_record .list ul li span img{
border:none;
}
.jkxq_left .information .info_record .list ul li .span1{
width:55px;
}
.jkxq_left .information .info_record .list ul li .span2{
width:155px;
}
.jkxq_left .information .info_record .list ul li .span3{
width:80px;
}
.jkxq_left .information .info_record .list ul li .span4{
width:125px;
}
.jkxq_left .information .info_record .list ul li .span5{
width:70px;
}
.jkxq_left .information .info_record .list ul li .span6{
width:156px;
}
.jkxq_left .information .info_record .now_bid_2{
margin-top:20px;
}
.jkxq_left .information .info_record .now_bid_2 .now_bid_2_right .btn2 .btn3{
background:url(images/toubiao2.png) no-repeat;
width:162px;
height:45px;
margin-right:75px;
border:none;
}
.jkxq_left .information .info_record .now_bid_2 .now_bid_2_right .tou_ying{
background:url(images/touying.png) no-repeat;
width:162px;
height:38px;
}
/*用户留言*/
.jkxq_left .information .info_user{
}
.jkxq_left .information .info_user .green{
color:#00997a;
}
.jkxq_left .information .info_user .info_user_list,.jkxq_left .information .info_user .questions{
margin:15px 0 0 0px;
padding-left:33px;
}
.jkxq_left .information .info_user .info_user_list ul li{
list-style:none;
width:615px;
height:100px;
border-bottom:1px dashed #ced2d2;
vertical-align:bottom;
}
.jkxq_left .information .info_user .info_user_list ul li img{
border:none;
margin-top:10px;
float:left;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right{
width:555px;
float:right;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right .bd{
border:1px solid #d0ebfa;
height:34px;
line-height:34px;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right .pd{
padding-left:8px;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right span{
height:28px;
line-height:28px;
color:#a9adac;
display:block;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right span i{
color:#a9adac;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right span .blod{
font-weight:bold;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right span .i{
font-style:italic;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right span label,.jkxq_left .information .info_user .info_user_list ul li .user_list_right span em{
font-size:12px;
}
.jkxq_left .information .info_user .info_user_list ul li .user_list_right span img{
float:none;
border:none;
}
.jkxq_left .information .info_user .questions p{
line-height:40px;
}
.jkxq_left .information .info_user .questions .text{
width:355px;
height:102px;
border:1px solid #cccccc;
background:#fafafa;
}
.jkxq_left .information .info_user .questions .text textarea{
width:355px;
height:102px;
resize:none;
border:none;
background:#fafafa;
outline:none;
}
.jkxq_left .information .info_user .questions .btn4 button{
background:url(images/tijiao.png) no-repeat;
border:none;
width:95px;
height:32px;
margin-top:15px;
color:#FFF;
font-weight:bold;
cursor:pointer;
}
</style>
</head>
<body>
<div class="jkxq">
<div class="jkxq_left">
<p>哈哈</p>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<!--information(信息列表)开始-->
<script type="text/javascript">
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
var pos = element.css("position"); //当前元素距离页面document顶部的距离
$(window).scroll(function() { //侦听滚动时
var scrolls = $(this).scrollTop();
if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
if (window.XMLHttpRequest) { //如果不是ie6
element.css({ //设置css
position: "fixed", //固定定位,即不再跟随滚动
top: 14 //距离页面顶部为0
});
} else { //如果是ie6
element.css({
position:"absolute",
top: scrolls //与页面顶部距离
});
}
}else {
element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式
position: pos,
top: 0
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
$(function(){
$(".info_tab").smartFloat();
});
</script>
<div class="information">
<!--info_tab(导航菜单)开始-->
<div class="info_tab">
<ul>
<li><a id="01" class="current" href="#info_lend">详细信息</a></li>
<li><a id="02" href="#info_audit">档案</a></li>
<li><a id="03" href="#info_instructions">说明</a></li>
<li><a id="04" href="#info_record">记录<span class="red">（15）</span></a></li>
<li class="last_li"><a id="05" href="#info_user">用户留言<span class="red">（3）</span></a></li>
</ul>
</div>
<!--info_tab(导航菜单)结束-->
<a id="1" name="info_lend"></a>
<div class="info_lend pd42">
信用信息
<p>哈哈</p>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<a id="2" name="info_audit"></a>
<div class="info_audit pd42">
档案
<p>哈哈</p>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<a id="3" name="info_instructions"></a>
<div class="info_instructions pd42">
用途说明
<p>哈哈</p>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<a id="4" name="info_record"></a>
<div class="info_record pd42">
记录
<p>哈哈</p>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<a id="5" name="info_user"></a>
<div class="info_user pd42">
用户留言
<p>哈哈</p>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<a id="6" name=""></a>
</div>
</div>
</div>
</body>
</html>
3772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
