DIV+CSS實戰(一)

時間 2019-11-12

標籤 div+css div css 實戰欄目 HTML 简体版

原文原文鏈接

1、說明css

　　做爲一個後臺的程序員，我也是不多寫前端，最近有一個項目，前端主要是由我來負責，就把我在項目中所學到的東西，記錄下來！個人頁面要嵌入到另外一個系統中，因此，並非按照傳統的top,left，content,我只寫了content部分！我一直以爲知識都是在項目中總結出來的，在作項目的過程當中，才能把知識學以至用，而且加深理解，先看效果圖:前端

2、分析程序員

網頁body 裏面是一個DIV，而後DIV又包含了三個DIV，分別是DIV1，DIV2，DIV3。 DIV1對應圖片中頭部分，也就是全媒體訂閱部分。DIV2對應的是選項卡部分，也就是"關鍵詞訂閱,網站論壇訂閱,微博帳號訂閱......"部分。DIV3對應的就是剩下的內容部分了。DIV3中又包含了一個頭,表格和底部的批量操做。結構圖以下：web

3、搭建框架框架

知道了網頁的結構，如今就開始按照上圖，把網頁的結構搭建起來，而後，再慢慢細化。字體

（1）、搭建結構網站

 1 <body>
 2       <form action="" >
 3           <div class="jc-demo-box">
 4             <div class="divHeader">
 5                 "全媒體訂閱"
 6             </div>
 7             <div class="divTab">
 8                 "關鍵詞訂閱,網站論壇訂閱..."
 9             </div>
10             <div class="divContent">
11                 <div class="keyaddClass">
12                     "關鍵詞列表"
13                 </div>
14                 <div class="divContent1">
15                     "全部的關鍵詞"
16                 </div>
17             
18                 <div class="footOperation">
19                     "批量操做"
20                 </div>
21             </div>
22             <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>    
23         </div>
24         
25       </form>
26   </body>

結構搭建好了，可是會發現知識一堆文字，如今開始加樣式url

 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             border: 1px  solid #e8e7e7;
40         }
41         
42         .divTab{
43             height: 34px;
44             width:100%;
45             float: left;
46             /*爲了是結構看起來更明確，先把邊框加上，之後會去掉*/
47             border: 1px solid #e8e7e7;
48         }
49         
50         .divContent{
51             width: 100%;
52             float: left;
53             margin-top: 3px;
54             border: 1px solid #e8e7e7;
55             padding-top: 20px;
56             height: auto;
57         }
58         
59         .keyaddClass{
60             border-bottom: 2px solid #348bc4;
61             margin-bottom: 15px;
62             width: 98%;
63             float: left;
64             padding-left: 2%;
65         }
66         
67         .divContent1{
68             width: 100%;
69             float: left;
70             overflow: hidden;
71             margin-top: 3px;
72             /*爲了是結構看起來更明確，先把邊框加上，以及設置一個高度，之後會去掉*/
73             border: 1px solid #e8e7e7;
74             height: 400px;
75         }
76         
77         .footOperation{
78             background: none repeat scroll 0 0 #257cb5;
79             height: 48px;
80             overflow: hidden;
81             width: 100%;
82             float: left;
83             border-radius:0px 0px 4px 4px;
84         }
85  </style>