DIV+CSS實戰(三)

1、說明

在上篇博客《DIV+CSS實戰（二）》中，實現了頭部以及Tab標籤卡，下面開始實現內容區域，要實現的效果以下：

 

2、內容最外層的設計（邊框）

給最外層加邊框，而且設置高度隨着裏面的內容自動增長

CSS樣式

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

 

3、內容裏面的Tab標籤

　　jsp設計

1 <div id="keyadd" class="keyaddClass ">
2     <a href="關鍵詞列表" class="tab">關鍵詞列表</a>
3     <a href="返回上一級">返回上一級</a>
4 </div>

 

CSS設計

 1 .keyaddClass{
 2     border-bottom: 2px solid #348bc4;
 3     margin-bottom: 15px;
 4     width: 98%;
 5         float: left;
 6     padding-left: 2%;
 7 }
 8         
 9 .keyaddClass a{
10     color: #818389;
11     text-decoration: none;
12     height: 30px;
13     line-height: 30px;
14     font-size: 14px;
15     float: left;
16     border-radius:4px 4px 0px 0px; 
17     width: 98px;
18     text-align: center;
19     background-color: #257CB5;
20     color: white;
21 }
22         
23 .keyaddClass a:last-child{
24     float: right;
25     background-color:#E6E6E6;
26     color:#818389; 
27 }

效果圖：

 

4、內容裏表格的設計

　　由剛開始的圖片能夠看出，表格須要實現各行換色功能，該功能後期會在JS中實現。還有，這裏先虛擬幾個數據，真正的項目中，都是用循環動態生成的，例如<c:foreach>等標籤

JSP設計

 1 <div class="divContent1">
 2    <table>
 3      <tr>
 4         <th>全選</th>
 5         <th>主題詞名稱</th>
 6         <th>抓取範圍</th>
 7         <th>是否追溯</th>
 8         <th>是否啓用</th>
 9         <th>詞頻</th>
10         <th>操做</th>
11     </tr>
12     <tr>
13       <td><input type="checkbox"></td>
14       <td>暴力扣殺1</td>
15       <td>網絡媒體</td>
16       <td>是</td>
17       <td>啓用</td>
18       <td>3</td>
19       <td>
20           <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
21           <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a>
22       </td>
23     </tr>
24     <tr>
25       <td><input type="checkbox"></td>
26       <td>暴力扣殺2</td>
27       <td>網絡媒體</td>
28       <td>是</td>
29       <td>啓用</td>
30       <td>3</td>
31       <td>
32          <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
33          <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a>
34       </td>
35    </tr>
36    <tr>
37       <td><input type="checkbox"></td>
38       <td>暴力扣殺3</td>
39       <td>網絡媒體</td>
40       <td>是</td>
41       <td>啓用</td>
42       <td>3</td>
43       <td>
44         <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
45         <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a>
46       </td>
47    </tr>
48  </table>
49</div>

CSS設計

 1         .divContent1{
 2             width: 100%;
 3             float: left;
 4             overflow: hidden;
 5             margin-top: 3px;
 6         }
 7         
 8         
 9         .divContent1 table{
10             float: left;
11             width: 100%;
12             /*若是不設置的話，設置td的邊框的時候，會用間隔*/
13             border-collapse: collapse;
14             border-spacing: 0;
15             text-align: center;
16         }
17         
18         .divContent1 table th{
19             height:40px;
20             line-height:40px;
21             font-size:14px;
22             color:#257bb4;
23             font-weight:normal;
24             border-top:1px solid #dcdcdc;
25             border-right: 1px solid #dcdcdc;
26             border-bottom: 1px solid #dcdcdc;
27         }
28         
29         /*最後一個和最外層的邊框重複了，因此去掉*/
30         .divContent1 table th:last-child{
31             border-right: 0px solid #dcdcdc;
32         }
33         
34         .divContent1 table td{
35             height:37px;
36             line-height:37px;
37             font-size:14px;
38             border-right: 1px solid #dcdcdc;
39         }
40         
41         /*最後一個和最外層的邊框重複了，因此去掉*/
42         .divContent1 table td:last-child{
43             border-right: 0px solid #dcdcdc;
44         }
45         
46         /*最後一行底部添加邊框*/
47         .divContent1 table tr:last-child td{
48             border-bottom:1px solid #dcdcdc;
49         }
50         
51         /*隔行換色*/
52         .journalBg {
53             background: none repeat scroll 0 0 #f1f1f1;
54         }

