【牛腩】CSS与HTML界面制作（18-35讲）

    牛腩视频从第18讲-35讲主要是讲解了界面的制作，讲解的相对详细，其中界面制作的基础部分离不开CSS和HTML的讲解，下面总结一下这部分。

   【知识点】

   1.概念：CSS（Cascading Style Sheets）层叠样式表单，它是一种用来表现HTML或 XML 等文件样式的计算机语言。

           HTML（Hypertext Markup Language）超文本标记语言，是用于描述网页文档的一种标记语言。

   2.作用：

     CSS:在网页制作时采用CSS技术，可以有效地对全站页面有共同性质属性的布局、字体、颜色、背景和其它效果属性实现更加精确的控制。只要 对网页HTML里的相应的CSS代码做一些简单的修改，就可以改变同一页面或整站用到此“选择类”的网页的外观和格式样式。

     HTML:是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、 图形、动画、声音、表格、链接等。

   3.二者关系：

     HTML里包含的是网页内容，比如：网页标题，文章正文，连接之类等。CSS则是控制如何显示内容，比如：文字的颜色、大小，内容如何排 版等。 简单来说 就是HTML是网页的结构，CSS是网页的样式。就好比建房子，HTML就是盖房子先要把结构建出来，然后用CSS来装饰。实现页面内容与样式的分离。

   4.使用

     建立HTML页和样式表，将样式表直接拉到HTML中，使二者关联起来，实现网页内容与样式的分离，然后再分别进行编辑。

     

   HTML框架：基本框架如下，具体内容在就不多说了。

    

   CSS核心内容：在视频中有详细讲解

     a.选择器的优先级：ID选择器>类选择器>HTML标签选择器

     b. *块级元素(div占网页的一整行)、行类元素（span占一行的一部分）   

         <div id="special"class="menu">栏目一</div>  --块级元素

         <span class="menu niu">栏目二</span>            ---行类元素

          c.*CSS核心内容：标准流、盒子模型、浮动、定位

   5.界面显示效果：

    a.登录：

      

     b.首页：

      

     c.内容：

       

    d.出错页

        

   【小结】

    牛腩系统的界面制作，一步步跟着做下来，感觉很有意思，界面可以根据自己的兴趣爱好调整，这里只是跟着牛腩做，没有加入多少自己的想法，先照葫芦画瓢，相信自己以后也可以设计出自己喜欢的界面。