W1

作业2：

该列表为无序列表，其中语言、编辑器用空格进行布局。
其中无序列表用<ul></ul>包裹列表
有序列表用<ol></ol>包裹列表
并都使用<li></li>包裹列表项

主要代码如下：

<p>        语言</p>
<ul>
    <li>C#</li>
    <li>JavaScript</li>
</ul>
<p>        编辑器</p>
<ul>
    <li>Atom</li>
    <li>Visual Studio Code</li>
</ul>

作业2：

关于表格使用<tr></tr>表示表格的行内容，<th></th>用来定义表头，<td></td>用来表示单元格内容即表中数据，大体使用如下：

<table>
    <tr>
          <th>Heading</th>
          <th>Another Heading</th>
    </tr>
    <tr>
          <td>row 1, cell 1</td>
          <td>row 1, cell 2</td>
     </tr>
     <tr>
          <td>row 2, cell 1</td>
          <td>row 2, cell 2</td>
      </tr>
</table>

需要注意的是当一个单元格为空时，为了避免单元格的边框没有被显示出来。在空单元格中添加一个空格占位符，就可以将边框显示出来。

作业的代码如下：

<table border="1" width="1000">
    <tr align="center">
        <th>.com域名的数量</th>
        <th>.cn域名的数量</th>
        <th>.net域名的数量</th>
        <th> </th>
    </tr>   
    <tr>
        <td>2003年</td>
        <td>1000</td>
        <td>2000</td>
        <td>3000</td>
    </tr>
    <tr>
        <td>2004年</td>
        <td>4000</td>
        <td>5000</td>
        <td>6000</td>
    </tr>
    <tr>
        <td>2005年</td>
        <td>7000</td>
        <td>8000</td>
        <td>9000</td>
    </tr>
    </table>

作业3：

因为只需要书写HTML难度不大因此只贴上代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body style="border:1px red solid">

<div style="padding-left:10px">
    <h1>统一建模语言理论测试</h1>
    <p>考试科目：统一建模语言<br/>
    时间：100分钟<br/>
    得分：<br/>
    班级（必填）：<input type="text" name="class"><br/>
    学号（必填）：<input type="text" name="sid"><br/>
    姓名（必填）：<input type="text" name="name"></p>

    <p>一、填空题（每空5分，共20分）</p>

    <p>  1.UML的中文全称是：<br/>
       <input type="text"><br/>
      2.对象最突出的特征是：<br/>
       <input type="text"> <input type="text"> <input type="text"></p>

    <p>二、选择题（每空10分，共20分）</p>

    <p>1.UML与软件工程的关系是：<br/>
      <input type="radio" name="1">(A)UML就是软件工程<br/>
      <input type="radio" name="1">(B)UML参与到软件工程中软件开发过程的几个阶段<br/>
      <input type="radio" name="1">(C)UML与软件工程无关<br/>
      <input type="radio" name="1">(D)UML是软件工程的一部分<br/>
    2.Java语言支持：<br/>
      <input type="radio" name="2">(A)单继承<br/>
      <input type="radio" name="2">(B)多继承<br/>
      <input type="radio" name="2">(C)单继承和多继承都支持<br/>
      <input type="radio" name="2">(D)单继承和多继承都不支持<br/>
    </p>

    <p>三、多项选择题（每空10分，共20分）</p>

    <p>1. 用例的粒度分为以下哪三种：<br/>
      <input type="checkbox">(A)需求级<br/>
      <input type="checkbox">(B)概述级<br/>
      <input type="checkbox">(C)用户目标级<br/>
      <input type="checkbox">(D)子功能级<br/>
    2. 类图由以下哪三部分组成：<br/>
      <input type="checkbox">(A)名称(Name)<br/>
      <input type="checkbox">(B)属性(Attribute)<br/>
      <input type="checkbox">(C)操作(Operation)<br/>
      <input type="checkbox">(D)方法(Function)<br/>
    </p>

    <p>四、判断题（每题10分，共20分）</p>

    <p>1.用例图只是用于和客户交流和沟通的，用于确定需求。<input type="radio" name="R"><input type="radio" name="R"><br/>
    2.在状态图中终止状态在一个状态图中允许有任意多个。<input type="radio" name="F"><input type="radio" name="F"></p>

    <p>五、简答题（每题20分，共20分）</p>

    <p>1.简述什么是模型以及模型的表现形式？<textarea></textarea></p>

    <input type="button" value="计算分数"><br/>

    <hr/>
</div>

</body>
</html>

实现效果如图所示：

作业4：

对上面的使用css进行修饰美化，所使用css的代码如下：

body{
    font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
}

img{
    width: 20px;
    height: 20px;
}

.t{
    margin-top: 10px; 
}

.head{
    text-align: center;
}

.p1{
    border:1px solid;
    border-width:90%;
    margin-left: 5%;
    margin-right:5%; 
    padding: 15px;
    margin-top: 20px;
}

#p11{
    padding-right:210px; 
}

#p12{
    padding-right:90px; 
}

.question{
    margin-top: 20px;
    border: 1px solid;
    background-color: #BEBEBE;
    border-width:90%;
    margin-left: 5%;
    margin-right:5%; 
    padding: 15px;
    font-weight: bold;
    border-style: solid solid none solid;
}

