关于网页布局的原则和导航栏的一些理解。（小白） - DD狗

   欢迎大家来到我的博客，我是一个web小白，希望可以通过博客来了解学习更多知识，谢谢大家。

     今天，我对网页的布局和导航栏进行了简单的了解，下面和大家分享一些自己的笔记。

---

       网页简单布局结构与表现原则：
           在网页布局中，html:结构化，css：表现化，JavaScript：行为化，三者存在分离又存在结合（一种思想）。
   那么什么是分离呢？并不是简简单单的分开编辑，如上所说，html是指向结构的，我们在制作时，
   应该先把html进行结构化，简洁化，再在此基础上进行css，实现真正的分离和结合。在初步的制作时，我们不应该过分追求
   样式，先在html的结构和语义化上进行努力。

           用最大化的简化html的结构，然后用css进行设置，减少html和css的契合度。

           看到网页设计图时，先进行html的结构，语义化，再进行css设计。

 ----     text-indent 文本缩进。（简化代码）

 

---

 

  

  
                            导航菜单的制作：
①垂直菜单
                用无序列表构造
                 

• 导航

                 清除圆点：list-style:none
                清除下划线：text-decoration：none
      **定义的关键是将标签设置为块元素，增加hover的效果。
                     ul li a{display:block;}
                     a:hover{}增加菜单的交互效果。

延伸回顾：块级元素(block)的特点:1 每个块级元素都会独自霸道一行。
                                             2 元素的高，宽，行高以及顶和底边距都可以设定。
                                             3 宽度不设置时，与父元素一致。
              内联元素(inline)的特点:1 与其他元素在同一行上。
                                             2 元素的高，宽，行高以及顶和底边距都不可以设定。
                                             3 元素的宽度不可以改变。
   内联块状元素(block-inline)特点:1 与其他元素在同一行上。
                                             2 元素的高，宽，行高以及顶和底边距都可以设定。

②水平菜单
                  在垂直菜单的基础上对li进行浮动
                          li{
                                   float:left
                             }
③圆角菜单
在水平菜单的基础上有两种方法：
                               1.为ul增加一个border-bottom，再为a标签增加一个圆角的图片背景。移动背景：background-position：
                               2. 使用border-radius。

 

---

 

 以上学习内容来自：慕课网。 http://www.imooc.com/course/program

---恢复内容结束---