CSS
2016-12-09 本文已影响17人
WP啦啦啦
首先来聊聊传统的 table 布局吧。传统的 table 布局就是利用 table 元素所有的零边框特性来进行布局。整个页面的实现过程就是一个复杂的表格，经常还会出现表格套表格的现象，本人之前使用过 table 布局，当需要改动时，特别的繁琐。Table 布局具有如下缺点：
- 设计复杂，改版时工作量巨大
- 表现代码与内容混合，可读性差
- 不利于数据调用分析
- 网页文件量大，浏览器解析速度慢
采用 CSS 布局，界面逻辑性强，修改方便。具有 table 布局无可比拟的优越性：
- 表现和内容相分离，这样的页面对搜索引擎更加友好
- 提高页面浏览速度
- 易于维护和改版
下面说说本次的任务：使用CSS美化前面做的纯HTML页面，实现以下效果（仅供参考，不要求100%一样）
template
我们看到整个页面被分成8大部分，前两部分布局整体一致，中间四部分整体布局一致，最后一部分则为一个按钮。让我们看看具体的实现吧：
Html 页面：
<html>
<head >
<title></title>
<link href="paper.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<h1>统一建模语言理论测试</h1>
<div id="div1">
<span>考试科目：统一建模语言</span>
<span>时间：100分钟</span>
<span class="span_score">得分：</span>
</div>
<div id="div2">
<span>班级(必填): <input type="text"/></span>
<span>学号(必填): <input type="text"/></span>
<span>姓名(必填): <input type="text"/></span>
</div>
<div>
<div class="div_title">
<h3>一、填空题（每空5分，共20分）</h3>
</div>
<div class="div_test">
<ol>
<li><span>UML的中文全称是：</span><br />
<input class="input1" type="text"/>
</li>
<li><span>对象最突出的特征是：</span> <br />
<input class="input1" type="text"/>
<input class="input1" type="text"/>
<input class="input1" type="text"/>
</li>
</ol>
</div>
</div>
<div >
<div class="div_title">
<h3>二、选择题（每题10分，共20分）</h3>
</div>
<div class="div_test">
<ol>
<li><span>UML与软件工程的关系是：</span><br />
<input type="radio"/><label>(A)UML就是软件工程</label><br />
<input type="radio"/><label>(B)UML参与到软件工程中软件开发过程的几个阶段</label><br />
<input type="radio"/><label>(C)UML与软件工程无关</label><br />
<input type="radio"/><label>(D)UML是软件工程的一部分</label>
</li>
<li><span>Java语言支持：</span><br />
<input type="radio"/><label>(A)单继承</label><br />
<input type="radio"/><label>(B)多继承</label><br />
<input type="radio"/><label>(C)单继承和多继承都支持</label><br />
<input type="radio"/><label>(D)单继承和多继承都不支持</label>
</li>
</ol>
</div>
</div>
<div>
<div class="div_title">
<h3>三、多项选择题（每题10分，共20分）</h3>
</div>
<div class="div_test">
<ol>
<li><span>用例的粒度分为以下哪三种：</span><br />
<input type="checkbox"/><label>(A)概述级</label><br />
<input type="checkbox"/><label>(B)需求级</label><br />
<input type="checkbox"/><label>(C)用户目标级</label><br />
<input type="checkbox"/><label>(D)子功能级</label>
</li>
<li><span>类图由以下哪三部分组成：</span><br />
<input type="checkbox" /><label>(A)名称(Name)</label><br />
<input type="checkbox" /><label>(B)属性(Attribute)</label><br />
<input type="checkbox" /><label>(C)操作(Operation)</label><br />
<input type="checkbox" /><label>(D)方法(Function)</label>
</li>
</ol>
</div>
</div>
<div >
<div class="div_title">
<h3>四、判断题（每题10分，共20分)</h3>
</div>
<div class="div_test">
<ol>
<li><span>用例图只是用于和客户交流和沟通的，用于确定需求。</span>
<input type="radio" /><label class="yes">√</label>
<input type="radio" /><label class="no"> ×</label><br />
</li>
<li><span>在状态图中,终止状态在一个状态图中允许有任意多个。</span>
<input type="radio" /><label class="yes">√</label>
<input type="radio" /><label class="no"> ×</label>
</li>
</ol>
</div>
</div>
<div>
<div class="div_title">
<h3>五、简答题（每题20分，共20分）</h3>
</div>
<div class="div_test">
<ol>
<li><span>简述什么是模型以及模型的表现形式？</span><br />
<textarea rows="5" ></textarea>
</li>
</ol>
</div>
</div>
<p><button type="submit">计算分数</button></p>
</form>
</body>
</html>
CSS布局页面：
body{
width:1000px;
}
h1{
text-align:center;
}
div{
border: thin solid #CCCCCC;
margin-left:20px;
margin-bottom: 15px;
margin-right:20px;
}
#div1 span{
line-height:50px;
padding-left:20px;
padding-right:112px;
}
#div1 .span_score{
padding-left:100px;
}
#div2 span{
padding-left:20px;
padding-right:70px;
line-height:50px;
}
#div2 input{
height:25px;
width:120px;
vertical-align:middle;
}
.input1{
height:25px;
width:160px;
}
.div_test{
border:0px;
}
.div_title{
height: 50px;
background-color: #E8E8E8;
margin-bottom: 0px;
margin-left:0px;
margin-right:0px;
}
.div_test span{
line-height:40px;
margin-bottom:10px;
}
textarea{
height:50px;
width:800px;
margin-left:5px;
}
.yes{
color:Green;
font-weight:bold;
}
.no{
color:Red;
font-weight:bold;
}
p{
text-align:center;
}
button{
background-color: #66CCFF;
}
label{
line-height:30px;
}
看一下效果：
