前言###
突然觉得能设计并完成前端开发的工程师真实太辛苦了。。。也许工作久了就没什么感觉了。但是我作为一个新人，完成了这么一次作业，就深深的为前端开发中的种种细节工作所赞叹。嗯，不多说了，先来说题。
任务目标###
使用CSS美化前面做的纯HTML页面，实现以下效果（仅供参考，不要求100%一样）：
任务目标
作业分析###
尽管，题中说了不要求100%一样，但是我觉得，作为前端开发，就应该尽力去完成原型图上的设计目标，并且如果有改进，也应该是在完成的基础上去改进。因此，对于这次作业，我还是认真地思考了细节上的一些问题。
那么下来，简单地讲一下：
- 以边框为界，将整张试卷分为8块，最外层是一个
body，其中套着7个div、一个大标题和一个按钮。 - 最上方两个信息相关的
div的样式基本一致，可以考虑共用一个样式。 - 试题部分的
div分两种，一种是大标题，另一种是小题。大标题部分要有灰背景，小题部分则要注意题干和选项的字体粗细。 - 注意所有边框都是圆角的，包括按钮的。
基本上要注意的就是这些，下面就可以写代码了。
我的HTML代码###
因为要植入样式，所以HTML代码和上次的作业比起来有些小改动：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>统一建模语言理论测试</title>
</head>
<body>
<h1 id = "title">统一建模语言理论测试</h1>
<form action="这里待定！！！需要一个URL." method="post">
<div id = "testInfo" class="yj">
<span class = "info">考试科目：统一建模语言</span>
<span class = "info">时间：100分钟</span>
<span class = "info">得分：</span>
</div>
<div id = "stdInfo" class="yj">
<span class = "info">班级（必填）：<input type = "text" /></span>
<span class = "info">学号（必填）：<input type = "text" /></span>
<span class = "info">姓名（必填）：<input type = "text" /></span>
</div>
<div id = "testTitle">
<h3>一、填空题（每空五分，共20分）</h3>
</div>
<div id = "testContent">
<ol>
<li>UML的中文全称是：</li>
<input type = "text" id = "UMLid" />
<li>对象的突出特征是：</li>
<span>
<input type = "text" id = "CharOfObj" />
<input type = "text" id = "CharOfObj" />
<input type = "text" id = "CharOfObj" />
</span>
</ol>
</div>
<div id = "testTitle">
<h3>二、选择题（每题10分，共20分）</h3>
</div>
<div id = "testContent">
<ol>
<li>UML与软件工程的关系是：</li>
<div id="item">
<input type = "radio" name = "UMLAndSP" id="1A"/>
<label for = "1A">(A)UML就是软件工程</label>
</div>
<div id="item">
<input type = "radio" name = "UMLAndSP" id="1B"/>
<label for = "1B">(B)UML参与到软件工程中软件开发的几个阶段</label>
</div>
<div id="item">
<input type = "radio" name = "UMLAndSP" id="1C"/>
<label for = "1C">(C)UML与软件工程无关</label>
</div>
<div id="item">
<input type = "radio" name = "UMLAndSP" id="1D"/>
<label for = "1D">(D)UML是软件工程中的一部分</label>
</div>
<li>Java语言支持：</li>
<div id="item">
<input type = "radio" name = "JavaSup" id="2A"/>
<label for = "2A">(A)单继承</label>
</div>
<div id="item">
<input type = "radio" name = "JavaSup" id="2B"/>
<label for = "2B">(B)多继承</label>
</div>
<div id="item">
<input type = "radio" name = "JavaSup" id="2C"/>
<label for = "2C">(C)单继承和多继承都支持</label>
</div>
<div id="item">
<input type = "radio" name = "JavaSup" id="2D"/>
<label for = "2D">(D)单继承和多继承都不支持</label>
</div>
</ol>
</div>
<div id = "testTitle">
<h3>三、多项选择题（每题10分，共20分）</h3>
</div>
<div id = "testContent">
<ol>
<li>用例的粒度分为以下哪三种：</li>
<div id="item">
<input type = "checkbox" name = "userLev" id="M1A"/>
<label for = "M1A">(A)概述级</label>
</div>
<div id="item">
<input type = "checkbox" name = "userLev" id="M1B"/>
<label for = "M1B">(B)需求级</label>
</div>
<div id="item">
<input type = "checkbox" name = "userLev" id="M1C"/>
<label for = "M1C">(C)用户目标级</label>
</div>
<div id="item">
<input type = "checkbox" name = "userLev" id="M1D"/>
<label for = "M1D">(D)子功能级</label>
</div>
<li>类图由以下哪三部分组成：</li>
<div id="item">
<input type = "checkbox" name = "classMap" id="M2A"/>
<label for = "M2A">(A)名称（id）</label>
</div>
<div id="item">
<input type = "checkbox" name = "classMap" id="M2B"/>
<label for = "M2B">(B)属性（Attribute）</label>
</div>
<div id="item">
<input type = "checkbox" name = "classMap" id="M2C"/>
<label for = "M2C">(C)操作（OPration）</label>
</div>
<div id="item">
<input type = "checkbox" name = "classMap" id="M2D"/>
<label for = "M2D">(D)方法（Function）</label>
</div>
</ol>
</div>
<div id = "testTitle">
<h3>四、判断题（每题10分，共20分）</h3>
</div>
<div id = "testContent">
<ol>
<li>
<span>用例图只是用于和客户交流和共同的，用于确定需求。
<input name = "judge1" id ="J1T" type = "radio"><label class="yes" for = "J1T">√</label>
<input name = "judge1" id ="J1F" type = "radio"><label class="no" for = "J1F">×</label>
</span>
</li>
<li>
<span>在状态图中，终止状态在一个状态图中允许有任意多个。
<input name = "judge2" id ="J2T" type = "radio"><label class="yes" for = "J2T">√</label>
<input name = "judge2" id ="J2F" type = "radio"><label class="no" for = "J2F">×</label>
</span>
</li>
</ol>
</div>
<div id = "testTitle">
<h3>五、简答题（每题10分，共20分）</h3>
</div>
<div id = "testContent">
<ol>
<li>
简述什么是模型以及模型的表现形式？
</li>
<textarea id = "answerArea"></textarea>
</ol>
</div>
<input id ="button" type = "submit" value = "计算分数"/>
</form>
</body>
</html>
下面是CSS代码：
/*body加边框，边距采用自适应*/
body{
margin:auto;
border:4px solid DeepPink;
}
/*大标题样式居中就好*/
#title{
text-align:center;
}
/*将所有div的共同样式提取出来*/
div{
border: thin solid #CCCCCC;
margin-left:5%;
margin-bottom: 1%;
margin-right:5%;
}
/*圆角并不是每个div都需要的样式，所以单独写出来*/
.yj{
border-radius:5px;
}
/*信息部分的样式可以公用，所以提取出来*/
.info{
display:inline-block;
margin-left:1%;
line-height:50px;
width:30%;
font-weight: bold;
}
/*大题题干的div需要个性化，它的圆角只有上方的两个*/
#testTitle{
line-height:25px;
background-color: #E8E8E8;
margin-bottom: 0px;
border-top-right-radius:5px;
border-top-left-radius:5px;
}
/*大题的题目需要调整左边距*/
#testTitle h3{
margin-left:1%;
}
/*小题部分的边框需要有下边的两个圆角*/
#testContent{
border:thin solid #CCCCCC;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
/*小题的题干的字体需要加粗，同时其边距需要调整*/
#testContent li{
margin-left:1%;
margin-bottom: 1%;
margin-top: 1%;
font-weight: bold;
}
/*选项的边距需要调整*/
#item{
margin-left:1%;
border:0px;
margin-bottom: 0px;
}
/*文本域的大小、边距需要调整，同时需要加上圆角*/
#answerArea{
height:25%;
width:95%;
margin-bottom:2%;
border-radius:5px;
border:thin solid #CCCCCC;
}
/*判断题选项的对错样式设置*/
.yes{
color:Green;
font-weight:bold;
}
.no{
color:Red;
font-weight:bold;
}
/*调整位置*/
label{
line-height:30px;
}
/*按钮位置、大小、背景色、圆角设置*/
#button{
width:6%;
height:5%;
background-color: #31b0d5;
border:thin solid #286090;
border-radius:5px;
color:#fff;
margin-left:44%;
}
/*输入框的大小位置调整，同时加上圆角*/
input[type=text]{
width:150px;
height:4%;
border-radius:5px;
border:thin solid #CCCCCC;
}
注意：CSS代码中多处采用了百分比的配置距离、位置的方法。其目的是为了在不同大小的显视屏上显示不会错位。
最终效果如下：
最终效果
遗留问题###
对于单选框和复选框的样式没有和目标达成一致，这个目前还真是不知道该怎么修改。。。之后在学习学习相关资料看看吧。
网友评论