DIV+CSS实战(三)

一、说明

在上篇博客《DIV+CSS实战（二）》中，实现了头部以及Tab标签卡，下面开始实现内容区域，要实现的效果如下：

 

二、内容最外层的设计（边框）

给最外层加边框，并且设置高度随着里面的内容自动增加

CSS样式

.divContent{
    width: 100%;
    float: left;
    margin-top: 3px;
    border: 1px solid #e8e7e7;
    padding-top: 20px;
    height: auto;
}

三、内容里面的Tab标签

　　jsp设计

<div id="keyadd" class="keyaddClass ">
    <a href="关键词列表" class="tab">关键词列表</a>
    <a href="返回上一级">返回上一级</a>
</div>

 

CSS设计

.keyaddClass{
    border-bottom: 2px solid #348bc4;
    margin-bottom: 15px;
     98%;
        float: left;
    padding-left: 2%;
}
        
.keyaddClass a{
    color: #818389;
    text-decoration: none;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    float: left;
    border-radius:4px 4px 0px 0px; 
     98px;
    text-align: center;
    background-color: #257CB5;
    color: white;
}
        
.keyaddClass a:last-child{
    float: right;
    background-color:#E6E6E6;
    color:#818389; 
}

效果图：

 

四、内容里表格的设计

　　由刚开始的图片可以看出，表格需要实现各行换色功能，该功能后期会在JS中实现。还有，这里先虚拟几个数据，真正的项目中，都是用循环动态生成的，例如<c:foreach>等标签

JSP设计

<div class="divContent1">
   <table>
     <tr>
        <th>全选</th>
        <th>主题词名称</th>
        <th>抓取范围</th>
        <th>是否追溯</th>
        <th>是否启用</th>
        <th>词频</th>
        <th>操作</th>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>暴力扣杀1</td>
      <td>网络媒体</td>
      <td>是</td>
      <td>启用</td>
      <td>3</td>
      <td>
          <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
          <a ><img src="images/yq/key/cancle.png" alt="删除" title="删除"></a>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>暴力扣杀2</td>
      <td>网络媒体</td>
      <td>是</td>
      <td>启用</td>
      <td>3</td>
      <td>
         <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
         <a ><img src="images/yq/key/cancle.png" alt="删除" title="删除"></a>
      </td>
   </tr>
   <tr>
      <td><input type="checkbox"></td>
      <td>暴力扣杀3</td>
      <td>网络媒体</td>
      <td>是</td>
      <td>启用</td>
      <td>3</td>
      <td>
        <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
        <a ><img src="images/yq/key/cancle.png" alt="删除" title="删除"></a>
      </td>
   </tr>
 </table>
</div>

CSS设计

        .divContent1{
            width: 100%;
            float: left;
            overflow: hidden;
            margin-top: 3px;
        }
        
        
        .divContent1 table{
            float: left;
            width: 100%;
            /*如果不设置的话，设置td的边框的时候，会用间隔*/
            border-collapse: collapse;
            border-spacing: 0;
            text-align: center;
        }
        
        .divContent1 table th{
            height:40px;
            line-height:40px;
            font-size:14px;
            color:#257bb4;
            font-weight:normal;
            border-top:1px solid #dcdcdc;
            border-right: 1px solid #dcdcdc;
            border-bottom: 1px solid #dcdcdc;
        }
        
        /*最后一个和最外层的边框重复了，所以去掉*/
        .divContent1 table th:last-child{
            border-right: 0px solid #dcdcdc;
        }
        
        .divContent1 table td{
            height:37px;
            line-height:37px;
            font-size:14px;
            border-right: 1px solid #dcdcdc;
        }
        
        /*最后一个和最外层的边框重复了，所以去掉*/
        .divContent1 table td:last-child{
            border-right: 0px solid #dcdcdc;
        }
        
        /*最后一行底部添加边框*/
        .divContent1 table tr:last-child td{
            border-bottom:1px solid #dcdcdc;
        }
        
        /*隔行换色*/
        .journalBg {
            background: none repeat scroll 0 0 #f1f1f1;
        }

效果图：

 

五、内容里批量操作的设计

JSP设计

<div class="footOperation">
     <table>
         <tr>
            <td><input type="checkbox"></td>
            <td>
                <a href="">批量追溯</a>
                <a href="">批量删除</a>
                <a href="">批量禁用</a>
                <a href="">批量删除</a>
            </td>
         </tr>                        
     </table>
</div>

 

