CSS

       首先来聊聊传统的 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;
}

       看一下效果:



推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,543评论 1 91
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员小月阅读 15,293评论 32 459
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,012评论 0 30
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 2,235评论 0 5
  • 生活就是一场漫长的告别,不同的城市间穿行多了,每每在车站或是机场,方位感总是越来越模糊,仿佛所有的起点都是家,但每...
    傅踢踢阅读 1,534评论 2 12
  • 偶然间,我在活动行上看到POA的线下分享会,以前一直关注过他们的公众号,但也一直没线下交流过,这次赶巧了,去听了下...
    大街阅读 16,675评论 4 15
  • 早晨,小兔菲菲醒来,刷了牙,洗了脸,吃完早餐,去幼儿园上课了。 山羊老师坐在讲台上,等小动物都来齐后,就开始上课了...
    实弥我老公阅读 336评论 0 2
  • 孟怡甜甜的睡了,宋谨烽却辗转反侧的睡不着,看着孟怡的睡颜,想着今日决绝的阿眉,不由想到了——同床异梦这个词,果然,...
    李小胖的妈妈阅读 749评论 7 17
  • “新欢始终是欢,旧爱才是爱” 我刚在朋友圈里发表了这句话你就很快的问我和他是什么,我笑了笑想了想说我也不知道,但过...
    小瘦英阅读 85评论 0 0