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. Javascript Ajax总结——其他跨域技术之Comet

    Comet指一种更高级的Ajax技术( 也称 "服务器推送" ),一种服务器向页面推送数据的技术.Comet能够让信息近乎实时地被推送到页面上,非常适合体育比赛的分数和股票报价.有 ...

  2. 如何屏蔽各大AI公司爬虫User Agent

    罗列各大AI公司Scraper爬虫Crawler使用的User Agent,教您如何在robots.txt里面屏蔽这些爬虫的访问,禁止它们下载您的网站内容以训练 AI 模型,保护数据,降低带宽,防止宕 ...

  3. 前端 Git 使用约定

    前端 Git 使用约定 背景 开发前端项目,有以下困惑: 使用哪个分支开发,哪个分支发布 修复线上bug的流程是什么,如何避免修复完了下次却又出现了 cms分支有十多个,是否都有用 如何快速找到之前某 ...

  4. 技本功|Hive优化之监控（三）

    Hive是大数据领域常用的组件之一,主要是大数据离线数仓的运算,关于Hive的性能调优在日常工作和面试中是经常涉及的一个点,因此掌握一些Hive调优是必不可少的技能.影响Hive效率的主要有数据倾斜. ...

  5. fstab 简介

    简介 在一般的 Unix 或者 类Unix 中,为了更好地管理磁盘资源,有时不得不挂载一个外部的磁盘,使用 mount 命令可以快速地挂载一个外部磁盘,具体用法为: # 将磁盘分区 sda2 挂载在 ...

  6. Microsoft Docs & Learn Champion 冠军赛

    2021年个人作为微软MVP,参与了Microsoft Docs & Learn Champion 冠军赛,经过一年的努力,全面宣传了微软的技术. 以下是Microsoft Docs & ...

  7. MySQL基础篇：第九章_详解流程控制结构

    流程控制结构 系统变量 一.全局变量 作用域:针对于所有会话(连接)有效,但不能跨重启 查看所有全局变量 SHOW GLOBAL VARIABLES; 查看满足条件的部分系统变量 SHOW GLOBA ...

  8. 华为云企业级Redis揭秘第17期：集群搭载多DB，多租隔离更降本

    摘要:GaussDB(for Redis)支持真正可扩展的多DB,轻松实现降本增效. 本文分享自华为云社区<华为云企业级Redis揭秘第17期:集群搭载多DB,多租隔离更降本>,作者: G ...

  9. COG云原生优化遥感影像，瓦片切分的最佳实践

    摘要:云上遥感影像文件Cloud optimized GeoTIFF(COG)格式的详细介绍,大量数据上云面临的挑战,并分享了获得云原生影像最佳性能的实践经验. 本文分享自华为云社区<COG云原 ...

  10. 单日30PB量级！火山引擎ByteHouse云原生的数据导入这么做

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   近期,火山引擎ByteHouse技术专家受邀参加DataFunCon2023(深圳站)活动,并以"火 ...