效果圖：

 

5、內容裏批量操做的設計

JSP設計

 1 <div class="footOperation">
 2      <table>
 3          <tr>
 4             <td><input type="checkbox"></td>
 5             <td>
 6                 <a href="">批量追溯</a>
 7                 <a href="">批量刪除</a>
 8                 <a href="">批量禁用</a>
 9                 <a href="">批量刪除</a>
10             </td>
11          </tr>                        
12      </table>
13 </div>

 

CSS設計

 1         .footOperation{
 2             background: none repeat scroll 0 0 #257cb5;
 3             height: 48px;
 4             overflow: hidden;
 5             width: 100%;
 6             float: left;
 7             border-radius:0px 0px 4px 4px;
 8         }
 9         
10         .footOperation table {
11             width: 100%;
12             float: left;
13             text-align: left;
14             border-collapse: collapse;
15             border-spacing: 0;
16         }
17 
18 
19         /*爲了使批量操做裏的複選框和表格裏的複選框對其，因此設置他們所在的td的寬度同樣*/
20         .divContent1 table td:first-child{
21             width: 60px;
22         }
23         
24         /*上面的設置了邊框，這個沒有設置，因此減一*/
25         .footOperation table  td:first-child{
26             text-align: center;
27             width: 59px;
28             height:48px;
29             line-height: 48px;
30         }
31         
32         .footOperation table  td:last-child{
33             padding-left: 10px;
34         }
35         
36         .footOperation table a{
37             font-size:14px;
38             width:80px;
39             height:30px;
40             line-height:30px;
41             color:white;
42             text-decoration: none;
43             margin-right: 5px;
44             float: left;
45             text-align: center;
46         }
47         
48         /*鼠標通過時變色*/
49         .footOperation table a:HOVER{
50              background-color:#EAF3E2;
51              /*背景橢圓色*/
52              border-radius:10px 10px 10px 10px;
53              color: #257bb4;
54         }

 

效果圖：

 

6、總體設計

　　JSP代碼

 1 <body>
 2       <form action="" >
 3           <div class="jc-demo-box">
 4             <div class="divHeader">
 5                 <h1 class="headerH1">全媒體訂閱</h1>
 6                 <div class="f_r">
 7                     <p>
 8                     歡迎您：<span class="color2">中科大洋</span>&nbsp;&nbsp;&nbsp;&nbsp;上次登陸時間：2小時前
 9                     </p>
