HTML+CSS前端基础实践总结

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">&nbsp;<input type="text">&nbsp;<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">&#10004;</span>
        <input type="radio" name="p5select1"><span class="red">&#10006;</span><br>
        </li>
        <li>在状态图中，终止状态在一个状态图中允许任意多个。
        <input type="radio" name="p5select2"><span class="green">&#10004;</span>
        <input type="radio" name="p5select2"><span class="red">&#10006;</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是先定义好一种样式，再套给多个结构/内容。

HTML+CSS前端基础实践总结

推荐阅读更多精彩内容