经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;
}
第五道题
这样就实现了一个试卷样式的美化!
