HTML+CSS是前端开发的基础。HTML是超文本标记语言，使用文本和HTML来描述网页，定义页面的内容。CSS是层叠样式表，定义怎样显示HTML元素。我们一般先写好HTML，然后在HTML上加入CSS效果。
目标界面效果：
QQ图片20180126210759.png
1.首先，我们问自己，要实现这样一个前端基础界面需要从哪入手？
回答：DreamWaver软件+一些html的基础知识+CSS基础知识，http://www.w3school.com.cn/上可以了解到。这部分知识可以先了解下，在用的时候细看。
2.其次，我们问自己，创建一个新工程后怎么做？
回答：先写HTML，将网页的文本内容用div形式显示出来。
HTML代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>统一建模语言测试</title>
<link rel="stylesheet" type="text/css" href="module.css"/>
</head>
<body>
<div class="container">
<h1>统一建模语言理论测试</h1>
<div class="part1" >
<ul id="sub">
<li>考试科目：统一建模语言</li>
<li>时间：100分钟</li>
<li>得分</li>
</ul>
</div>
<div class="part1" >
<ul id="inf">
<li>班级(必填)：<input type="text"></li>
<li>学号(必填)：<input type="text"></li>
<li>姓名(必填)：<input type="text"></li>
</ul>
</div>
<div class="part2">
<p class="title2">一、填空题(每空5分，共20分)</p>
<ol>
<li>UML的中文全称是:</li>
<input type="text">
<li>对象最突出的特征是:</li>
<input type="text"> <input type="text"> <input type="text"><br>
</ol>
</div>
<div class="part2">
<p class="title2">二、选择题(每题10分，共20分)</p>
<ol>
<form>
<li>UML与软件工程的关系是:</li>
<input type="radio" name="p4select1">(A)UML就是软件工程<br>
<input type="radio" name="p4select1">(B)UML参与到软件工程中软件开发过程的几个阶段<br>
<input type="radio" name="p4select1">(C)UML与软件工程无关<br>
<input type="radio" name="p4select1" >(D)UML是软件工程的一部分<br>
<li>Java语言支持:</li>
<input type="radio" name="p4select2">(A)单继承<br>
<input type="radio" name="p4select2">(B)多继承<br>
<input type="radio" name="p4select2">(C)单继承和多继承都支持<br>
<input type="radio" name="p4select2">(D)单继承与多继承都不支持<br>
</form>
</ol>
</div>
<div class="part2">
<p class="title2">三、多项选择题(每题10分，共20分)</p>
<ol>
<form>
<li>用例的粒度分为以下哪三种:</li>
<input type="checkbox" name="p5select1">(A)概述级<br>
<input type="checkbox" name="p5select1">(B)需求级<br>
<input type="checkbox" name="p5select1">(C)用户目标级<br>
<input type="checkbox" name="p5select1">(D)子功能级<br>
<li>类图由以下哪三个部分组成:</li>
<input type="checkbox" name="p5select2">(A)名称(Name)<br>
<input type="checkbox" name="p5select2">(B)属性(Attribute)<br>
<input type="checkbox" name="p5select2">(C)操作(Operation)<br>
<input type="checkbox" name="p5select2">(D)方法(Function)<br>
</form>
</ol>
</div>
<div class="part2">
<p class="title2">四、判断题(每题10分，共20分)</p>
<ol>
<form>
<li>用例图只是用于和客户沟通和交流的，用于确定需求。
<input type="radio" name="p5select1"><span class="green">✔</span>
<input type="radio" name="p5select1"><span class="red">✖</span><br>
</li>
<li>在状态图中，终止状态在一个状态图中允许任意多个。
<input type="radio" name="p5select2"><span class="green">✔</span>
<input type="radio" name="p5select2"><span class="red">✖</span><br>
</li>
</form>
</ol>
</div>
<div class="part2">
<p class="title2">五、简答题(每题20分，共20分)</p>
<ol>
<li>简述什么是模型以及模型的表现形式？</li>
<form>
<textarea rows="5" cols="90">
</textarea>
</form>
</ol>
</div>
<div class="part3">
<input type="button" class="button1" value="计算分数">
</div>
</div>
</body>
</html>
显示的页面为：
QQ图片20180126224021.png
HTML显示的只是页面的基础文本内容，并没有设置层叠效果，接下来让我们用CSS添加层叠效果。
CSS代码入下：
.container{
border:5px solid #F39;
font-size:16px;
width:1000px;
margin:0 auto;
padding:10px 50px;
box-sizing:border-box;
}
.part1,.part2{
border:1px solid #CCC;
margin:15px auto;
border-radius:3px;
}
h1,.part3{
margin:10px auto;
text-align:center;
}
ul{
list-style:none;
}
.part2{
padding-bottom:10px;
line-height:150%;
}
input{
padding:5px;
border-width:1px;
border-radius:3px;
}
li{
padding:10px 0;
font-weight:bolder;
}
ol{
margin:0;
}
.part1 li{
font-weight:normal;
display:inline-block;
padding:10px 20px;
width:220px;
}
.part1 input{
border-radius:3px;
width:100px;
}
.title2{
background-color:#E6E6E6;
margin:0;
padding:15px 10px;
padding-color:#E6E6E6;
font-size:18px;
font-family:"黑体";
font-weight:bolder;
}
.green{
color:green;
font-wight:bolder;
}
.red{
color:red;
font-wight:bolder;
}
.button1{
background-color:#5F9CFA;
color:#FFF;
padding:10px;
}
整个页面就实现了。
3.最后，我们总结一下在使用HTML+CSS的时候遇到的一些问题及解决方法是怎样的？
- 在设置class="part1"部分横向行内排列的时候，不能实现第一行与第二行对齐。使用的是div实现part1，尝试padding,border和margin都不能将两行的元素对齐。在W3Cschool上细看CSS时，display 属性规定元素应该生成的框的类型。li是行内标签，行内标签的宽度只能自适应。
display:"inline",设置为内联元素，不能给li加宽度。
display:"block"，可以给li加宽度，但是一行只能显示一个li。
display:"inline-block",行内块状元素，两个li之间没有换行，可以给li 加宽度。 - id,class与name区别，在什么情况下用。
id:id是HTML元素的Identity，一般是唯一的，主要是在客户端脚本里用。label与form控件的关联，只能用id，不能用name替换。脚本中获得对象直接用id，用name时必须先获得该控件。
name:主要是用于获取提交表单的某表单域信息， 作为可与服务器交互数据的HTML元素的服务器端的标示。在input、select、textarea、框架元素用常用到。
class:class是设置标签的类，用于指定元素属于何种样式的类，可以同时对多个元素进行定义。id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