CSS设计

        .footOperation{
            background: none repeat scroll 0 0 #257cb5;
            height: 48px;
            overflow: hidden;
            width: 100%;
            float: left;
            border-radius:0px 0px 4px 4px;
        }
        
        .footOperation table {
            width: 100%;
            float: left;
            text-align: left;
            border-collapse: collapse;
            border-spacing: 0;
        }


        /*为了使批量操作里的复选框和表格里的复选框对其，所以设置他们所在的td的宽度一样*/
        .divContent1 table td:first-child{
            width: 60px;
        }
        
        /*上面的设置了边框，这个没有设置，所以减一*/
        .footOperation table  td:first-child{
            text-align: center;
            width: 59px;
            height:48px;
            line-height: 48px;
        }
        
        .footOperation table  td:last-child{
            padding-left: 10px;
        }
        
        .footOperation table a{
            font-size:14px;
            width:80px;
            height:30px;
            line-height:30px;
            color:white;
            text-decoration: none;
            margin-right: 5px;
            float: left;
            text-align: center;
        }
        
        /*鼠标经过时变色*/
        .footOperation table a:HOVER{
             background-color:#EAF3E2;
             /*背景椭圆色*/
             border-radius:10px 10px 10px 10px;
             color: #257bb4;
        }

 

效果图：

 

六、整体设计

　　JSP代码

<body>
      <form action="" >
          <div class="jc-demo-box">
            <div class="divHeader">
                <h1 class="headerH1">全媒体订阅</h1>
                <div class="f_r">
                    <p>
                    欢迎您：<span class="color2">中科大洋</span>&nbsp;&nbsp;&nbsp;&nbsp;上次登录时间：2小时前
                    </p>
                </div>
            </div>
            <div class="divTab">
                <a href="" class="tabin">关键词订阅</a>
                <a href="" class="">网站论坛订阅</a>
                <a href="" class="">微博账号订阅</a>
                <a href="" class="">微信账号订阅</a>
                <a href="" class="">返回上一级</a>
            </div>
            <div class="divContent">
                <div id="keyadd" class="keyaddClass ">
                    <a href="关键词列表" class="tab">关键词列表</a>
                    <a href="返回上一级">返回上一级</a>
                </div>
                <div class="divContent1">
                    <table>
                        <tr>
                            <th>全选</th>
                            <th>主题词名称</th>
                            <th>抓取范围</th>
                            <th>是否追溯</th>
                            <th>是否启用</th>
                            <th>词频</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>暴力扣杀1</td>
                            <td>网络媒体</td>
                            <td>是</td>
                            <td>启用</td>
                            <td>3</td>
                            <td>
                                <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
                                <a ><img src="images/yq/key/cancle.png" alt="删除" title="删除"></a>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>暴力扣杀2</td>
                            <td>网络媒体</td>
                            <td>是</td>
                            <td>启用</td>
                            <td>3</td>
                            <td>
                                <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
                                <a ><img src="images/yq/key/cancle.png" alt="删除" title="删除"></a>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>暴力扣杀3</td>
                            <td>网络媒体</td>
                            <td>是</td>
                            <td>启用</td>
                            <td>3</td>
                            <td>
                                <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
                                <a ><img src="images/yq/key/cancle.png" alt="删除" title="删除"></a>
                            </td>
                        </tr>
                    </table>
                </div>
            
                <div class="footOperation">
                    <table>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>
                                <a href="">批量追溯</a>
                                <a href="">批量删除</a>
                                <a href="">批量禁用</a>
                                <a href="">批量删除</a>
                            </td>
                        </tr>                        
                    </table>
                </div>
            </div>
            <div style="clear:both;height:1px;100%; overflow:hidden; margin-top:-1px;"></div>    
        </div>
        
      </form>
  </body>

