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. redis添加缓存配置类

    redis添加缓存配置类 package com.atguigu.servicebase.config; import com.fasterxml.jackson.annotation.JsonAut ...

  2. 从零玩转设计模式之外观模式-waiguanmos

    title: 从零玩转设计模式之外观模式 date: 2022-12-12 15:49:05.322 updated: 2022-12-23 15:34:40.394 url: https://www ...

  3. MySQL 基础（二）日志

    在操作系统和数据库管理系统中,为了提高数据的容灾性,一般都会通过写入相关日志的方式来记录数据的修改,使得系统受到灾难时能够从之前的数据中恢复过来.MySQL 也提供了日志的机制来提高数据的容灾性,主要 ...

  4. Git 的底层原理

    前言 ​ 基于 Git 的使用,已经在前文有过相关的介绍,使用 Git 用作日常的开发基本上是足够的.现在,本文将详细介绍一些有关 Git 的实现原理. 底层命令与上层命令 ​ 一般情况下,正常使用的 ...

  5. 文心一言 VS 讯飞星火 VS chatgpt （29）-- 算法导论5.2 1题

    一.在 HIRE-ASSISTANT 中,假设应聘者以随机顺序出现,你正好雇用一次的概率是多少?正好雇用 n 次的概率是多少? 文心一言: 讯飞星火: 华为盘古: 在HIRE-ASSISTANT中,假 ...

  6. LiteAI 四大杀手锏，解锁物联网智能设备AI开发难关

    [摘要] IoT设备中嵌入AI能力实现产品的智能升级,已经是AIoT行业发展的重要通道,那怎样才能实现AIoT = AI + IoT呢?如何将AI模型塞到小小的IoT设备里,让它可以轻松运行起来呢?成 ...

  7. 数仓性能优化：倾斜优化-表达式计算倾斜的hint优化

    本文分享自华为云社区<GaussDB(DWS)性能调优:倾斜优化-表达式计算倾斜的hint优化>,作者: 譡里个檔 . 1.原始SQL SELECT TMP4.TAX_AMT, CATE. ...

  8. 了解库开发，我们从STM32标准库开发学起

    摘要:从STM32新建工程.编译下载程序出发,让新手由浅入深,尽享STM32标准库开发的乐趣. 自从CubeMX等图像配置软件的出现,同学们往往点几下鼠标就解决了单片机的配置问题.对于追求开发速度的业 ...

  9. CWE 4.7中的新视图：工业控制系统的安全漏洞类别

    摘要:CWE今年的第一个版本在5/1前发布了,做为软件安全的重要分类标准,我们来看下这个版本有那些变化. 本文分享自华为云社区<CWE 4.7中的新视图 -- 工业控制系统的安全漏洞类别> ...

  10. CodeFormer一款既能人脸修复、还能视频去码的AI软件，附下载使用教程

    CodeFormer是一款强大的人工智能工具,主要用于图像和视频的修复和增强.它基于深度学习技术,特别是人脸复原模型,可以轻松修复和增强面部图像,提升照片和视频的质量和视觉效果 工作原理 1.通过自动 ...