Web前端开发笔记—一级导航栏

一级导航栏编辑练习

1、ul  li方法实现

<1> 代码如下：

代码实现：

    
    
    



    

        
首页Home
        
课堂大厅Course
        
学习中心Learn
        
关于我们About
    
 

代码实现：

<2> 总结知识点：

①float属性

float属性定义DIV的浮动方式，有三种取值方式：none，left，right
当float属性值取为left时，div会向左浮动，其他的div显示方式和浏览器相关。
当float属性值取为right时，div会向右浮动。

②CSS页面布局：

display：设置元素显示类型
float：规定元素是否应该浮动
clear：规定元素的哪一端、侧不允许其他浮动元素
visibility：规定元素是否可见，与display不同，此属性为隐藏的对象保留其占据的空间
overflow：设置当元素的内容溢出时处理方式
overflow-x：设置当元素的内容横向溢出时处理方式
overflow-y：设置当元素的内容纵向溢出时处理方式
页面布局常见相关属性：
                ●float（left，right，auto）

                ●display（block，inline，inline-block，listitem）

                ●overflow（auto，hidden，scroll，visible）

③CSS定位——position属性

●position属性规定元素的定位类型，定义建立元素布局所用的定位机制，任何元素都可以定位。 

●position属性值：

absolute：绝对定位，相对于最近定位的祖先元素进行定位，元素的定位位置通过left、top、right和bottom属性值确定
relative：相对定位，相对于其正常位置进行定位，元素的定位位置通过left、top、right和bottom属性值确定
 原位置（如图所示）：

相对定位（如图所示）：

绝对定位（如图所示）：

*注：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么最近的已定位祖先元素是body

●包含块

包含块是标准布局中的一个重要概念，它是绝对定位的基础，包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下，body元素是一个大的包含块，所有绝对定位的元素都是根据body来确定自己所处的位置的。如果没有自己定义的包含快，那么所有绝对定位的元素都是根据body来确定自己的位置。 如果自己定义了包含快，那么根据自己定义的包含块来确定位置。

2、div方法实现

①  代码如下：

    
    
    



    
首页Home
    
课堂大厅Course
    
学习中心Learn
    
关于我们About
 

代码实现：

②  总结知识点（同上）