W1

作者: NPU_周辉 | 来源:发表于2017-04-05 09:31 被阅读69次

作业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会让页面变得很死。

W1

作业2：

作业2：

作业3：

作业4：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Week 01 Training: Fundamentals of HTML & CSS