.p2{
    border:1px solid;
    border-width:90%;
    margin-left: 5%;
    margin-right:5%; 
    padding: 15px;
    border-style: none solid solid;
}

.tarea{ 
    margin: 10px;
    padding:20px;
    width: 90%;
    height: 60px;
    overflow-y:visible;
} 

.btn {
    border:1px solid;
    background-color: #398BFB;
    border-radius: 5px;
    padding: 5px 10px;
    color: #fff;
}

.b{
    margin-left:200px; 
    margin: 20px;
    text-align: center;
}

对HTML内的修改为：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="work4.css" type="text/css" />
</head>
<body style="border:1px red solid">

<div style="padding-left:10px">
    <h1 class="head">统一建模语言理论测试</h1>
    <div class="p1">
        <span id="p11">考试科目：统一建模语言</span>
        <span id="p11">时间：100分钟</span>
        <span id="p11">得分：</span>
    </div>

    <div class="p1">
        <span id="p12">班级（必填）：<input type="text" name="class" style="width:150px;"></span>
        <span id="p12">学号（必填）：<input type="text" name="sid" style="width:150px;"></span>
        <span id="p12">姓名（必填）：<input type="text" name="name" style="width:150px;"></span>
    </div>

    <div class="question">一、填空题（每空5分，共20分）</div>

    <div class="p2">
          1.UML的中文全称是:<br/>
           <input type="text" style="width:150px;" class="t">
        <div style="margin-top:15px">
              2.对象最突出的特征是：<br/>
               <input type="text" style="width:150px;" class="t"> <input type="text" style="width:150px;" class="t"> <input type="text" style="width:150px;" class="t">
        </div>
    </div>

    <div class="question">二、选择题（每空10分，共20分）</div>

    <div class="p2">
        1.UML与软件工程的关系是：<br/>
          <input type="radio" name="1" class="t">(A)UML就是软件工程<br/>
          <input type="radio" name="1" class="t">(B)UML参与到软件工程中软件开发过程的几个阶段<br/>
          <input type="radio" name="1" class="t">(C)UML与软件工程无关<br/>
          <input type="radio" name="1" class="t">(D)UML是软件工程的一部分<br/>
        <div style="margin-top:15px">
            2.Java语言支持：<br/>
              <input type="radio" name="2" class="t">(A)单继承<br/>
              <input type="radio" name="2" class="t">(B)多继承<br/>
              <input type="radio" name="2" class="t">(C)单继承和多继承都支持<br/>
              <input type="radio" name="2" class="t">(D)单继承和多继承都不支持<br/>
        </div>
    </div>

    <div class="question">三、多项选择题（每空10分，共20分）</div>

    <div class="p2">
        1. 用例的粒度分为以下哪三种：<br/>
          <input type="checkbox" class="t">(A)需求级<br/>
          <input type="checkbox" class="t">(B)概述级<br/>
          <input type="checkbox" class="t">(C)用户目标级<br/>
          <input type="checkbox" class="t">(D)子功能级<br/>
        <div style="margin-top:15px">
            2. 类图由以下哪三部分组成：<br/>
              <input type="checkbox" class="t">(A)名称(Name)<br/>
              <input type="checkbox" class="t">(B)属性(Attribute)<br/>
              <input type="checkbox" class="t">(C)操作(Operation)<br/>
              <input type="checkbox" class="t">(D)方法(Function)<br/>
        </div>
    </div>

    <div class="question">四、判断题（每题10分，共20分）</div>

    <div class="p2">
        1.用例图只是用于和客户交流和沟通的，用于确定需求。
        <div class="t">
            <input type="radio" name="R">![](CHECK MARK.png)
        </div>
        <div class="t">
            <input type="radio" name="R">![](CLOSE.png)
        </div>
        <div style="margin-top:15px">
            2.在状态图中终止状态在一个状态图中允许有任意多个。
        <div class="t">
            <input type="radio" name="F">![](CHECK MARK.png)
        </div>
        <div class="t">
            <input type="radio" name="F">![](CLOSE.png)
        </div>
        </div>
    </div>

    <div class="question">五、简答题（每题20分，共20分）</div>

    <div class="p2">1.简述什么是模型以及模型的表现形式？
        <div>
            <textarea class="tarea"></textarea>
        </div>
    </div>

    <div class="b">
        <input type="button" value="计算分数" class="btn">
    </div>

    <hr/>
</div>

</body>
</html>

最终运行如图所示：

至于为什么不使用table进行页面布局，我的理解是：

table必须在页面加载完之后才能显示未加载完之前table只是一个空白；
table会限制一些属性的自由度；
table会让页面变得很死。

最后编辑于：2017.12.06 07:44:49

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,761评论 5赞 460
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,953评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,998评论 0赞 320
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,248评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,130评论 4赞 356
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,145评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,550评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,236评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,510评论 1赞 291
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,601评论 2赞 310
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,376评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,247评论 3赞 313
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,613评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,911评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,191评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,532评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,739评论 2赞 335

W1

作业2：

作业2：

作业3：

作业4：

推荐阅读更多精彩内容