导航栏

 

利用无序列表ul制作导航栏

所用到的元素

ul

样式属性

list-style-type：设置列表项目的预设标记

None：表示无任何标记

font-weight:像素值

 

li

语法

li{

float:left

margin:0 15px;

}

 

设置鼠标样式

li:hover{

color:颜色值;

cursor:pointer;

}

 

清除浮动

方法

给最后一个子标签设置clear属性值

语法

｛

clear:both;

｝

 

给父级标签设置after样式

语法

属性名：after｛

content:”空的”；

display：block；

clear：both；

｝

 

定位

position

定位属性

Top：更改该偏移量可使元素往下移动

Right：更改该偏移量可使元素往左移动

Bottom：更改该偏移量可使元素往上移动

Left：更改该偏移量可使元素往右移动

语法

｛

position:属性值;

｝

 

属性值

static

默认值，元素不会进行定位

Absolute：绝对定位

会脱离文档流且呈现块级元素效果

 

absolute

绝对定位

会脱离文档流且呈现块级元素效果

语法

#d1{
width: 300px;
height: 300px;
background-color: #101BFA;
  position: absolute;
left: 400px;
top: 400px;
}

 

注意事项

父级元素是相对最近的祖先元素定位存在子级元素的情况下，父级元素没开启绝对定位，子级元素以页面定位

 

父级元素开启绝对定位，子级元素以父级定位

 

fixed

与绝对定位的区别：

固定定位始终相对于当前页面进行定位

绝对定位相对于最近的祖先元素定位

固定定位也会脱离文档流

语法

#g1{
width: 100%;
height: 100px;
background-color: #FF0B08;
position: fixed;
left:0;
top:0;
}

 

relative：相对定位

不会脱离文档流

该定位是相对于元素本身在文档流中的位置进行定位

语法

#h1{
width: 300px;
height: 300px;
background-color: #FFFD0D;
position: relative;
left: 600px;
top: 600px;

}