关于网页布局的原则和导航栏的一些理解。（小白） - 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
---恢复内容结束---