万能兼容所有浏览器导航条-学习笔记

兼容所有浏览器的万能浏览器,很多漂亮的导航基本都是由此导航条演化而来,多多练习几遍。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>navtitle>
    <style>
    body,div,ul,li{margin: 0;padding:0;}
    ul{
        list-style:none;
            height:45px;
            line-height: 45px; /*垂直居中,子元素均会继承该样式*/
            background:#00f;
        }
        ul li{float:left;}
        ul li a{
            color:#fff;
            display: block;  /*块元素设置高度才有效*/
            height: 45px;
            float:left;  /*兼容IE6*/
            text-decoration: none;
            padding: 0 20px;
        }
        ul li a:hover{background: #ccc;}
    style>
head>

<body>
    <ul>
        <li><a href="#">menu1a>li>
        <li><a href="#">menu2a>li>
        <li><a href="#">menu3a>li>
        <li><a href="#">menu4a>li>
        <li><a href="#">menu5a>li>
    ul>
body>
html>

你可能感兴趣的:(前端笔记)