首页 > 其他分享> > css - 编写兼容到ie7的导航

css - 编写兼容到ie7的导航

2020-11-04 10:32:27 作者：互联网

1, index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部导航</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="header">
        <div class="main">
            <ul class="nav">
                <li><a href="" class="active">首页</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">产品</a></li>
                <li><a href="">活动</a></li>
                <li><a href="">新闻</a></li>
                <li class="right"><a href="">联系</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

2 , 样式重置文件 reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a{
    text-decoration: none;
}

3, 页面样式文件

@import url(./reset.css);

body{
    min-width: 1200px;
}
.main{
    width: 1200px;
    margin: 0 auto;
}
.header{
    background: skyblue;
    height: 60px;  /* 定义高度，否则 ul 下方会有白边 */
}

ul.nav>li{
    float: left;
    line-height: 60px;
    text-align: center;
}
ul.nav>li.right{
    float: right;
}
ul.nav>li>a{
    padding: 0 20px;
    /* 块显示才可以撑开 */
    display: inline-block; 
}

a.active{
    font-weight: 600;
}

a:hover{
    background-color: #282828;
    color: skyblue;
}

a{
    color: #282828;
}

标签：none,blockquote,ie7,li,font,ul,nav,兼容,css
来源： https://www.cnblogs.com/500m/p/13924588.html

css - 编写 兼容到ie7的导航

css - 编写兼容到ie7的导航