經CSS美化后的試卷頁面

使用CSS美化前面做的純HTML頁面，實現如上的效果.
*--

第一步:

使用text-align:center實現將標題居中,width:auto使寬度自適應,height:80px設置高度,font-size:50px設置字體的大小.

#top{  
     height: 80px; 
     width: auto;    
    text-align: center;   //文字居中
    font-size:50px;
     }

將得到如下效果圖:

標題的實現

第二步:

使用代碼完成前面框一和框二的實現

.border {   //外邊框的實現
           width: 1000px; 
           border: 2px solid #aaaaaa;    //設置大邊框樣式
           border-radius: 5px;             //設置圓角
           margin: auto;
         }
    .interval {             //間隔
        height: 20px;
       }
       .top12  {  
           height: 70px; 
           width: 1000px; 
           line-height:70px; 
           font-size: 18px;  
           margin: auto;
           }

效果就如圖所示啦

信息的實現

第三步:

將所有的題的外部都加上border,然后在每道大題里邊加上小邊框.

#main1{   
 height: 240px;  
 width: 1000px;    
 font-size: 18px; 
 margin: auto;
}
.smallborder{    //設置小題內邊框
     height: 70px;  
     width: 1000px;  
     line-height:70px;    
    font-size: 20px;    
    background: #dddddd;    
    margin: auto;
}

第一題

第二題和第三題也依舊按照第一題的步驟來做.

#main2{
    height: 380px;
    width: 1000px;
    font-size: 18px;
    margin: auto;
}

#main3{
    height: 380px;
    width: 1000px;
    font-size: 18px;
    margin: auto;
}
#main4{
    height: 200px;
    width: 1000px;
    font-size: 18px;
    margin: auto;
}

**-
將使用按鈕居中

#main5{
    height: 250px;
    width: 1000px;
    font-size: 18px;
    margin: auto;
}

#main5_content{
    height: 100px;
    width: 800px;
    font-size: 18px;
    border: 2px solid #aaaaaa;
    margin: auto;
}
#foot{
    text-align:center;
    }

第五道題

這樣就實現了一個試卷樣式的美化!