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代码如下：

  
统一建模语言理论测试
  

    

       
考试科目：统一建模语言
       
时间：100分钟
       
得分
    
  
  

    

      
班级(必填)：
      
学号(必填)：
      
姓名(必填)：
    
  
  

    
一、填空题(每空5分，共20分)
    

      
UML的中文全称是:
        
      
对象最突出的特征是:
          
 
    
  
  

    
二、选择题(每题10分，共20分)
    

      

        
UML与软件工程的关系是:
        (A)UML就是软件工程

        (B)UML参与到软件工程中软件开发过程的几个阶段

        (C)UML与软件工程无关

        (D)UML是软件工程的一部分

        
Java语言支持:
        (A)单继承

        (B)多继承

        (C)单继承和多继承都支持

        (D)单继承与多继承都不支持

      
    
    
  
  

  
三、多项选择题(每题10分，共20分)
    
 
      

       
用例的粒度分为以下哪三种:
        (A)概述级

        (B)需求级

        (C)用户目标级

        (D)子功能级

       
       
类图由以下哪三个部分组成:
        (A)名称(Name)

        (B)属性(Attribute)

        (C)操作(Operation)

        (D)方法(Function)

      
      
    
  
  

  
四、判断题(每题10分，共20分)
    

      

        
用例图只是用于和客户沟通和交流的，用于确定需求。
        ✔
        ✖

        
        
在状态图中，终止状态在一个状态图中允许任意多个。
        ✔
        ✖

        
 
      
  
    
  
  

  
五、简答题(每题20分，共20分)
    

      
简述什么是模型以及模型的表现形式？
      

                
      
 
    
  
  

    
  

显示的页面为：

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是先定义好一种样式，再套给多个结构/内容。