經(jīng)CSS美化后的試卷頁(yè)面
使用CSS美化前面做的純HTML頁(yè)面妻味，實(shí)現(xiàn)如上的效果.
*--
第一步:
使用text-align:center實(shí)現(xiàn)將標(biāo)題居中,width:auto使寬度自適應(yīng),height:80px設(shè)置高度,font-size:50px設(shè)置字體的大小.
#top{
height: 80px;
width: auto;
text-align: center; //文字居中
font-size:50px;
}
將得到如下效果圖:
標(biāo)題的實(shí)現(xiàn)
第二步:
使用代碼完成前面框一和框二的實(shí)現(xiàn)
.border { //外邊框的實(shí)現(xiàn)
width: 1000px;
border: 2px solid #aaaaaa; //設(shè)置大邊框樣式
border-radius: 5px; //設(shè)置圓角
margin: auto;
}
.interval { //間隔
height: 20px;
}
.top12 {
height: 70px;
width: 1000px;
line-height:70px;
font-size: 18px;
margin: auto;
}
效果就如圖所示啦
信息的實(shí)現(xiàn)
第三步:
將所有的題的外部都加上border,然后在每道大題里邊加上小邊框.
#main1{
height: 240px;
width: 1000px;
font-size: 18px;
margin: auto;
}
.smallborder{ //設(shè)置小題內(nèi)邊框
height: 70px;
width: 1000px;
line-height:70px;
font-size: 20px;
background: #dddddd;
margin: auto;
}
第一題
第二題和第三題也依舊按照第一題的步驟來(lái)做.
#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;
}
第五道題
這樣就實(shí)現(xiàn)了一個(gè)試卷樣式的美化!
