css怎么给第4个li和第8个li之间设置样式

css怎么给第4个li~8个li设置样式,有没有比连续写五个li:nth-child好
图片说明

14个回答

用jquery的话,就是
用ul>li的:gt(2)和:lt(8)即可处理。

 $('li').filter(function (index) {return index>2&&index<8 }).css('color','#f00')

$('ul li:eq(3)').css('color', 'red');
$('ul li:eq(4)').css('color', 'red');
$('ul li:eq(5)').css('color', 'red');
$('ul li:eq(6)').css('color', 'red');
$('ul li:eq(7)').css('color', 'red');

需要设置样式的标签都定义一个class 然后只对该class设置样式 这样比较好了

weixin_36977678
乔岱马 就设置一个间距而已
2 年多之前 回复

肯定是共用一个类名啊

css 伪元素选择器

<!DOCTYPE html>



Insert title here .addstyle{ border: 2px solid; }


1111111
    var i = 1; var sul = document.getElementById('uu'); while(i<10){alert(22) var lia = document.createElement("li"); lia.appendChild(document.createTextNode('new'+i)); if(i%4 == 0){alert(333) lia.setAttribute("class","addstyle"); } sul.appendChild(lia) ; i++; }


li{color:red}
li:nth-child(4n){color:blue}

直接在第四个和第八个li之间加类标签 控制就行了

共用一个name,给name添加属性就可以了

共14条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
css ul li 居中问题,li left之后还是实现居中

