web学习（十）列表,导航与页面布局

1.如代码，如图

    <dl>定义列表
        <dt>列表名</dt>
        <dd>列表详情</dd>
    </dl>
    <ul>无序列表
        <li>列表中的第一项</li>
        <li>列表中的第二项</li>
        <li>列表中的第三项</li>
    </ul>
    <ol type="A">有序列表
        <li>列表中的第一项</li>
        <li>列表中的第二项</li>
        <li>列表中的第三项</li>
    </ol>

！注意

  list-style：none;去掉无序列表中的点
  ol有序列表默认是数字顺序，如果设置 A（大写ABC）a（小写abc）l（罗马数字大写）i（罗马数字小写）

2.导航的制作

导航：是指通过一定的技术手段，为网页的访问者提供一定的途径，使其可以方便地访问到所需的内容
通常制作导航要用到列表元素（ul、ol、li）和超链接元素（a）
导航有水平方向和垂直方向，其中水平方向的导航就是需要把区块元素在同一行中展示出来，需要用到之前学过的浮动知识
当我们得到一个导航的ul图后，首先需要分析导航结构，用需要的元素把导航的HTML结构完成，然后为其设置样式，需要在ps里精确测量，最后的完成的页面应该与ul图相同

3.页面布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）
开始使用布局的时候尽量通过ps等画图工具进行设计
早期的网站使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具
如今大多数网站使用

等元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观
使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局
学习布局时需要完成下面的步骤
第一步：画布局图（在刚开始的布局阶段必须画）
第二部：开始布局HTML结构（务必保证按照布局图去书写）
第三部：在PS中精确测量出每个区域的大小为HTML结构设置css样式
第四部：保证css和js（后面学习到的）与html分离（可以一开始就将css写在css文件中，也可以在做完页面后单独去做）