IT博客-青蛙學堂-随笔分类-CSShttp://www.cnitblog.com/yide/category/8895.htmlzh-cnThu, 05 May 2022 04:44:18 GMTThu, 05 May 2022 04:44:18 GMT60根据文本定位div并设置属性http://www.cnitblog.com/yide/archive/2022/05/04/92600.html青蛙學堂青蛙學堂Wed, 04 May 2022 08:40:00 GMThttp://www.cnitblog.com/yide/archive/2022/05/04/92600.htmlhttp://www.cnitblog.com/yide/comments/92600.htmlhttp://www.cnitblog.com/yide/archive/2022/05/04/92600.html#Feedback0http://www.cnitblog.com/yide/comments/commentRss/92600.htmlhttp://www.cnitblog.com/yide/services/trackbacks/92600.html根据文本定位div并设置属性
 
$('div:contains("*****"):not(:has(*))').parent().css("display", "none");

青蛙學堂 2022-05-04 16:40 发表评论
]]>表格设置bootstrap table样式http://www.cnitblog.com/yide/archive/2021/03/17/92423.html青蛙學堂青蛙學堂Wed, 17 Mar 2021 06:53:00 GMThttp://www.cnitblog.com/yide/archive/2021/03/17/92423.htmlhttp://www.cnitblog.com/yide/comments/92423.htmlhttp://www.cnitblog.com/yide/archive/2021/03/17/92423.html#Feedback0http://www.cnitblog.com/yide/comments/commentRss/92423.htmlhttp://www.cnitblog.com/yide/services/trackbacks/92423.html
通过Bootstrap快速构建表格样式：

（1）外部引入Bootstrap文件

 <link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">

 <script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css"></script>
 
（2）通过HTML代码，创建一个表格
  
接下来通过外部引入Bootstrap来快速构建表格样式

.table    为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped    在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered    为所有表格的单元格添加边框
.table-hover    在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed    让表格更加紧凑

      除此之外，我们还可以给表格添加背景颜色。具体代码如下

.active    对某一特定的行或单元格应用悬停颜色
.success    表示一个成功的或积极的动作
.warning    表示一个需要注意的警告
.danger    表示一个危险的或潜在的负面动作   

         <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
      <thead> 
              <tr class="active"> 
                  <th>标题一</th> 
                  <th>标题二</th> 
                  <th>标题三</th> 
              </tr> 
          </thead> 
          <tbody>
              <tr class="success">
                  <td>示例一</td>
                  <td>示例一</td>
                  <td>示例一</td></tr>
              <tr class="warning">
                  <td>示例二</td>
                  <td>示例二</td>
                  <td>示例二</td></tr>
              <tr class="danger">
                  <td>示例三</td>
                  <td>示例三</td>
                  <td>示例三</td></tr>
              </tbody>
      </table>    

                 