代码如下,像是这种,如何让多个li float之后,还是居中?我给ul加了宽度之后,只是ul居中,UL里面的li还是float:left排列,怎么实现ul里面的li居中?![图片说明](https://img-ask.csdn.net/upload/201609/27/1474985484_730050.jpg) ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> ul{ list-style:none; margin:0 auto; text-align:center; background-color:#90F8B5} li{ width:72px; height:38px; background-color:#999; margin:15px; float:left;} </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html> ```

li标签无法正常显示,display值为none

1 代码 ``` <style> .ck-slide{ width:720px; } .ck-slide-wrapper{ height: 100%; } </style> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="../github/myck_slide-master/images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="../github/myck_slide-master/images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <script src="../github/myck_slide-master/js/myslide.js"> </script> <script> /* $(".ck-slide").ckSlide({ autoPlay:true })*/ </script> </div> //引入的外部样式 * { margin: 0px; padding: 0px; } .ck-slide { margin: 100px 0 0 0; left: 50%; margin-left: -400px; width:800px; position: relative; } .ck-slide .ck-slide-wrapper { top: 0; left: 0; z-index: 1; width:100%; position: absolute; } .ck-slide-wrapper li{ list-style: none; display: block; } ``` 2 显示效果 ![图片说明](https://img-ask.csdn.net/upload/201610/27/1477576361_55061.png) ![图片说明](https://img-ask.csdn.net/upload/201610/27/1477576370_818515.png) 3 问题 想实现的效果是轮播。 上述代码在浏览器中打开的时候可以正常显示第一章图片。 按照我个人的理解,ul下面放置了li标签,并且ck-slide样式被设置了指定的宽度居中显示,那么ul下面的li标签会在垂直方向上分布显示,但是实际效果却仅仅显示了第一张图片的效果。通过提示工具查看发现ul下面的li标签除了第一个li标签外 其他li标签的display被设置为了none,这是为什么呀??我没有设置display为none呀 ------------------------------------------------------------- # **有朋友提到js文件的问题,这里并没有执行js代码,我提供全部代码:** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/slide.css"> <script src="./js/jquery.min.js"></script> <style> .ck-slide{ width:720px; height:320px; } .ck-slide-wrapper{ height: 100%; } </style> </head> <body> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a> <div class="ck-slideBox"> <div class="slideWrap"> <ul> <li class="current"><em>1</em></li> <li><em>2</em></li> <li><em>3</em></li> <li><em>4</em></li> </ul> </div> </div> </div> </body> </html> ``` 使用到的图片 ![图片说明](https://img-ask.csdn.net/upload/201610/29/1477732376_480707.jpg) 感谢给位朋友的指点!

想问关于html,css基础问题,关于块之间的间隙。

想问的是为什么红色框框和灰色框框之间有条缝隙,我用浏览器查看发现没有项目占着那个位置,但是就是有个空隙在中间。 html的代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> <title>My First Website</title> </head> <body> <header> <nav class="clearfix"> <!--导航开始--> <div class="logo c1">FIRST</div> <div class="items c2"> <ul> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> </ul> </div> </nav> <div class="inner"> <h1>My First Website</h1> <div class="h1-sub"> 16.11.09 </div> </div> </header><!--导航结束--> <div class="content"><!--内容开始--> <div class="contanter"> <div class="story-item"> <h2>第一个只用了html和css的网站</h2> <div class="summary">用了只是学了两三天的技能来实现一个网页的布局,看似简单却一点都不容易,margin的问题真的很多,div也是一个大问题,主要是要理解选择器之间的关系。 </div> <div class="info">16.11.10|作者:Chan|阅读:1</div> </div> </div> </div><!--内容结束--> <footer><!--页尾开始--> </footer><!--页尾开始--> </body> </html> ``` css的代码 ``` *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1{ margin: 20px; } ul{ margin: 0; padding: 0; } .c1,.c2{ position: relative; float: left; } .c1{ width: 16.666666%; } .c2{ width: 83.333333%; } .clearfix:before { content: " "; display:table; } .clearfix:after { content: " "; display:table; } .logo{ font-size: 20px; padding: 18px; font-weight: 900; color: #ddd; } header{ min-height: 350px; background-color: #aaa; } nav{ background-color: #333; } nav .items ul{ float: right; padding-right: 20px; } nav ul li{ list-style: none; display: inline-block; } nav ul li a{ display: inherit; text-decoration: none; padding: 20px 10px; color: #fff; } /*nav end*/ .inner { width: 400px; margin: 150px auto 20px; position: relative; text-align: center; } .h1-sub{ font-weight: 900; text-align:right; padding: 20px; } .contanter{ width: 1000px; margin: 0 auto; background-color: red; } .story-item h2{ font-size: 30px; margin: 10px 0; font-family: Microsoft Yahei; color: #444; } .story-item .summary{ font-size: 18px; font-family: Microsoft Yahei; width: 500px; font-weight: 100; color: #777; } ```

css加了:hover出现字体乱位

<a>未加:hover ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564490980_59816.png) <a>加了:hover ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564491036_535013.png) ``` <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } #img{/*背景图*/ background-image: url(1.jpeg); } .log{/*文本框*/ width: 300px; height: 40px; margin: 15px 10px 10px 10px;/*上 右 下 左,两个文本框的边距*/ text-indent: 10px; } .box{/*盒子*/ width: 399px; height: 279px; border-radius: 4px; border: 5px solid green; border-color: transparent; padding: 25px; margin: 25px; position: absolute; left: 780px; top: 150px; background-color: white; } .butt{/*登录按钮*/ width: 300px; height: 50px; margin: 10px 10px 10px 10px; background-color: rgba(134,206,47,1.00); } a:hover{ position: absolute; left: 368px; top: 295px; font-size: 15px; text-decoration:none; /*鼠标放上去有下划线*/ } </style> </head> <body id="img"> <div> <div style="text-align: center"> <h1>欢迎你的到来</h1> <div class="box"> <form action="" method="post"> <input type="text" name="ID" placeholder="学号" class="log"><br> <input type="text" name="name" placeholder=" 姓名" class="log"><br> <input type="submit" value="登录" class="butt"> </form> <div> <a href="#">意见反馈</a> </div> </div> </div> </div> </body> </html> ```

在js中控制样式出现问题,求助。

在html页面需要显示以下数据 ``` <!--第一行数据--> <div class="main_store_slide" style="margin-top:70px;"> <div class="swiper-container swiper-container-horizontal swiper-container-free-mode"> <div class="swiper-wrapper"> <!--1--> <div class="swiper-slide swiper-slide-active lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">122</li> <li class="s2">2323</li> </ul> </div> <!--2--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">3434</li> <li class="s2">454</li> </ul> </div> <!--3--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">334</li> <li class="s2">343443</li> </ul> </div> <!--4--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">12</li> <li class="s2">34</li> </ul> </div> </div> </div> </div> <!--end第一行数据--> <!--第二行数据--> <div class="main_store_slide" style="margin-top:70px;"> <div class="swiper-container swiper-container-horizontal swiper-container-free-mode"> <div class="swiper-wrapper"> <!--1--> <div class="swiper-slide swiper-slide-active lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">122</li> <li class="s2">2323</li> </ul> </div> <!--2--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">3434</li> <li class="s2">454</li> </ul> </div> <!--3--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">334</li> <li class="s2">343443</li> </ul> </div> <!--4--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">12</li> <li class="s2">34</li> </ul> </div> </div> </div> </div> <!--end第二行数据--> …… ``` 因这些数据是从接口中读取,然后在页面上显示, 所以,在js中控制相关样式,如下所示: ``` <script type="text/javascript"> <!-- $(function(){ var str="" var j=0; for(var i=0;i<18;i++){ j++ if(j%4==0){ str+="<div class='main_store_slide' style='margin-top:70px;'>"; str+="<div class='swiper-container swiper-container-horizontal swiper-container-free-mode'>"; str+="<div class='swiper-wrapper'>"; } str+="<div class=\"swiper-slide swiper-slide-active lawyer_b\" >"; str+="<ul class=\"ul1\" style=\"display: block;\">"; str+="<li class=\"s1\">12</li>"; str+="<li class=\"s2\">34</li>"; str+=" </ul> </div>"; if(j%4==0){ str+="</div>"; str+="</div>"; str+="</div>"; } } $("#divid").html(str); }) //--> </script> ``` 请问 以上 js中该 如何修改。 有试过 用 :nth-of-type ,发现 样式乱了。

熟悉jquery及css的朋友进来帮我改进下这个tab选项卡,谢谢

大家好,我很喜欢如下这个选项卡,但是现在碰到一个问题,就是当页面中需要2个或以上个数的选项卡时会出现问题, 怎么使各个<div class="tab">相互独立,不相互影响,并在打开页面时显示[b]选项1和选项4[/b],代码如下: 请各位帮忙: [code="java"]<!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>jquery实现tab淡变选项卡效果</title> <script type="text/javascript" src="jquery1.4.2.min.js"></script> <style type="text/css"> .tab { background-color: #FAFAFA; margin: 5px 8px; padding: 5px 10px; } .tab p span { background-color: #EFEFEF; border: 1px solid #CCCCCC; cursor: pointer; margin-right: 3px; padding: 2px 5px; } .tab p span.current { background-color: #FAFAFA; border-bottom-color: #fafafa; } .tab p { border-bottom: 1px solid #CCCCCC; font-weight: bold; padding: 0 8px 2px; margin: 0; } .tab ul { width:500px; background:url(tu/about.jpg) right no-repeat; margin: 2px auto 2px 8px; padding:0; } .tab li { width:300px; border-bottom: 1px dotted #CCCCCC; padding-bottom: 3px; margin: 2px 0; list-style-type=none; } .tab .mhot, .tab.allhot { display: none; } </style> <script type="text/javascript"> $(document).ready(function() { $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 $(".tab ul:not(:first)").hide(); //隐藏其它的UL $(".tab span").mouseover(function() { $(".tab span").removeClass("current"); //去掉所有SPAN的样式 $(this).addClass("current"); $(".tab ul").hide(); $("." + $(this).attr("id")).fadeIn('slow'); }); }); </script> </head> <body> <p></p> <p>JS如果没加载请刷新</p> <p></p> <div class="tab"> <p> <span id="tab1">选项1</span><span id="tab2">选项2</span><span id="tab3">选项3</span></p> <ul class="tab1"> <li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="http://www.poluoluo.com" target="_blank">www.poluoluo.com</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a></li></ul> <ul class="tab2"> <li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li></ul> <ul class="tab3"> <li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a> </li><li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li></ul> </div> <div class="tab"> <p> <span id="tab21">选项4</span><span id="tab22">选项5</span><span id="tab23">选项6</span></p> <ul class="tab21"> <li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="http://www.poluoluo.com" target="_blank">www.poluoluo.com</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a></li></ul> <ul class="tab22"> <li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li></ul> <ul class="tab23"> <li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a> </li><li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li></ul> </div> </body> </html>[/code]

Bootstrap 分页标签不显示CSS效果

``` <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> ``` ![图片说明](https://img-ask.csdn.net/upload/201708/16/1502857292_922355.png) 其余部分的标签都有显示。 ``` <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="txt/html; charset=utf-8" /> <title>Lettiy</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/> <style> .left{ float:left; } .right{ float:right; } .rnav{ height:80px; line-height:80px; } .badge{ background-color:teal; } .interface{ width:100px; height:100px; } </style> </head> ``` ``` <!-- 时间轴主体文章部分 --> <div class="col-md-10 left" style="padding:0;"> <!--巨幕显示最新信息--> <div class="jumbotron"> <h1>Welcome to Lettiy!</h1> <p>this is the demo test Page</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <!--文章显示区域 采用表格形式进行填充--> <div class="container-fluid" style"margin-top:50px;"> <table id="postView" style="width:100%;"> <!--第一行--> <tr> <td class="col-md-3"> <div class="thumbnail"> <img src="img/java.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/java.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/java.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/java.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> </tr> <!--第二行--> <tr> <td class="col-md-3"> <div class="thumbnail"> <img src="img/php.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/php.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/php.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/php.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> </tr> </table> <!--分页器--> <div class="col-md-3 right"> <nav aria-label="Page navigation"> <ul class="pagination pagination-lg"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> </div> </div> </div> ``` ``` <!--BootStrap jquery--> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201708/16/1502857452_49492.png)

如何用JS实现:鼠标点击一个DIV里的a标签时,在另外一个DIV显示出该a标签的内容

刚开始学JS,然后网站中需要一个效果,就是点击左边DIV里的超链接,然后把这个超链接的内容(也就是<a href=""></a>之间的内容)显示在另一个DIV里面,求助前辈~~为什么我写的出不来呢? ``` <!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>无标题文档</title> <style> #div0{ width:700px; height:500px; border:3px #000000 solid;} #div1{ width:300px; height:200px; float:left; background-color:#CCCCCC;} #div2{ width:300px; height:200px; float:right; background-color:#F00;} </style> <script type="text/javascript"> window.onload=function(){ var oto1=document.getElementById('div1'); var oto2=oto1.getElementsByTagName('li'); var oto3=document.getElementById('div2'); for(var i=0;i<oto2.length;i++){ oto2.onclick=function(){ oto3.innerHTML=this.innerHTML; } } } </script> </head> <body> <div id="div0"> <div id="div1"> <ul> <li><a href="#">oh my</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div> <div id="div2"></div> </div> </body> </html> ``` 前辈看看是不是我哪里出错了

jsp连接数据后样式失效,请大神帮忙!!!

各位大神,本人小白,初学jsp。在做完连接数据库并将数据显示到页面上后,页面的所有样式都无效了,以下是我的代码。 ``` <%@page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="java.util.ArrayList"%> <%@page import="org.cz.bean.Select"%> <% /*如果还未登录系统*/ if (session.getAttribute("user")==null || session.getAttribute("user")=="") out.println("<script>alert('未登录系统!');top.location.href='../login.jsp';</script>"); %> <%-- <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> --%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%-- <base href="<%=basePath%>"> --%> <title>数据查询</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- css文件 --> <link rel="stylesheet" type="text/css" href="../css/s_css/stys_index.css"><!-- 控制布局 --> <link type="text/css" rel="stylesheet" href="../css/s_css/style_index.css"/><!-- 控制样式 --> <!--js文件 --> <script src="../js/s_js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="../js/s_js/s_index.js" type="text/javascript"></script> </head> <body> <% if(request.getAttribute("result")!= null) {%> <script> alert('<%=request.getAttribute("result")%>'); </script> <% } %> <div class="wrap"> <div class="layout"> <div class="content"> <!-- 导航 --> <div class="Mynav"> <div class="menuleft"><a href="#">重管理系统后台</a></div> <div class="menu"> <ul class="nav"> <li></li> <li><a href="#">数据查询</a></li> <li><a href="#">导 出</a></li> <li><a href="#">查 看</a></li> <li><a href="#">退出</a></li> <!-- <li><a href="#">联系我们</a></li> --> </ul> </div> </div> <!-- 数据查询》结果 --> <div class="title"> <p class="title-w">数据查询</p> </div> <!-- 查询结果开始 --> <div class="main" overflow="auto"> <table class="tablenav" id="results"> <caption> <h4><strong>查询结果</strong></h4> <ul class="pagination" style="float:left;"> <% //String Xm = (String)request.getAttribute("Xm"); int recordCount = (Integer)request.getAttribute("recordCount"); //int pageSize = (Integer)request.getAttribute("pageSize"); int currentPage = (Integer)request.getAttribute("currentPage"); int totalPage = (Integer)request.getAttribute("totalPage"); String pageFootStr = ""; int next, prev; prev=currentPage-1;//上一页 next=currentPage+1;//下一页 String actionPath = "Select?action=queryall"; //&Xm=" + Xm pageFootStr+="<form aciont='" + actionPath + "' method=post>"; //pageFootStr += "查询到<span>"+recordCount+"</span>条记录"+" 共<span>"+totalPage+"</span>页"; //pageFootStr +=" 第<span>"+currentPage+"</span>页 "; pageFootStr += "<li><a >共<strong>"+recordCount+"</strong>条记录,<strong>"+totalPage+"</strong>页</a></li>"; if(currentPage>1) pageFootStr += "<li title=首页><a href="+ actionPath + "&currentPage=1"+">&laquo;</a></li>"; else pageFootStr += " &laquo; "; if(currentPage>1) pageFootStr += "<li title=上一页><a href=" + actionPath + "&currentPage=" + prev + ">&lsaquo;</a></li>"; else pageFootStr += "&lsaquo; "; pageFootStr += " <li title=当前页 class=active><a>"+currentPage+"</a></li>"; if(currentPage<totalPage) pageFootStr += " <li title=下一页><a href=" + actionPath + "&currentPage=" + next + ">&rsaquo;</a></li>"; else pageFootStr += "&rsaquo; "; if(totalPage>1&&currentPage!=totalPage) pageFootStr += " <li title=最末页><a href=" + actionPath + "&currentPage=" + totalPage + ">&raquo;</a></li>"; else pageFootStr += "&raquo;"; pageFootStr+="<li>第<input name=currentPage type=text size=2>页 <input type=submit value=GO></form></li>" ; %> </ul> <div style="float:right;padding:5px"> <!-- <a href="#" class="btn" onclick="showAdd()">添加员工</a> --> </div> </caption> <!-- <form method="post" action="Select?action=query2"> --> <thead> <tr> <th>单号</th> <th>净重编号</th> <th>车号</th> <th>业务类型</th> <th>货名</th> <th>发货单位</th> <th>收货单位</th> <th>司机</th> <th>仓库</th> <th>备注</th> </tr> </thead> <tbody> <div> <% //从request域中取得要显示的某页信息 ArrayList selectList = (ArrayList)request.getAttribute("selectList"); /*遍历每个的信息进行显示*/ for(int i=0;i< selectList.size();i++){ Select select = (Select)selectList.get(i); %> <tr> <td><%=select.getCode()%></td> <td><%=select.getCodeNet()%></td> <td><%=select.getCarCode()%></td> <td><%=select.getTheType()%></td> <td><%=select.getSp1()%></td> <td><%=select.getSp2()%></td> <td><%=select.getSp3()%></td> <td><%=select.getSp4()%></td> <td><%=select.getSp5()%></td> <td><%=select.getSp6()%></td> </tr> <% } %> <tr><td colspan=10> <%=pageFootStr %> &nbsp; </td> </tr> </div> </tbody> <!-- </form> --> </table> <!-- 查询结果结束 --> </div> </div> <!--/content--> </div> <!-- /layout --> <jsp:include page="../foot.jsp"></jsp:include> </div> <!-- /wrap --> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201603/24/1458751776_349091.jpg) ![图片说明](https://img-ask.csdn.net/upload/201603/24/1458751820_784105.jpg)

新手提问CSS box-sizing:border-box问题

新手才开始学css没多久,所以提的问题比较基础 <!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>无标题文档</title> <style> div{font-size:24px; text-align:center; border:4px solid ; width:400px; } .one{ border-color:#F00; padding:30px; box-sizing:border-box;} .two{ border-color:#3FF;} </style> </head> <body> <div class="one">the first test </div> <div class="two"> the second test </div> </body> </html> ![图片说明](https://img-ask.csdn.net/upload/201704/26/1493181919_630133.png) 加上box-sizing:border-box;后 第一个div框还是变大,哪里出了问题呢?

求教:怎么样给16个div设置data-index=""使 控制另一个div中16张图片显示隐藏?

怎么样给16个div设置data-index=""使 控制另一个div中16张图片显示隐藏? 代码: <div data-v-4a1fb872="" data-v-311834f5="" class="wrapper"> <div data-v-4a1fb872="" class="bg-left" style="background-image:url(小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/index2bg.2dead38.png)"> </div> <div data-v-4a1fb872="" class="part"> <div data-v-4a1fb872="" class="phone" style="background-image:url(小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/phone.1a1ffa5.png)"> <div data-v-4a1fb872="" class="phone-img"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-1.514b9e5.png" alt=""> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-2.fe2440c.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-3.61fa415.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-1.77e24af.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-2.03c77b0.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-3.68454c5.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-1.378751a.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-2.5415338.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-3.3522ddc.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-1.80e2eb2.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-2.67cb670.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-3.dc4d534.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-4.2cbe036.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-1.11fab89.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-2.2b657e7.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-3.f4f1d4b.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-4.4752a09.png" alt="" style="display: none;"> </div> </div> <div data-v-4a1fb872="" class="number"> 02 </div> <div data-v-4a1fb872="" class="con"> <div data-v-4a1fb872="" class="title"> 为销售赋能的小名片 </div> <div data-v-4a1fb872="" class="mark"> 产品展示 </div> <ul data-v-4a1fb872="" class="list"> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon1"> </div> <div data-v-4a1fb872="" class="name"> 小名片展示 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 统一公司形象,全员分享,小名片直达企业官网,产品、服务的展现 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="0" class="link-item"> 名片信息 </div> <div data-v-4a1fb872="" data-index="1" class="link-item"> 个人信息 </div> <div data-v-4a1fb872="" data-index="2" class="link-item"> 更多信息 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon2"> </div> <div data-v-4a1fb872="" class="name"> 绑定小官网 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 企业官网、产品、服务的完整展现 </p> <p data-v-4a1fb872=""> 帮助访客第一时间了解企业,更快促成业务交流 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="3" class="link-item"> 查看名片 </div> <div data-v-4a1fb872="" data-index="4" class="link-item"> 查看企业小官网 </div> <div data-v-4a1fb872="" data-index="5" class="link-item"> 小官网多样式介绍 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon3"> </div> <div data-v-4a1fb872="" class="name"> 销售雷达展示 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 访问消息实时推送,名片访客即客户,不加好友就可微信沟通不错过每个商机;探测访客访问动态,让销售沟通更高效 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="6" class="link-item"> 实时推送访客消息 </div> <div data-v-4a1fb872="" data-index="7" class="link-item"> 不加微信好友沟通 </div> <div data-v-4a1fb872="" data-index="8" class="link-item"> 即时聊天 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon4"> </div> <div data-v-4a1fb872="" class="name"> 智能AI分析 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 分析客户兴趣与活跃度,挖掘深度用户 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="9" class="link-item"> 访客数据分析 </div> <div data-v-4a1fb872="" data-index="10" class="link-item"> 访客互动情况 </div> <div data-v-4a1fb872="" data-index="11" class="link-item"> 销售人员能力分析 </div> <div data-v-4a1fb872="" data-index="12" class="link-item"> 销售详情分析 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon5"> </div> <div data-v-4a1fb872="" class="name"> 商机SCRM </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 助销售进行客户标签化管理,客户跟进记录管理,客户AI分析 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="13" class="link-item"> 商机标签化管理 </div> <div data-v-4a1fb872="" data-index="14" class="link-item"> 销售跟进记录 </div> <div data-v-4a1fb872="" data-index="15" class="link-item"> 客户访问轨迹 </div> <div data-v-4a1fb872="" data-index="16" class="link-item"> 客户兴趣分析 </div> </div> </div> </li> </ul> </div> </div> </div> ``` ``` 刚毕业的实习生,在网上扒的网站,但是js没有用,我也没学过js;求教怎么解决? css代码太多了,我也不知道拿那一部分所以就不放了, 这个网站就是我复制的网站 www.xcxzhan.com 里面可以拿到css,js 可以拿下来,但是不知道为什么没有用。 求大佬教学!!!跪谢!!!

麻烦看下这段JQ代码,一点性能问题

``` <head> <style type="text/css"> .scroll_div{width:1000px; height:370px; margin:0 auto; padding:10px;} .scroll_div .pic{width:820px; height:370px; overflow:hidden; position:relative; float:left;} .scroll_div .pic li{width:820px; height:370px; position:absolute; top:0; left:0; display:none;} .scroll_div .btn{float:right; width:173px;} .scroll_div .btn li{width:173px; height:66px; display:block; float:left; text-align:center; color:#fff; font:18px/100% "微软雅黑"; font-weight:bold; background:#008dd8; margin-bottom:10px; line-height:66px; cursor:pointer;} .scroll_div .btn li.on{background:#d73737;} li {list-style:none;} img{width:100%;} </style> </head> <body> <div class="scroll_div"> <ul class="pic"> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> <li><img src="images/5.jpg" /></li> </ul> <ul class="btn"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> <li>项目五</li> </ul> </div> </body> <script type="text/javascript"> $(function(){ var listLen = $(".pic li").length, //li的个数 i=0,//下标初始值 setInter,speen = 1500;//自动运行间隔 /*图片轮播*/ $(".btn li:last").css({"margin":"0px 0px 0px 0px"});//最后一个按钮样式 $(".btn li:first").addClass("on");//为每个按钮增加的样式 $(".pic li:first").show();//第一个图片展示 $(".btn li").each(function(index,element){//点击显示不同图片 $(element).click(function(){ i = index;//选择器位置 $(this).addClass("on").siblings().removeClass("on");//为当前按钮高亮 $(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); })//图片随着按钮的切换动作 $(".pic li").hover(function(){//鼠标悬停停止自动播放(停止Interval) clearInterval(setInter); },function(){ outPlay(); }); }) out_fun = function(){ if(i < listLen){i++;}else{i=0;};//判定位置,超过位置则重置到第一张位置。这里重置到第一张时会有延迟,目测比300多一点。 $(".btn li").eq(i).addClass("on").siblings().removeClass("on"); $(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); } outPlay = function(){ setInter = setInterval("out_fun()",speen);//周期循环调用 } outPlay();//自动播放 }) </script> ``` 这是一段自动播放和切换的JQ代码,然后发现当播放到最后一张跳到第一张时会比平常的播放时间(这里是300)要稍长一点,不知道问题在哪,请问该如何解决或者优化?

求检查一下轮播代码错误!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播学习</title> <style type="text/css"> /*清除默认样式*/ *{margin: 0px;padding: 0px;list-style: none;} /*设置样式*/ .wrap{ height: 170px; width: 500px; overflow: hidden; margin: 100px auto; position: relative; } .wrap ul{ position: absolute; } .wrap ul li{ height: 170px; } .wrap ol{ position: absolute; right: 10px; bottom: 10px; } .wrap ol li{ float: left; height: 20px; width: 20px; background: rgba(255,193,193,0.5); border: 1px solid #FFC125; border-radius: 2px; margin-left: 10px; line-height: 100%; text-align: center; } .wrap ol li.active{ background-color: #330099; color: #fff; border: 2px solid green; } </style> </head> <body> <div id="wrap" class="wrap"> <ul id="pic"> <li><img src="./photos/tu1.jpg" alt="" style="height: 170px;width: 500px;"></li> <li><img src="./photos/tu2.jpg" alt="" style="height: 170px;width: 500px;"></li> <li><img src="./photos/tu3.jpg" alt="" style="height: 170px;width: 500px;"></li> <li><img src="./photos/tu4.jpg" alt="" style="height: 170px;width: 500px;"></li> <li><img src="./photos/tu5.jpg" alt="" style="height: 170px;width: 500px;"></li> </ul> <ol id="list"> <!-- 第一个按钮默认样式 --> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <script type="text/javascript"> window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic'), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoplay,2000); // 定义图片切换函数 function autoplay(){ index++; if(index>=list.length) { index=0; } changeoptions(index); } //鼠标移上时,整个容器停止图片自动切换 wrap.onmouseover=function(){ clearInterval(timer); } //鼠标离开时,整个容器开始继续图片自动切换 wrap.onmouseout=function(){ timer=setInterval(autoplay,2000); } //遍历数字导航,实现划过就切换至相应图片 for (var i=0;i<list.length;i++) { list[i].id=i; list[i].onmouseover=function(){ clearInterval(timer); changeoptions(this.id); } } function changeoptions(curindex){ for(var j=0;j<list.length;j++){ list[j].calssName=''; pic.style.top=0px; } list[curindex].calssName='active'; pic.style.top=-curindex*170+'px'; index=curindex; } } </script> </body> </html>

问一个关于一个session的问题在struts2 中

先看看看我的一段代码, [code="java"]public String toLogin() throws Exception { try { Map<String, Register> session=ActionContext.getContext().getSession(); register = authorService.loginValid(userName, passWord); if(register !=null){ session.put("register",register); id = register.getId(); return SUCCESS; }else{ addActionError("用户名/密码不匹配"); this.setTip("<font color='red'>对不起您的帐号或密码有误!</font>"); return "failure"; } } catch (Exception e) { // TODO: handle exception this.setTip("<font color='red'>对不起,系统出现故障,请稍后再登录!</font>"); e.printStackTrace(); return "failure"; } } [/code] [code="java"]<action name="login" class="loginAction" method="toLogin"> <result name="input">/login/authorlogin.jsp</result> <result name="failure">/login/authorlogin.jsp</result> <result name="success" type="redirect"> countmessage.action?id=${id} </result> </action> <action name="countmessage" class="messageAction" method="countMessagAuthor"> <result name="success">/login/author.html</result> </action> [/code] 再看这个页面的数据展现 [code="java"] <div class="tit" ><img src="../images/045631213.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;用户名:<a href='<s:url action="details"><s:param name = "id" value = "#session.register.id"/></s:url>'> ${session.register.realName}</a></div> [/code] magazineOA/countmessage.action?id=5 第一次登录红色 部分显示在页面上当时就在刷新页面后是${session.register.realName}不再显示。我想是action的问题吧,但是怎么才能把这个为题解决呢? [b]问题补充:[/b] 我想应该是,因为如果我刷新页面的话应该又一次执行countmessage的action,没有执行前面那个action的问题呀,但是应该怎么解决呢?? [b]问题补充:[/b] 本页面刷新后变成这样 [code="java"] <div class="tit" ><img src="../images/045631213.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;用户名:<a href='/magazineOA/login/details.action'> </a> </div> [/code] [b]问题补充:[/b] 我使用的框架。我只刷新这一个页面,那个没有关系吧?????? 这个问题就是在框架里出现好像、。 [b]问题补充:[/b] [code="java"]<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{ padding:0px; margin:0; color:#073a93; background:url(../images/sleftbg.jpg) repeat-y; font-size:12px;} a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */ :focus { outline: none; } .stitle{ background: url(../images/s_title.jpg) no-repeat; width:82px; height:36px; line-height:30px; padding-left:30px; font-weight:bold;} .SleftDiv{margin-left:6px; margin-top:10px; border:solid 1px #7db5ff;width:112px; background-color:#fff;} ul{padding:0; margin:0; list-style:none;} ul li{ width:100px; background:url(../images/s_leftOL.gif) no-repeat 15px 5px;} ul li a{padding-left:30px; line-height:25px; color:#073a93; text-decoration:none;} ul li a:hover{color:#ffcc00;} </style> <title>用户信息</title> </head> <body> <div class="SleftDiv"> <div class="stitle">用户中心</div> <ul> <li><a href='<s:url action="details"><s:param name = "id" value = "#session.register.id"/></s:url>' target="mainFrame">个人信息</a></li> <li><a href='<s:url action="editpass"><s:param name = "id" value = "#session.register.id"/></s:url>' target="mainFrame">修改密码</a></li> <li><a href="index.jsp" target="_top">退出系统</a></li> </ul> </div> <div class="SleftDiv"> <div class="stitle">投 稿 箱</div> <ul> <li><a href="#">我要投稿</a></li> <li><a href="#">草 稿 箱</a></li> <li><a href="#">已投稿件</a></li> <li><a href="#">发表稿件</a></li> </ul> </div> <div class="SleftDiv"> <div class="stitle">信息中心</div> <ul> <li><a href='<s:url action="receiveMessageA"><s:param name="lastreadTime" value="未读" /></s:url>' target="mainFrame">未读信息(${session.count})</a></li> <li><a href='<s:url action="receiveMessageA"></s:url>' target="mainFrame">收 件 箱</a></li> <li><a href='<s:url action="toAuthorSend"></s:url>' target="mainFrame">写&nbsp;&nbsp;&nbsp;&nbsp;信</a></li> <li><a href='<s:url action="sendout"></s:url>' target="mainFrame">已发信件</a></li> <li><a href='<s:url action="tosend"></s:url>' target="mainFrame">写&nbsp;&nbsp;邮&nbsp;&nbsp;件</a></li> </ul> </div> </body> </html> [/code] 这是我的左侧页面的代码 [code="java"] <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!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>无标题文档</title> <link href="../images/s.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="tit" ><img src="../images/045631213.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;用户名:<a href='<s:url action="details"><s:param name = "id" value = "#session.register.id"/></s:url>'> ${session.register.realName}</a> </div> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableborder"> <tr> <td><div class="tit_tab">通知公告</div></td> </tr> <tr> <td> <div class="newslist"> <ul> <li><a href="#" target="_blank">科海期刊办公自动化系统《投稿须知》</a></li> <li><a href="#" target="_blank">版权转让协议</a></li> </ul> </div> </td> </tr> </table> <br /> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onclick="setTab('two',1,4)" class="hover">稿签</li> <li id="two2" onclick="setTab('two',2,4)" >内容</li> <li id="two3" onclick="setTab('two',3,4)">作者信息</li> <li id="two4" onclick="setTab('two',4,4)">稿件状态</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" ><table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabcss"> <tr> <td width="80" align="center">中文文题</td> <td>&nbsp;</td> </tr> <tr> <td align="center">英文文题</td> <td>&nbsp;</td> </tr> <tr> <td align="center">作&nbsp;&nbsp;&nbsp;&nbsp;者</td> <td>&nbsp;</td> </tr> <tr> <td align="center">关&nbsp;键&nbsp;词</td> <td>&nbsp;</td> </tr> <tr> <td align="center">中文摘要</td> <td>&nbsp;</td> </tr> <tr> <td align="center">英文搞要</td> <td>&nbsp;</td> </tr> <tr> <td align="center">回避专家</td> <td>&nbsp;</td> </tr> <tr> <td align="center">推荐专家</td> <td>&nbsp;</td> </tr> <tr> <td align="center">专业类型</td> <td>&nbsp;</td> </tr> </table> </div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> <br /> <div class="tit" ><img src="../images/045631590.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;已提交的稿件 </div> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablist"> <tr> <th>序号</th> <th>文&nbsp;&nbsp;&nbsp;&nbsp;题 </th> <th>投稿日期</th> <th>稿件状态</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html> [/code] 这是右侧代码。就是显示夜明那个 我的页面没有其他东西,因为其他只是一个静态没有动态代码使用,贴出来也没有多大帮助呀,[code="java"] <!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>无标题文档</title> <link href="../images/s.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="tit" ><img src="../images/045631213.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;用户名:<a href='/magazineOA/login/details.action'> </a> </div> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableborder"> <tr> <td><div class="tit_tab">通知公告</div></td> </tr> <tr> <td> <div class="newslist"> <ul> <li><a href="#" target="_blank">科海期刊办公自动化系统《投稿须知》</a></li> <li><a href="#" target="_blank">版权转让协议</a></li> </ul> </div> </td> </tr> </table> <br /> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onclick="setTab('two',1,4)" class="hover">稿签</li> <li id="two2" onclick="setTab('two',2,4)" >内容</li> <li id="two3" onclick="setTab('two',3,4)">作者信息</li> <li id="two4" onclick="setTab('two',4,4)">稿件状态</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" ><table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabcss"> <tr> <td width="80" align="center">中文文题</td> <td>&nbsp;</td> </tr> <tr> <td align="center">英文文题</td> <td>&nbsp;</td> </tr> <tr> <td align="center">作&nbsp;&nbsp;&nbsp;&nbsp;者</td> <td>&nbsp;</td> </tr> <tr> <td align="center">关&nbsp;键&nbsp;词</td> <td>&nbsp;</td> </tr> <tr> <td align="center">中文摘要</td> <td>&nbsp;</td> </tr> <tr> <td align="center">英文搞要</td> <td>&nbsp;</td> </tr> <tr> <td align="center">回避专家</td> <td>&nbsp;</td> </tr> <tr> <td align="center">推荐专家</td> <td>&nbsp;</td> </tr> <tr> <td align="center">专业类型</td> <td>&nbsp;</td> </tr> </table> </div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> <br /> <div class="tit" ><img src="../images/045631590.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;已提交的稿件 </div> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablist"> <tr> <th>序号</th> <th>文&nbsp;&nbsp;&nbsp;&nbsp;题 </th> <th>投稿日期</th> <th>稿件状态</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html> [/code] 这是一个输出后查看源代码显示的 还有就是我action的代码 [code="java"]public String countMessagAuthor()throws Exception{ Map<String, Integer> session = ActionContext.getContext().getSession(); Message messag = new Message(); int count; lastreadTime = messag.getLastreadTime(); if(lastreadTime != "未读") { lastreadTime ="未读"; receiveName = id; messag.setLastreadTime(lastreadTime); messag.setSendflag(sendflag); messag.setReceiveName(receiveName); messag.setReceiveflag("0"); List<Message> list = messageService.findByExample(messag); count = list.size(); session.put("count", count); } else { count = 0; session.put("count", count); } return SUCCESS; }[/code] [b]问题补充:[/b] 整个流程很简单的,就是我登陆要调用loginAction action里的方法并且把register用session保存起来,如果我登陆成功后转到执行这个countMessagAuthor方法,进行一些业务操作后跳转我要显示的页面,第一次显示时可以的但是我刷新页面后那个本来该显示session值消息啦 我有三块显示frame,我用的是用spring来管理struts2 的action [b]问题补充:[/b] 不管那个,都是一样的结果。左边,右边,还是整个页面都是这样的。 [b]问题补充:[/b] [code="java"]public String toLogin() throws Exception { try { Map<String, Register> session=ActionContext.getContext().getSession(); register = authorService.loginValid(userName, passWord); if(register !=null){ session.put("register",register); id = register.getId(); return SUCCESS; }else{ addActionError("用户名/密码不匹配"); this.setTip("<font color='red'>对不起您的帐号或密码有误!</font>"); return "failure"; } } catch (Exception e) { // TODO: handle exception this.setTip("<font color='red'>对不起,系统出现故障,请稍后再登录!</font>"); e.printStackTrace(); return "failure"; } } [/code] 这个和我那个要调用的如果是右面刷新时这个没有啦,至于左边那个没有也是一样的好像

jsp中两个javascript,但是只能成功运行一个,单独都能正常运行。

一些css代码就省略了。两个js,单独都能正常使用,但是放在一起只有第二个js有反应,第一个没反映。 ``` <%@ page language="java" import="java.util.*,pojo.Consume,Dao.ConsumeDao" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>分类汇总</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="./css/doubleDate.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="./js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" language="javascript" src="./js/doubleDate2.0.js" ></script> <script> $(function(){ $('.doubledate').kuiDate({ className:'doubledate', isDisabled: "0" // isDisabled为可选参数,“0”表示今日之前不可选,“1”标志今日之前可选 }); }); </script> <script type="text/javascript" language="javascript" src="./js/jquery-1.10.2.js"></script> <script> function alertWin(Cno) { /* $.ajax({ type:"post", url:"./ShowDetail", data:{Cno:Cno}, success:function(data){ alert("success"); } }); */ var msgw,msgh,titleheight,bordercolor,titlecolor; msgw = 300;//提示窗口的宽度 msgh = 300;//提示窗口的高度 titleheight = 25 //提示窗口标题高度 bordercolor = "#A480B2";//提示窗口的边框颜色 titlecolor = "#A480B2";//提示窗口的标题颜色 //根据自己需求注意宽度和高度的调整 var iWidth = document.documentElement. clientWidth; var iHeight = document.documentElement.clientHeight; //遮罩层 var bgObj = document.createElement("div"); bgObj.setAttribute("id", "bgObj");//设置ID bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; document.body.appendChild(bgObj); //弹出窗口 var msgObj=document.createElement("div"); msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法,是为div指定属性值 msgObj.setAttribute("align", "center");//为div的align赋值 msgObj.style.background = "white";//背景颜色为白色 msgObj.style.border = "1px solid " + bordercolor;//边框属性,颜色在上面已经赋值 msgObj.style.position = "absolute";//绝对定位 msgObj.style.left = (iWidth-msgw)/2 ;//从左侧开始位置 msgObj.style.top = (iHeight-msgh)/2;//从上部开始位置 msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性 msgObj.style.width = msgw + "px";//提示框的宽(上面定义过) msgObj.style.height = msgh + "px";//提示框的高(上面定义过) msgObj.style.textAlign = "center";//文本位置属性,居中。 msgObj.style.lineHeight = "25px";//行间距 msgObj.style.zIndex = "102";//层的z轴位置 document.body.appendChild(msgObj); //弹出窗口标题 var title = document.createElement("div");//创建一个标题对象 title.setAttribute("id", "msgTitle");//为标题对象填加id title.style.margin = "0";//浮动 title.style.padding = "3px";//浮动 title.style.background = titlecolor;//背景颜色 title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity = "0.75";//透明 //title.style.border="1px solid " + bordercolor;//边框 title.style.height = "25px";//高度 title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性 //title.style.color = "red";//文字颜色 title.style.cursor = "move";//鼠标样式 $.ajax({ type:"post", url:"ShowDetail?Cno="+Cno, dataType:"json", success:function(data){ },error:function(){ alert("请求出错"); }}); title.innerHTML="<table border='0' width='100%'><tr><td align='center'>收银小票单</td><td align=\"right\"><a href='#' onclick='closeDiv()'>关闭</a></td></tr><tr><td align='center'>时间:</td></tr><tr><td align='left'>三得利青柠水</td></tr></table>"; msgObj.appendChild(title);//在提示框中增加标题 } //添加关闭功能 function closeDiv() { var msgTitelObject = document.getElementById("msgDiv"); document.body.removeChild(msgTitelObject); var bgObj = document.getElementById("bgObj"); document.body.removeChild(bgObj); } </script> </head> <body> <ul class="iptgroup"> <li>开始日期:</li> <li><input type="text" readonly="readonly" class="doubledate ipticon"/></li> <li style="width:20px;"></li> <li>结束日期:</li> <li><input type="text" readonly="readonly" class="doubledate ipticon"/></li> </ul> <form action="FF" method="get" name="myform" id="myform"> <div class="upleft"><img src="image/tu4.gif" width="130" height="130" border="0" /></div> <div class="upright"><br><br><br><center><font face="楷体"color="#000000" size=5><strong>您的消费账单:</strong></font></center></div> <div class="center"> ……………………………………………………………………………… </table> </div> </form> </body> </html> ```

菜鸟JS不会,希望帮忙。。

[b]这段代码只实现了选项卡切换的功能,现在想在第二个按钮上也是就规划工程库上做个2级菜单,然后点击2级菜单在进行窗体的切换。。希望大哥们帮忙指点~[/b] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>井底的蛙</title> <script type="text/javascript"> /* 选项卡封装 by 井底的蛙 2008-2-4 */ opCard = function() { this.bind = new Array(); this.index = 0; //默认显示哪个选项卡,从0开始 this.style = new Array(); //["","",""] this.overStyle = false; //选项是否有over, out变换样式事件,样式为this.style[2] this.overChange = false; //内容是否用over, out直接激活 this.menu = false; //菜单类型 this.nesting = [false,false,"",""]; //是否嵌套,后面2个参数是指定menu,info的子集深度所用id this.auto = [false, 1000]; //自动滚动[true,2000] this.timerID = null; //自动播放的 this.menutimerID = null; //菜单延时的 this.creat = function(func) { var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]); var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]); var my = this, i; var argLen = arguments.length; var arrM = new Array(); if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套 { // 过滤出需要的数据 var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu; var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo; } else { var arrMenu = _arrMenu; var arrInfo = _arrInfo; } var l = arrMenu.length; //if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要,你可以放一个空的在那占位。")} // 修正 if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单,则没有自动运行,有over, out直接激活 // 循环添加各个事件等 for(i=0;i<l;i++) { arrMenu[i].cName = arrMenu[i].className; arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加载样式,菜单的话统一样式 if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器 { if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活 { arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} } arrMenu[i].onclick = function(){if(argLen==1){func()}} arrInfo[i].style.display = "none"; continue; } if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化,菜单的话全部隐藏 arrMenu[i].index = i; //记录自己激活值[序号] arrInfo[i].index = i; if(this.overChange) //有鼠标over, out事件 { arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);} } else //onclick触发 { arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}} if(this.overStyle) // 有over, out 改变样式 { arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} } else // 没有over, out 改变样式 { if(this.auto[0]) // 有自动运行 { arrMenu[i].onmouseover = function(){autoStop(this, 0);} arrMenu[i].onmouseout = function(){autoStop(this, 1);} } } } if(this.auto[0] || this.menu) //arrinfo 控制自动播放 { arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);} arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);} } } //for结束 if(this.auto[0]) { this.timerID = setTimeout(autoMove,this.auto[1]) } // 自动播放 function autoMove() { var n; n = my.index + 1; if(n==l){n=0}; while(arrMenu[n].getAttribute("skip")) // 需要跳过的容器 { n += 1; if(n==l){n=0}; } changeOption(arrMenu[n]); my.timerID = setTimeout(autoMove,my.auto[1]); } // onmouseover时,自动播放停止。num:0为over,1为out。 obj暂时无用。 -_-!! function autoStop(obj, num) { if(!my.auto[0]){return;} //if(obj.index==my.index) num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]); } // 改变选项卡 function changeOption(obj) { arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容 arrInfo[my.index].style.display = "none"; //隐藏旧内容 obj.className = getClass(obj,my.style[1]); //修改为新样式 arrInfo[obj.index].style.display = ""; //显示新内容 my.index = obj.index; //更新当前选择的index } /* 只有onclick时,overStyle的onmouseover,onmouseout事件。用来预激活 obj:目标对象。 num:1为over,0为out */ function changeTitle(obj, num) { if(!my.overStyle){return;}; if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])} } /* 菜单类型时用 obj:目标对象。 num:1为over,0为out */ function changeMenu(num) { if(!my.menu){return;} num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) } //关闭菜单 function menuClose() { arrInfo[my.index].style.display = "none"; arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); } // 得到className(防止将原有样式覆盖) function getClass(o, s) { if(o.cName==""){return s} else{return o.cName + " " + s} } //嵌套情况下得到真正的子集 function getChilds(arrObj, id, num) { var depth = 0; var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一个子集 do //计算深度 { if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1} firstObj = firstObj.parentNode; } while(firstObj.tagName.toLowerCase()!="body") // body强制退出。 var t; var arr = new Array(); for(i=0;i<arrObj.length;i++) //过滤出需要的数据 { t = arrObj[i], d = 0; do { if(t.parentNode.getAttribute("id")==id && d == depth) { arr.push(arrObj[i]);break; //得到数据 } else { if(d==depth){break};d+=1; } t = t.parentNode; } while(t.tagName.toLowerCase()!="body") // body强制退出 } return arr; } } } window.onload = function() { // 默认的onclick中,第一个例子 var bba = new opCard(); bba.bind = ["a2","li","b2","div","c2","div"]; bba.style = ["style1","style2","style3"]; bba.overStyle = true; bba.creat(); bba = null; //菜单导航例子 var gg = new opCard(); gg.bind = ["a8","li","b8","div"]; gg.style = ["style1","style2","style3"]; gg.overStyle = true; gg.menu = true; gg.creat(); gg = null; } </script> <style type="text/css"> body{font-size:12px; font-family:Verdana,"宋体";} p,ul{margin:0px; padding:0px;} td,div{font-size:12px} .a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;} .a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;} .test{text-decoration:underline;} #b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;} #b1 div.s strong{color:#0066FF;} /* */ .style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} .style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} .style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} #a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;} #b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;} #b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;} #b8 div a{margin-right:20px;} .style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;} </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="b1" valign="top"> <div class="s"> <!--默认的onclick中,第一个例子--> <div id="a2" style="width: 297px"> <ul> <li>规划报告</li> <li>规划工程库</li> <li>工程专题</li></ul> </div> <div id="b2"> <div style="width: 1080px; height: 412px;"> 456 </div> <div style="width: 1080px; height: 412px;"> var bba = new opCard();<br> bba.bind = ["a2","li","b2","div"];<br> bba.style = ["style1","style2","style1"];<br> bba.overStyle = true;<br> bba.creat();<br> bba = null; </div> <div style="width: 1080px; height: 412px;">33333</div> </div> </div> </td> </tr> </table> </body> </html>

在ie 7或ie 6里如何让超出td宽度的内容浮动显示在后面的td里

<pre name="code" class="html">&lt;html&gt; &lt;body style="font:16px Arial;"&gt; &lt;style type="text/css"&gt; .table { border-collapse: collapse; table-layout: fixed; font: normal 11px arial; } .row { height:25px; } .cell { background-color:#ECF4FE; font-family:Arial,Verdana,sans-serif; font-size: 11px; border-bottom-width: 1px; border-bottom-color: #ECF4FE; border-bottom-style: dotted; border-top: none; border-left: 1px solid #EC0000; border-right: 1px solid #EC0000; vertical-align: middle; padding-left: 3px; padding-right: 3px; } &lt;/style&gt; &lt;div style="width: 250px"&gt; &lt;table width="100%" class="table"&gt; &lt;tr class="row"&gt; &lt;td class="cell"&gt; &lt;div style="white-space:nowrap;"&gt;Text Text Text Text Text Text Text Text&lt;/div&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p> </p> <p> 如题和上述代码,在ie7标准模式下。</p> <p> </p> <p><span style="font-size: small;">情形一:</span></p> <p><span style="white-space: pre;"> </span>如果表格上面有 <span style="white-space: pre; background-color: #fafafa;">table-layout: fixed; 这个样式,上述代码在页面上显示的效果是</span></p> <p><img src="/problems/C:%5CDocuments%20and%20Settings%5Cfelix_li%5CDesktop" alt=""></p> <p><img src="http://dl.iteye.com/upload/attachment/561033/18d689de-63e4-3dcd-a322-b933f5cff09c.jpg" alt=""></p> <div><br></div> <div> <p><span style="font-size: small;">情形二:</span></p> <p><span style="white-space: pre;"> </span>如果表格上面没有 <span style="white-space: pre; background-color: #fafafa;">table-layout: fixed; 这个样式,上述代码在页面上显示的效果是</span></p> <p><br><img src="http://dl.iteye.com/upload/attachment/561035/758bb8fa-f43a-3042-a532-5ca2ddefe925.jpg" alt=""><br> 很显然这两种结果都不理想。</p> <p>在我现在的需求里,限于总体设计的因素,table标签上的<span style="white-space: pre; background-color: #fafafa;">table-layout: fixed;</span> 是必须要有的。但是我又需要把单元格里超出单元格的那些内容浮动显示在它后面的各个单元格里,不能像情形二里那样直接把第一个单元格拉宽。理想效果如下</p> <p><br><img src="http://dl.iteye.com/upload/attachment/561037/27865694-4a5c-3b07-ace2-301a9bc9e1ce.jpg" alt=""><br> 上面的理想效果目前在IE 8,Firefox,Chrome,Safari,Opera这几款浏览器里都实现了,就差ie 7,也许还有ie 6。</p> <p><span><br></span></p> <p><span>忘好心人指点。</span></p> </div>

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

为什么本科以上学历的人只占中国人口的5%,但感觉遍地都是大学生?

中国大学生占总人口不到5% 2017年,中国整体的本科率仅有5.9%;如果算上研究生,这一比例可以进一步上升到6.5% 为什么在国家统计局推出的这份年鉴中,学历的最高一阶就是到研究生,而没有进一步再统计博士生的数量的。 原因其实并不难理解,相比全国和各省整体人口体量,博士生的占比非常之低,属于绝对意义上的小概率样本。 这一点,我们从上表中的各省研究生占比情况也可以看出端倪。除北京、天津、上海三...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

程序员写出这样的代码,能不挨骂吗?

当你换槽填坑时,面对一个新的环境。能够快速熟练,上手实现业务需求是关键。但是,哪些因素会影响你快速上手呢?是原有代码写的不够好?还是注释写的不够好?昨夜...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

记录下入职中软一个月(外包华为)

我在年前从上一家公司离职,没想到过年期间疫情爆发,我也被困在家里,在家呆着的日子让人很焦躁,于是我疯狂的投简历,看面试题,希望可以进大公司去看看。 我也有幸面试了我觉得还挺大的公司的(虽然不是bat之类的大厂,但是作为一名二本计算机专业刚毕业的大学生bat那些大厂我连投简历的勇气都没有),最后选择了中软,我知道这是一家外包公司,待遇各方面甚至不如我的上一家公司,但是对我而言这可是外包华为,能...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

Python爬虫,高清美图我全都要(彼岸桌面壁纸)

爬取彼岸桌面网站较为简单,用到了requests、lxml、Beautiful Soup4

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

6年开发经验女程序员,面试京东Java岗要求薪资28K

写在开头: 上周面试了一位女程序员,上午10::30来我们部门面试,2B哥接待了她.来看看她的简历: 个人简历 个人技能: ● 熟悉spring mvc 、spring、mybatis 等框架 ● 熟悉 redis 、rocketmq、dubbo、zookeeper、netty 、nginx、tomcat、mysql。 ● 阅读过juc 中的线程池、锁的源...

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

Java岗开发3年,公司临时抽查算法,离职后这几题我记一辈子

前几天我们公司做了一件蠢事,非常非常愚蠢的事情。我原以为从学校出来之后,除了找工作有测试外,不会有任何与考试有关的事儿。 但是,天有不测风云,公司技术总监、人事总监两位大佬突然降临到我们事业线,叫上我老大,给我们组织了一场别开生面的“考试”。 那是一个风和日丽的下午,我翘着二郎腿,左手端着一杯卡布奇诺,右手抓着我的罗技鼠标,滚动着轮轴,穿梭在头条热点之间。 “淡黄的长裙~蓬松的头发...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

97年世界黑客编程大赛冠军作品(大小仅为16KB),惊艳世界的编程巨作

这是世界编程大赛第一名作品(97年Mekka ’97 4K Intro比赛)汇编语言所写。 整个文件只有4095个字节, 大小仅仅为16KB! 不仅实现了3D动画的效果!还有一段震撼人心的背景音乐!!! 内容无法以言语形容,实在太强大! 下面是代码,具体操作看最后! @echo off more +1 %~s0|debug e100 33 f6 bf 0 20 b5 10 f3 a5...

立即提问
相关内容推荐