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

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

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

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

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

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

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

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

延伸回顾：块级元素(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

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com