青蛙學堂 2021-03-17 14:53 发表评论
]]>jshtml固定表头http://www.cnitblog.com/yide/archive/2020/11/17/92365.html青蛙學堂青蛙學堂Tue, 17 Nov 2020 08:49:00 GMThttp://www.cnitblog.com/yide/archive/2020/11/17/92365.htmlhttp://www.cnitblog.com/yide/comments/92365.htmlhttp://www.cnitblog.com/yide/archive/2020/11/17/92365.html#Feedback0http://www.cnitblog.com/yide/comments/commentRss/92365.htmlhttp://www.cnitblog.com/yide/services/trackbacks/92365.html
<html xmlns="http://www.w3.org/1999/xhtml">
 
    <head>
        <meta charset="utf-8" />
        <title>表格头部固定</title>
        <style type="text/css">
            /*
            .table-head table,.table-body table{width:100%;border-collapse:collapse;}
            .table-head{padding-right:17px;background-color:#999;color:#000;}
            .table-body{width:100%; height:300px;overflow-y:auto;}
            .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
            
            .table-body table tr td{
                border:1px solid red;
                text-align: center;
            }
            */
            
               .table-head table,.table-body table{width:1190px;border-collapse:collapse; }
           
            .table-body{width:1200px; height:300px;overflow-y:auto;}
            
            .table-body table tr td{
               
                text-align: center;
            }
            
        </style>
    </head>

    <body>
        <div style="width:100%;">
            <div class="table-head">
                <table>
                    <colgroup><col span="2" style="width: 100px;" /><col /></colgroup>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>内容</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="table-body">
                <table>
                    <colgroup><col span="2" style="width: 100px;" /><col /></colgroup>
                    <tbody>
                        <tr><td>1</td><td>我只是用来测试的</td></tr>
                        <tr><td>2</td><td>我只是用来测试的</td></tr>
                        <tr><td>3</td><td>我只是用来测试的</td></tr>
                        <tr><td>4</td><td>我只是用来测试的</td></tr>
                        <tr><td>5</td><td>我只是用来测试的</td></tr>
                        <tr><td>6</td><td>我只是用来测试的</td></tr>
                        <tr><td>7</td><td>我只是用来测试的</td></tr>
                        <tr><td>8</td><td>我只是用来测试的</td></tr>
                        <tr><td>9</td><td>我只是用来测试的</td></tr>
                        <tr><td>10</td><td>我只是用来测试的</td></tr>
                        <tr><td>11</td><td>我只是用来测试的</td></tr>
                        <tr><td>12</td><td>我只是用来测试的</td></tr>
                        <tr><td>13</td><td>我只是用来测试的</td></tr>
                        <tr><td>14</td><td>我只是用来测试的</td></tr>
                        <tr><td>15</td><td>我只是用来测试的</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

青蛙學堂 2020-11-17 16:49 发表评论
]]>css计算宽度高度vh-vwhttp://www.cnitblog.com/yide/archive/2020/07/23/92289.html青蛙學堂青蛙學堂Thu, 23 Jul 2020 06:12:00 GMThttp://www.cnitblog.com/yide/archive/2020/07/23/92289.htmlhttp://www.cnitblog.com/yide/comments/92289.htmlhttp://www.cnitblog.com/yide/archive/2020/07/23/92289.html#Feedback0http://www.cnitblog.com/yide/comments/commentRss/92289.htmlhttp://www.cnitblog.com/yide/services/trackbacks/92289.htmlcalc 是 css3提供的一个在css文件中计算值的函数：
     用于动态计算长度值。
     需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
     任何长度值都可以使用calc()函数进行计算；
     calc()函数支持 "+", "-", "*", "/" 运算；
     calc()函数使用标准的数学运算优先级规则；
calc(100vh - 10px)  表示整个浏览器窗口高度减去10px的大小 calc(100vw - 10px)   表示整个浏览器窗口宽度减去10px的大小 一般用来设置流式布局宽高，当然，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值 calc()的兼容性如下，使用时需注意
 
在讲calc之前先说一下 vh  vw：
    vw  相对于视口的宽度。视口被均分为100单位的vw
   vh  相对于视口的高度。视口被均分为100单位的vh
   vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
   vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin


青蛙學堂 2020-07-23 14:12 发表评论
]]>HTML展开折叠div代码http://www.cnitblog.com/yide/archive/2018/12/24/91260.html青蛙學堂青蛙學堂Mon, 24 Dec 2018 03:01:00 GMThttp://www.cnitblog.com/yide/archive/2018/12/24/91260.htmlhttp://www.cnitblog.com/yide/comments/91260.htmlhttp://www.cnitblog.com/yide/archive/2018/12/24/91260.html#Feedback0http://www.cnitblog.com/yide/comments/commentRss/91260.htmlhttp://www.cnitblog.com/yide/services/trackbacks/91260.htmlHTML展开折叠div代码
  1 
  2 <!DOCTYPE html>
  3 <html>
  4     <head>
  5         <meta charset="utf-8">
  6         <title>纯CSS实现百叶窗</title>
  7         <style type="text/css">
  8             * {
  9                margin: 0;
 10                padding: 0;
 11                }
 12             
 13             #parent >li> span{background: #999999;display: block;width: 200px;border:1px solid #ECEEF2;}
 14             li {line-height: 40px;display: block;}
 15             li  p{
 16                     display: inline-block;
 17                     width: 0px;
 18                     height: 0px;
 19                     border-left: 5px solid transparent;
 20                     border-right: 5px solid transparent;
 21                     border-top: 5px solid#2f2f2f;
 22                       }
 23              li>ul{display: none;}
 24              li>ul>li{border: 1px solid #DEDEDE;width: 199px;}
 25              #parent span:hover + ul{display: block;}
 26              #parent span:hover >p{
 27                      display: inline-block;
 28                     width: 0px;
 29                     height: 0px;
 30                     border-top: 5px solid transparent;
 31                     border-bottom: 5px solid transparent;
 32                     border-left: 5px solid#2f2f2f;}
 33         </style>
 34     </head>
 35     <body>
 36         <ul id="parent">
 37             <li>
 38                 <span><p></p>列表</span>
 39                 <ul>
 40                     <li>子列表</li>
 41                     <li>子列表</li>
 42                     <li>子列表</li>
 43                 </ul>
 44             </li>
 45             <li>
 46                 <span><p></p>列表</span>
 47                 <ul>
 48                     <li>子列表</li>
 49                     <li>子列表</li>
 50                     <li>子列表</li>
 51                 </ul>
 52             </li>
 53             <li>
 54                 <span><p></p>列表</span>
 55                 <ul>
 56                     <li>子列表</li>
 57                     <li>子列表</li>
 58                     <li>子列表</li>
 59                 </ul>
 60             </li>
 61         </ul>
 62    
 63 
 64 <table border="0" cellspacing="0" cellpadding="0">
 65   <tr>
 66     <td scope="row">
 67     
 68     <table border="1">
 69       <tr>
 70         <td id="showbfq" height="20" align="top"  onclick="if(bfq.style.display=='none'){bfq.style.display='';showbfq.innerText='优质';}
 71  else{bfq.style.display='none';showbfq.innerText='点击更多';}">点击更多</td>
 72       </tr>
 73       <tr>
 74         <td height="80" align="center" name="bfq" id="bfq" style="display:none;">aaa1111111111111111111111111</td>
 75       </tr>
 76     </table>
 77     
 78     </td></tr>
 79     <tr><td>
 80     
 81     <table border="1">
 82       <tr>
 83         <td id="showbfq1" height="20" align="top"  onclick="if(bfq1.style.display=='none'){bfq1.style.display='';showbfq1.innerText='优质';}
 84  else{bfq1.style.display='none';showbfq1.innerText='点击更多';}">点击更多</td>
 85       </tr>
 86       <tr>
 87         <td height="80" align="center" name="bfq1" id="bfq1" style="display:none;">bbb2222222222222222222222</td>
 88       </tr>
 89     </table>
 90     
 91     </td></tr>
 92     <tr><td>
 93     
 94     <table border="1">
 95       <tr>
 96         <td id="showbfq2" height="20" align="top"  onclick="if(bfq2.style.display=='none'){bfq2.style.display='';showbfq2.innerText='折叠';}
 97  else{bfq2.style.display='none';showbfq2.innerText='展开';}">展开</td>
 98       </tr>
 99       <tr>
100         <td height="80" align="center" name="bfq2" id="bfq2" style="display:none;">ccc3333333333333333333333333</td>
101       </tr>
102     </table>
103     
104     </td></tr>
105 </table>
106 
107 <!-- js 控制 展开 隐藏div  -->
108 <div style="BORDER-BOTTOM: black 2px solid; " >
109 <img src="image/down.png" onclick="test(this)">标题内容   <!--this 指 img 对象  -->
110 </div>
111 <div id="div2" style="border:1px solid #ccc; width:300px; height:200px; display: block;">
112     （1）每个HTML标记都有事件句柄属性。onClick是HTML标记属性，不分大小写。
113     （2）HTML标记对应的元素对象也具有事件句柄属性，这个属性必须全小写，因JS区分大小写
114 </div>
115 </body>
116 </html>
117 <script type="text/javascript">
118 function test(obj){
119 
120     var div1=document.getElementById("div2");
121     if(div1.style.display=="block"){
122         div1.style.display="none";
123         obj.src="image/up.png";
124     }else{
125         div1.style.display="block";
126         obj.src="image/down.png";
127     }
128 }
129 </script>



青蛙學堂 2018-12-24 11:01 发表评论
]]>您试图从目录中执行CGI、ISAPI 或其他可执行程序，但该目录不允许执行程序http://www.cnitblog.com/yide/archive/2012/05/09/79673.html青蛙學堂青蛙學堂Wed, 09 May 2012 00:47:00 GMThttp://www.cnitblog.com/yide/archive/2012/05/09/79673.htmlhttp://www.cnitblog.com/yide/comments/79673.htmlhttp://www.cnitblog.com/yide/archive/2012/05/09/79673.html#Feedback0http://www.cnitblog.com/yide/comments/commentRss/79673.htmlhttp://www.cnitblog.com/yide/services/trackbacks/79673.html您试图从目录中执行CGI、ISAPI 或其他可执行程序，但该目录不允许执行程序

