CSS美化试卷页面

经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;
    }

第五道题

这样就实现了一个试卷样式的美化!