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;

}

css - 编写 兼容到ie7的导航的更多相关文章

  1. CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...

  2. （转）Css样式兼容IE6,IE7,FIREFOX的写法

    根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别I ...

  3. Css样式兼容IE6,IE7,FIREFOX的写法

    根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别I ...

  4. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  5. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  6. IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...

  7. DIV+CSS解决IE6，IE7，IE8，FF兼容问题

    1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...

  8. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  9. DIV+CSS解决IE6，IE7，IE8，FF兼容问题(转至http://www.douban.com/note/163291324/)

    2011-07-25 21:11:47     DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...

  10. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 解决 VM with version 2.1.0 has multidex support ; VM has multidex support, MultiDex support library is disabled.问题

    发布打包完之后,android studio提示 VM with version 2.1.0 has multidex support I/MultiDex: installI/MultiDex: V ...

  2. MinIO客户端之license

    MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc license mc license info mc license register mc license ...

  3. 从零玩转Websocket实时通讯服务之前后端分离版本-websocket

    title: 从零玩转Websocket实时通讯服务之前后端分离版本 date: 2021-10-25 00:47:12.945 updated: 2021-12-26 17:43:10.496 ur ...

  4. X410的白嫖方案

    微软商店下的x410要收费试用也就几天,记录白嫖方案.配置和使用跳转到上一篇文章:Windows下使用图形化的Havoc C2 编译运行 GitHub上start最多的是这个仓库,但是已经很久没有维护 ...

  5. Java中单体应用锁的局限性&分布式锁

    互联网系统架构的演进 在互联网系统发展之初,系统比较简单,消耗资源小,用户访问量也比较少,我们只部署一个Tomcat应用就可以满足需求.系统架构图如下: 一个Tomcat可以看作是一个JVM进程,当大 ...

  6. 带你认识一下多模态对比语言图像预训练CLIP

    本文分享自华为云社区<多模态对比语言图像预训练CLIP:打破语言与视觉的界限>,作者:汀丶. 一种基于多模态(图像.文本)对比训练的神经网络.它可以在给定图像的情况下,使用自然语言来预测最 ...

  7. 协同编辑：Google Wave架构分析

    Google Wave的设计初衷是让人们互相发送信息,一起编辑文档,但用户对此感到困惑,很快就以失败告终.Google Wave持续了大约一年时间,于2010年8月被关闭. Wave"领先于 ...

  8. 讲透学烂二叉树(三)：二叉树的遍历图解算法步骤及JS代码

    二叉树的遍历是指不重复地访问二叉树中所有结点,主要指非空二叉树,对于空二叉树则结束返回. 二叉树的遍历分为 深度优先遍历 先序遍历:根节点->左子树->右子树(根左右),有的叫:前序遍历 ...

  9. 字节跳动基于DataLeap的DataOps实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 本文根据 ArchSummit 全球架构师峰会(深圳站)来自抖音数据研发负责人王洋的现场分享实录整理而成(有删减) ...

  10. 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0 （Ⅳ）

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,<火山引擎云原生数据仓库 ByteHouse 技术白皮书>正式发布.白皮书简述了 ByteHou ...