10                 </div>
11             </div>
12             <div class="divTab">
13                 <a href="" class="tabin">關鍵詞訂閱</a>
14                 <a href="" class="">網站論壇訂閱</a>
15                 <a href="" class="">微博帳號訂閱</a>
16                 <a href="" class="">微信帳號訂閱</a>
17                 <a href="" class="">返回上一級</a>
18             </div>
19             <div class="divContent">
20                 <div id="keyadd" class="keyaddClass ">
21                     <a href="關鍵詞列表" class="tab">關鍵詞列表</a>
22                     <a href="返回上一級">返回上一級</a>
23                 </div>
24                 <div class="divContent1">
25                     <table>
26                         <tr>
27                             <th>全選</th>
28                             <th>主題詞名稱</th>
29                             <th>抓取範圍</th>
30                             <th>是否追溯</th>
31                             <th>是否啓用</th>
32                             <th>詞頻</th>
33                             <th>操做</th>
34                         </tr>
35                         <tr>
36                             <td><input type="checkbox"></td>
37                             <td>暴力扣殺1</td>
38                             <td>網絡媒體</td>
39                             <td>是</td>
40                             <td>啓用</td>
41                             <td>3</td>
42                             <td>
43                                 <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
44                                 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a>
45                             </td>
46                         </tr>
47                         <tr>
48                             <td><input type="checkbox"></td>
49                             <td>暴力扣殺2</td>
50                             <td>網絡媒體</td>
51                             <td>是</td>
52                             <td>啓用</td>
53                             <td>3</td>
54                             <td>
55                                 <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
56                                 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a>
57                             </td>
58                         </tr>
59                         <tr>
60                             <td><input type="checkbox"></td>
61                             <td>暴力扣殺3</td>
62                             <td>網絡媒體</td>
63                             <td>是</td>
64                             <td>啓用</td>
65                             <td>3</td>
66                             <td>
67                                 <a  href=""><img src="images/yq/key/paint.png" alt="修改" title="修改" ></a>
68                                 <a ><img src="images/yq/key/cancle.png" alt="刪除" title="刪除"></a>
69                             </td>
70                         </tr>
71                     </table>
72                 </div>
73             
74                 <div class="footOperation">
75                     <table>
76                         <tr>
77                             <td><input type="checkbox"></td>
78                             <td>
79                                 <a href="">批量追溯</a>
80                                 <a href="">批量刪除</a>
81                                 <a href="">批量禁用</a>
82                                 <a href="">批量刪除</a>
83                             </td>
84                         </tr>                        
85                     </table>
86                 </div>
87             </div>
88             <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>    
89         </div>
90         
91       </form>
92   </body>

 

CSS設計

  1     <style type="text/css">
  2         /*給body添加特效，背景色,padding margin等以及body內的字體樣式，*/
  3         body{
  4             background:url(images/yq/key/body_bj.gif) repeat 0 0;
  5             margin: 0px;
  6             padding: 0px;
  7             color: #818389;
  8             font: 13px "宋體",Arial,Helvetica,sans-serif;
  9         }
 10         
 11         .jc-demo-box{
 12              width:96%;
 13              text-align: left;
 14                margin: 2em auto;
 15                background: white;
 16                border: 1px #bbb solid;
 17                
 18                /*DIV設置圓角特效，IE下不支持*/
 19              -webkit-border-radius: 4px;
 20              -moz-border-radius: 4px;
 21              border-radius: 4px; 
 22              
 23              /*DIV設置發光特效*/
 24              -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
 25              -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
 26              box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
 27              padding: 25px 30px;
 28              
 29              /*設置高度自動適應*/
 30              height: auto;
 31              min-width: 846px;
 32         }
 33         
 34         .divHeader{
 35             height: 28px;
 36             margin-bottom: 13px;
 37             width:100%;
 38         }
 39         
 40         .divHeader h1{
 41             color: #212121;
 42             float: left;
 43             font-family: "微軟雅黑";
 44             font-size: 18px;
 45             height: 28px;
 46             line-height: 28px;
 47             padding-left: 34px;
 48         }
 49         
 50         .divHeader .headerH1{
 51             background: url("images/yq/key/blue_user.png") no-repeat 5px 5px;
 52         }
 53         
 54         .divHeader .f_r{
 55             color: #434343;
 56             height:30px;
 57             line-height: 30px;
 58             float: right;
 59         }
 60         
 61         .divHeader .f_r .color2{
 62             color: #257bb4;
 63         }
 64         
 65         .divTab{
 66             height: 34px;
 67             width:100%;
 68             float: left;
 69         }
 70         
 71         .divTab a{
 72             background-color:#E6E6E6;
 73             height:34px;
 74             /*設置行高，以使文字垂直居中*/
 75             line-height:34px;
 76             width:98px;
 77             float:left;
 78             margin-right:4px;
 79             border-radius:4px; 
 80             color: #818389;
 81             font-size:14px;
 82             text-align:center;
 83             text-decoration: none;
 84         }
 85         
 86         /*選中的時候*/
 87         .divTab .tabin{
 88             background-color: #257CB5;
 89             color: white;
 90         }
 91         .divContent{
 92             width: 100%;
 93             float: left;
 94             margin-top: 3px;
 95             border: 1px solid #e8e7e7;
 96             padding-top: 20px;
 97             height: auto;
 98         }
 99         