CSS设计

    <style type="text/css">
        /*给body添加特效，背景色,padding margin等以及body内的字体样式，*/
        body{
            background:url(images/yq/key/body_bj.gif) repeat 0 0;
            margin: 0px;
            padding: 0px;
            color: #818389;
            font: 13px "宋体",Arial,Helvetica,sans-serif;
        }
        
        .jc-demo-box{
             width:96%;
             text-align: left;
               margin: 2em auto;
               background: white;
               border: 1px #bbb solid;
               
               /*DIV设置圆角特效，IE下不支持*/
             -webkit-border-radius: 4px;
             -moz-border-radius: 4px;
             border-radius: 4px; 
             
             /*DIV设置发光特效*/
             -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
             -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
             box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
             padding: 25px 30px;
             
             /*设置高度自动适应*/
             height: auto;
             min-width: 846px;
        }
        
        .divHeader{
            height: 28px;
            margin-bottom: 13px;
            width:100%;
        }
        
        .divHeader h1{
            color: #212121;
            float: left;
            font-family: "微软雅黑";
            font-size: 18px;
            height: 28px;
            line-height: 28px;
            padding-left: 34px;
        }
        
        .divHeader .headerH1{
            background: url("images/yq/key/blue_user.png") no-repeat 5px 5px;
        }
        
        .divHeader .f_r{
            color: #434343;
            height:30px;
            line-height: 30px;
            float: right;
        }
        
        .divHeader .f_r .color2{
            color: #257bb4;
        }
        
        .divTab{
            height: 34px;
            width:100%;
            float: left;
        }
        
        .divTab a{
            background-color:#E6E6E6;
            height:34px;
            /*设置行高，以使文字垂直居中*/
            line-height:34px;
            width:98px;
            float:left;
            margin-right:4px;
            border-radius:4px; 
            color: #818389;
            font-size:14px;
            text-align:center;
            text-decoration: none;
        }
        
        /*选中的时候*/
        .divTab .tabin{
            background-color: #257CB5;
            color: white;
        }
        .divContent{
            width: 100%;
            float: left;
            margin-top: 3px;
            border: 1px solid #e8e7e7;
            padding-top: 20px;
            height: auto;
        }
        
        .keyaddClass{
            border-bottom: 2px solid #348bc4;
            margin-bottom: 15px;
            width: 98%;
            float: left;
            padding-left: 2%;
        }
        
        .keyaddClass a{
            color: #818389;
            text-decoration: none;
            height: 30px;
            line-height: 30px;
               font-size: 14px;
               float: left;
               border-radius:4px 4px 0px 0px; 
               width: 98px;
               text-align: center;
               background-color: #257CB5;
            color: white;
        }
        
        .keyaddClass a:last-child{
               float: right;
               background-color:#E6E6E6;
               color:#818389; 
        }
        
        .divContent1{
            width: 100%;
            float: left;
            overflow: hidden;
            margin-top: 3px;
        }
        
        
        .divContent1 table{
            float: left;
            width: 100%;
            /*如果不设置的话，设置td的边框的时候，会用间隔*/
            border-collapse: collapse;
            border-spacing: 0;
            text-align: center;
        }
        
        .divContent1 table th{
            height:40px;
            line-height:40px;
            font-size:14px;
            color:#257bb4;
            font-weight:normal;
            border-top:1px solid #dcdcdc;
            border-right: 1px solid #dcdcdc;
            border-bottom: 1px solid #dcdcdc;
        }
        
        /*最后一个和最外层的边框重复了，所以去掉*/
        .divContent1 table th:last-child{
            border-right: 0px solid #dcdcdc;
        }
        
        .divContent1 table td{
            height:37px;
            line-height:37px;
            font-size:14px;
            border-right: 1px solid #dcdcdc;
        }
        
        /*最后一个和最外层的边框重复了，所以去掉*/
        .divContent1 table td:last-child{
            border-right: 0px solid #dcdcdc;
        }
        
        /*最后一行底部添加边框*/
        .divContent1 table tr:last-child td{
            border-bottom:1px solid #dcdcdc;
        }
        
        /*隔行换色*/
        .journalBg {
            background: none repeat scroll 0 0 #f1f1f1;
        }
        
        .footOperation{
            background: none repeat scroll 0 0 #257cb5;
            height: 48px;
            overflow: hidden;
            width: 100%;
            float: left;
            border-radius:0px 0px 4px 4px;
        }
        
        .footOperation table {
            width: 100%;
            float: left;
            text-align: left;
            border-collapse: collapse;
            border-spacing: 0;
        }


        /*为了使批量操作里的复选框和表格里的复选框对其，所以设置他们所在的td的宽度一样*/
        .divContent1 table td:first-child{
            width: 60px;
        }
        
        /*上面的设置了边框，这个没有设置，所以减一*/
        .footOperation table  td:first-child{
            text-align: center;
            width: 59px;
            height:48px;
            line-height: 48px;
        }
        
        .footOperation table  td:last-child{
            padding-left: 10px;
        }
        
        .footOperation table a{
            font-size:14px;
            width:80px;
            height:30px;
            line-height:30px;
            color:white;
            text-decoration: none;
            margin-right: 5px;
            float: left;
            text-align: center;
        }
        
        /*鼠标经过时变色*/
        .footOperation table a:HOVER{
             background-color:#EAF3E2;
             /*背景椭圆色*/
             border-radius:10px 10px 10px 10px;
             color: #257bb4;
        }
    </style>

 

效果图：