本人使用WIN2003 INTERNET信息服务（IIS）管理器建立一个网站虚拟目录，结果浏览网页时出现错误，错误提示信息大体如此： 

　　该页无法显示 

　　您试图从目录中执行 CGI、ISAPI 或其他可执行程序，但该目录不允许执行程序。 

　　请尝试以下操作： 

* 如果您认为该目录应该允许执行访问权限，请与网站管理员联系。 

　　HTTP 错误 403.1 - 禁止访问：执行访问被拒绝。 
　　Internet 信息服务 (IIS) 

　　技术信息（为技术支持人员提供） 

* 转到 Microsoft 产品支持服务并搜索包括“HTTP”和“403”的标题。 
* 打开“IIS 帮助”（可在 IIS 管理器 (inetmgr) 中访问），然后搜索标题为“配置 ISAPI 扩展”、“配置 CGI 应用程序”、“使用网站权限保护站点”和“关于自定义错误消息”的主题。 
* 在 IIS 软件开发工具包 (SDK) 或 MSDN Online Library 中，搜索标题为“Developing ISAPI Extensions”、“ISAPI and CGI”和“Debugging ISAPI Extensions and Filters”的主题。 

　　以下是解决的方法： 

　　单击操作系统的开始→程序→管理工具→Interneter服务器管理，在IIS中选择您的站点然后右键→属性，在虚拟目录选项中，查看“执行权限”是否设置为“无”，这里改成“纯脚本”保存即可。 

　　如下：

如果还不成，那么，在点击上图中的“创建”按钮，创建一个应用程序名称，这样就可以了！ 

通过上述两步的操作，就没有问题了，我是这样来解决的！

 

 

 

 

 

 

 

 



青蛙學堂 2012-05-09 08:47 发表评论
]]>Div等高问题http://www.cnitblog.com/yide/archive/2012/04/03/78528.html青蛙學堂青蛙學堂Tue, 03 Apr 2012 05:55:00 GMThttp://www.cnitblog.com/yide/archive/2012/04/03/78528.htmlhttp://www.cnitblog.com/yide/comments/78528.htmlhttp://www.cnitblog.com/yide/archive/2012/04/03/78528.html#Feedback0http://www.cnitblog.com/yide/comments/commentRss/78528.htmlhttp://www.cnitblog.com/yide/services/trackbacks/78528.html网站主体DIV里面有左右两个DIV.分别为TLeft和TRight
<div id="TBody">
  <div id="TLeft">
  左边的内容
  </div>
  <div id="TRight">
  右边的内容
  </div>
</div>
因为内容不同肯定左右的高度不同.背景是蓝色的,而TLeft,TRight都是白色底,高度自动100%,高度不够的会露出一大块蓝底,非常不好看.
所以我在body加载的时候设置了一下判断
    <script language="javascript" type="text/javascript">
    function SetDivHeight()
    {
       if(this.document.getElementById("TLeft").scrollHeight>this.document.getElementById("TRight").scrollHeight)
       {
           this.document.getElementById("TLeft").style.height="100%";
       }
       else
       {
           this.document.getElementById("TLeft").style.height=this.document.getElementById("TRight").scrollHeight;
       }
    }
    </script>

<body onload="SetDivHeight();">

青蛙學堂 2012-04-03 13:55 发表评论
]]>