导航制作

161 阅读1分钟
伪类属性
a:link:正常状态下的样式
a:visited:被点击过的超链接样式
a:hover:鼠标经过时的样式
a:active:激活时的样式(鼠标按下样式)
兼容性:在ie6、78兼容遵循l-v-h-a
现在兼容性写法:link和visitde一起,不写active
nav>a:link,nav>a:visited{
实例:
nav>a{
        font-size:20px;
        margin-right:20px;
        margin-left:20px;
        color:#000;
        text-decoration:none;
                        }
nav>a:hover:{
                color:#f000;
                text-decoration:underline;
            }
            
项目类别分别为有序列表和无序列表的列表方式
利用list-style-type可以设置列表的实现方式其中值分别为:
    disc:实心圆
    circle:空心圆
    square:正方形
    decimal:1,2,3,4
    upper-alpha:A、B、C、D
    lower-alpha:a、b、c、d
    upper-romam:罗马大写
    lower-roman:罗马小写
    none:不显示任何符号
    可以利用list-style-image:url()将前面的编号换成图片(兼容性不好,处理方式一:把图片放到li里,单独修饰图片垂直居中,处理方式二:把图片设置成背景图)

导航特点:文字颜色变化、背景发生变化、文字背景+颜色发生变化、背景+下划线(下划线,border-bottom)

dispaly:
    none:隐藏对象
    block:以块的形式出现(为对象之后添加新行)
    inline:默认值,内联元素(将块级转化为文本级)
    inline-block:内联块级元素(css2.1新增)