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. 制造业工厂生产管理MES系统中的设备管理模块

    制造业工厂万界星空科技生产管理MES系统中的设备管理模块介绍: 随时工厂数字化建设的大力推进,设备管理的效率得到了很大的提升,特别是作为机加工企业,设备是整个企业非常重要的核心资产. 1.MES设备管 ...

  2. IPTV SQM的项目总结

    本文于2015年底完成,发布在个人博客网站上,标题为<项目总结--纪念我参与过的IPTV SQM项目>. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 时 ...

  3. bash命令的使用

    bash的工作特性之命令执行状态返回值和命令展开所涉及的内容及其示例演出 !脚本执行与调试 1.绝对路径执行,要求文件有执行权限 2.以sh命令执行,不要求文件有执行权限 3..加空格或source命 ...

  4. Windows中开启自动dump的方法

    @echo off echo 正在启用Dump... reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Windows Error ...

  5. 打造 VSCode 高效 C++ 开发环境的必备插件

    工欲善其事,必先利其器 C++ clangd:代码补全.跳转.clang-tidy 检查,自带 clang-format CodeLLDB:LLVM 的调试器(类比 GDB) CMake CMake ...

  6. Linux系统快速入门(完整版)

    LINUX基础知识 I.Linux概述 linux是啥? 一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和Unix的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的Un ...

  7. 最新系统MacOs13 Ventura(M1/M2芯片) + Parallels Desktop 18(PD18史上最强虚拟机)永久使用攻略

    众神殿内,高朋满座,胜友如云,Vmware.VirtualBox.Utm等虚拟机大神群英荟萃,只见位于C位王座上的Parallels怅惘抬头,缓缓逡巡,睥睨群小,目光到处,无人敢抬头对视. 是的,如果 ...

  8. 数仓集群管理：单节点故障RTO机制分析

    摘要:大规模分布式系统中的故障无法避免.发生单点故障时,集群状态和业务是如何恢复的? 本文分享自华为云社区<GaussDB (DWS) 集群管理系列:单节点故障RTO机制分析(集群状态恢复篇)& ...

  9. 云小课 | 华为云KYON之ELB混合负载均衡

    摘要:本文介绍在华为云KYON(Keep Your Own Network)企业级云网络解决方案中,弹性负载均衡服务提供混合负载均衡功能,支持使用公有云的负载均衡绑定华为云上和IDC,实现云上云下业务 ...

  10. 解读顶会ICDE’21论文：利用DAEMON算法解决多维时序异常检测问题

    摘要:该论文针对多维时序数据的异常检测问题,提出了基于GAN和AutoEncoder的深度神经网络算法,并取得了当前State of the Art (SOTA)的检测效果.论文是云数据库创新LAB在 ...