1、說明css
在DIV+CSS實戰(一)中,已經把框架搭建起來了,如今就須要往框架裏面添加內容了。須要實現的內容以下圖:web
2、頭部的設計(全媒體訂閱)微信
左側是一張圖片+標題 ,右側是登陸名 和上次登陸的時間框架
(1)、標題的設計(左側)jsp
jsp代碼字體
1 <div class="divHeader"> 2 <h1>全媒體訂閱</h1> 3 <div> 4 <p> 5 歡迎您:<span class="color2">中科大洋</span> 上次登陸時間:2小時前 6 </p> 7 </div> 8 </div>
CSS代碼網站
1 .divHeader{ 2 height: 28px; 3 margin-bottom: 13px; 4 width:100%; 5 } 6 7 .divHeader h1{ 8 color: #212121; 9 float: left; 10 font-family: "微軟雅黑"; 11 font-size: 18px; 12 height: 28px; 13 line-height: 28px; 14 padding-left: 34px; 15 } 16 17 .divHeader .headerH1{ 18 background: url("images/yq/key/blue_user.png") no-repeat 5px 5px; 19 }
效果圖:url
(2)、登陸用戶+登陸時間的設計(右側)spa
jsp代碼和上面同樣設計
CSS設計
1 .divHeader .f_r{ 2 color: #434343; 3 height:30px; 4 line-height: 30px; 5 float: right; 6 } 7 8 .divHeader .f_r .color2{ 9 color: #257bb4; 10 }
效果圖:
3、標籤卡的設計("關鍵詞訂閱、網站論壇訂閱.......「)
jsp設計
1 <div class="divTab"> 2 <a href="" class="tabin">關鍵詞訂閱</a> 3 <a href="" class="">網站論壇訂閱</a> 4 <a href="" class="">微博帳號訂閱</a> 5 <a href="" class="">微信帳號訂閱</a> 6 <a href="" class="">返回上一級</a> 7 </div>
CSS設計
1 2 .divTab{ 3 height: 34px; 4 width:100%; 5 float: left; 6 } 7 8 .divTab a{ 9 background-color:#E6E6E6; 10 height:34px; 11 /*設置行高,以使文字垂直居中*/ 12 line-height:34px; 13 width:98px; 14 float:left; 15 margin-right:4px; 16 border-radius:4px; 17 color: #818389; 18 font-size:14px; 19 text-align:center; 20 text-decoration: none; 21 } 22 23 /*選中的時候*/ 24 .divTab .tabin{ 25 background-color: #257CB5; 26 color: white; 27 }
效果圖:
4、完整代碼
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> 上次登陸時間: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 "關鍵詞列表" 22 </div> 23 <div class="divContent1"> 24 "全部的關鍵詞" 25 </div> 26 27 <div class="footOperation"> 28 "批量操做" 29 </div> 30 </div> 31 <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div> 32 </div> 33 34 </form> 35 </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 .divContent1{ 109 width: 100%; 110 float: left; 111 overflow: hidden; 112 margin-top: 3px; 113 /*爲了是結構看起來更明確,先把邊框加上,以及設置一個高度,之後會去掉*/ 114 border: 1px solid #e8e7e7; 115 height: 400px; 116 } 117 118 .footOperation{ 119 background: none repeat scroll 0 0 #257cb5; 120 height: 48px; 121 overflow: hidden; 122 width: 100%; 123 float: left; 124 border-radius:0px 0px 4px 4px; 125 } 126 </style>
效果圖: