用CSS美化考试页面
2016-12-12 本文已影响0人
TW冯雯
神奇的CSS就和神奇的PS一样，像个美容师，将普通的页面美化成任何你想要的样式。今天学习了一些基本的CSS技术，这个CSS教程内容非常详细，逻辑也很清楚，还没有了解CSS的童鞋可以到此一学~
【练习】使用CSS美化前面做的纯HTML页面，实现以下效果（仅供参考，不要求100%一样）：
css考试页面.png
【分析】首先来找不同吧，相比之前做的纯html页面，发生了如下一些变化：
* 整个页面被分割成了9大块，包括标题和提交按钮
* 标题和提交按钮居中了，主体部分包括7块，每一块都有边框
* 判断题部分多了“√”和“×”符号
明显的变化大概就是这样了，接下来就按照变化进行美化吧。在进行CSS布局时对相同类型的布局包起来，定义为相同的class可以大大提高效率。
【CSS布局】
body{
margin-left:15px;
margin-right:15px;
margin-bottom:15px;
maigin-top:15px;
}
h1,p{
text-align:center;
}
section,.title1,.title2{
border: 1.5px solid rgb(225,225,225);
margin-left:15px;
margin-bottom: 15px;
margin-right:15px;
maigin-top:15px;
border-radius: 5px;
}
.la,.lb {
display: inline-block;
width: 29%;
padding: 14px 4px 14px 4px;
font-size: 15px;
font-weight: bold;
}
input{
border: 1.5px solid rgb(225,225,225);
padding:5px 3em;
border-radius: 5px;
}
.title{
background: rgb(225,225,225);
padding: 1px 5px;
font-size: 17px;
font-weight: bold;
height:60px;
}
.all{
font-weight:bold;
font-size: 15px;
}
ol{
padding:4px 2em;
list-style:decimal inside;
}
li{
line-height:30px
}
.blank,.choice,.choicem,.answer{
line-height:30px;
padding:5px 15px;
}
textarea{
display: inline-block;
width: 100%;
height: 100%;
border: 1.5px solid rgb(225,225,225);
padding:2px 1em;
border-radius: 5px;
}
button{
text-align:center;
background-color: rgb(100,200,230);
}
.yes{
color:Green;
font-weight:bold;
}
.no{
color:Red;
font-weight:bold;
}
【HTML源码】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset="utf-8"/>
<link rel="stylesheet" href="wcss.css" type="text/css"/>
</head>
<body>
<header>
<h1>统一建模语言理论测试</h1></header>
<div class="title1">
<label class="la">考试科目：统一建模语言</label>
<label class="la">时间：100分钟</label>
<label class="la">得分：</label>
</div>
<div class="title2">
<label class="lb">班级（必填）：<input type="text" size="7"/></label>
<label class="lb">学号（必填）：<input type="text" size="7"/></label>
<label class="lb">姓名（必填）：<input type="text" size="7"/></label>
</div>
<section>
<div class="title"><h4>一、填空题（每空5分，共20分）</h4></div>
<ol>
<span class="all"><li>UML的中文全称是：</li></span>
<div class="blank"><input type="type"/></div>
<span class="all"><li>对象最突出的特征是：</li></span>
<div class="blank"><input type="type"/> <input type="type"/> <input type="type"/></div>
</ol>
</section>
<section>
<div class="title"><h4>二、选择题（每题10分，共20分）</h4></div>
<ol>
<span class="all"><li>UML与软件工程的关系是：</li></span>
<div class="choice">
<label><input type="radio"/>(A)UML就是软件工程</label><br/>
<label><input type="radio"/>(B)UML参与到软件工程中开发过程的几个阶段</label><br/>
<label><input type="radio"/>(C)UML与软件工程无关</label><br/>
<label><input type="radio"/>(D)UML是软件工程的一部分</label><br/>
</div>
<span class="all"><li>Java语言支持：</li></span>
<div class="choice">
<label><input type="radio"/>(A)单继承</label><br/>
<label><input type="radio"/>(B)多继承</label><br/>
<label><input type="radio"/>(C)单继承和多继承都支持</label><br/>
<label><input type="radio"/>(D)单继承和多继承都不支持</label><br/>
</div>
</ol>
</section>
<section>
<div class="title"><h4>三、多项选择题（每题10分，共20分）</h4></div>
<ol>
<span class="all"><li>用例的粒度分为以下哪三种：</li></span>
<div class="choicem">
<label><input type="checkbox"/>(A)概述级</label><br/>
<label><input type="checkbox"/>(B)需求级</label><br/>
<label><input type="checkbox"/>(C)用户目标级</label><br/>
<label><input type="checkbox"/>(D)子功能级</label><br/>
</div>
<span class="all"><li>类图由以下哪三部分组成：</li></span>
<div class="choicem">
<label><input type="checkbox"/>(A)名称(Name)</label><br/>
<label><input type="checkbox"/>(B)属性(Attribute)</label><br/>
<label><input type="checkbox"/>(C)操作(Operation)</label><br/>
<label><input type="checkbox"/>(D)方法(Function)</label><br/>
</div>
</ol>
</section>
<section>
<div class="title"><h4>四、判断题（每题10分，共20分）</h4></div>
<ol>
<span class="all"><li>用例图只是用于和客户交流沟通的，用于确定需求。</span>
<input type="radio"/><span class="yes">√</span><input type="radio"/><span class="no">×</span></li>
<span class="all"><li>在状态图中，终止状态在一个状态图中允许有任意多个。</span>
<input type="radio"/><span class="yes">√</span><input type="radio"/><span class="no">×</span></li>
</ol>
</section>
<section>
<div class="title"><h4>五、简答题（每题20分，共20分）</h4></div>
<ol>
<span class="all"><li>简述什么是模型以及模型的表现形式？</li></span>
<div class="answer">
<textarea cols="20" rows="5"></textarea>
</div>
</ol>
</section>
<p><button>计算分数</button></p>
<hr/>
</body>
</html>
【美化结果】
美化结果.png