100         .keyaddClass{
101             border-bottom: 2px solid #348bc4;
102             margin-bottom: 15px;
103             width: 98%;
104             float: left;
105             padding-left: 2%;
106         }
107         
108         .keyaddClass a{
109             color: #818389;
110             text-decoration: none;
111             height: 30px;
112             line-height: 30px;
113                font-size: 14px;
114                float: left;
115                border-radius:4px 4px 0px 0px; 
116                width: 98px;
117                text-align: center;
118                background-color: #257CB5;
119             color: white;
120         }
121         
122         .keyaddClass a:last-child{
123                float: right;
124                background-color:#E6E6E6;
125                color:#818389; 
126         }
127         
128         .divContent1{
129             width: 100%;
130             float: left;
131             overflow: hidden;
132             margin-top: 3px;
133         }
134         
135         
136         .divContent1 table{
137             float: left;
138             width: 100%;
139             /*若是不設置的話，設置td的邊框的時候，會用間隔*/
140             border-collapse: collapse;
141             border-spacing: 0;
142             text-align: center;
143         }
144         
145         .divContent1 table th{
146             height:40px;
147             line-height:40px;
148             font-size:14px;
149             color:#257bb4;
150             font-weight:normal;
151             border-top:1px solid #dcdcdc;
152             border-right: 1px solid #dcdcdc;
153             border-bottom: 1px solid #dcdcdc;
154         }
155         
156         /*最後一個和最外層的邊框重複了，因此去掉*/
157         .divContent1 table th:last-child{
158             border-right: 0px solid #dcdcdc;
159         }
160         
161         .divContent1 table td{
162             height:37px;
163             line-height:37px;
164             font-size:14px;
165             border-right: 1px solid #dcdcdc;
166         }
167         
168         /*最後一個和最外層的邊框重複了，因此去掉*/
169         .divContent1 table td:last-child{
170             border-right: 0px solid #dcdcdc;
171         }
172         
173         /*最後一行底部添加邊框*/
174         .divContent1 table tr:last-child td{
175             border-bottom:1px solid #dcdcdc;
176         }
177         
178         /*隔行換色*/
179         .journalBg {
180             background: none repeat scroll 0 0 #f1f1f1;
181         }
182         
183         .footOperation{
184             background: none repeat scroll 0 0 #257cb5;
185             height: 48px;
186             overflow: hidden;
187             width: 100%;
188             float: left;
189             border-radius:0px 0px 4px 4px;
190         }
191         
192         .footOperation table {
193             width: 100%;
194             float: left;
195             text-align: left;
196             border-collapse: collapse;
197             border-spacing: 0;
198         }
199 
200 
201         /*爲了使批量操做裏的複選框和表格裏的複選框對其，因此設置他們所在的td的寬度同樣*/
202         .divContent1 table td:first-child{
203             width: 60px;
204         }
205         
206         /*上面的設置了邊框，這個沒有設置，因此減一*/
207         .footOperation table  td:first-child{
208             text-align: center;
209             width: 59px;
210             height:48px;
211             line-height: 48px;
212         }
213         
214         .footOperation table  td:last-child{
215             padding-left: 10px;
216         }
217         
218         .footOperation table a{
219             font-size:14px;
220             width:80px;
221             height:30px;
222             line-height:30px;
223             color:white;
224             text-decoration: none;
225             margin-right: 5px;
226             float: left;
227             text-align: center;
228         }
229         
230         /*鼠標通過時變色*/
231         .footOperation table a:HOVER{
232              background-color:#EAF3E2;
233              /*背景橢圓色*/
234              border-radius:10px 10px 10px 10px;
235              color: #257bb4;
236         }
237     </style>

 

效果圖：