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. ImportError: No module named pypinyin

    import platform, subprocess, os, zipfile, xml, re, pypinyin ImportError: No module named pypinyin pi ...

  2. Java使用HttpUtil.request方法可以发送请求即【Java访问url得到响应数据】

    Java使用HttpUtil.request方法可以发送请求即[Java访问url得到响应数据] 注:这个工具类可以在网上找,也可以自己手写 ,手写的话需要用到以下依赖: <dependency ...

  3. IPTV SQM的项目总结

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

  4. Shell的概念、shebang、bash的概念

    什么是shell shell的作用是 解释执行用户输入的命令或程序等 用户输入一条命令,shell就解释一条 键盘输入命令,Linux给与响应的方式,称之为交互式 linux的计算机是如何跟用户进行交 ...

  5. DevExpress源码编译(部分翻译)

    环境准备(DevExpress v18.2 ~22.2): vs2015至2022版本 .net framework 4.7.2或更高(实际我们项目用4.5.2可以编译,并不是所有的工程都需要高版本) ...

  6. MySQL篇：第四章_详解DML语言

    DML语言 插入 一.方式一 语法: insert into 表名(字段名,...) values(值1,...); 特点: 1.字段类型和值类型一致或兼容,而且一一对应 2.可以为空的字段,可以不用 ...

  7. 云图说 | GPU共享型AI容器，让AI开发更普及

    摘要:容器以其独特的技术优势,已经成为业界主流的AI计算框架(如Tensorflow.Caffe)的核心引擎,为了进一步解决企业在AI计算性能与成本上面临的问题,华为云量身打造了AI容器产品. 容器以 ...

  8. 云图说｜OLAP开源引擎的一匹黑马，MRS集群组件之ClickHouse

    摘要:ClickHouse是俄罗斯公司Yandex在2016年开源的高性能.开源联机分析列式数据库管理系统.开源后,凭借卓越的分析性能.极好的线性扩展能力和丰富的功能,被业界公认为实时分析领域OLAP ...

  9. Chrome 安装 Vue Devtools 调试工具

    源码下载地址:https://github.com/vuejs/vue-devtools Make sure you are using Node 6+ and NPM 3+ Clone this r ...

  10. 网页“悼念模式”全站变灰/黑白色CSS代码

    <style> html { filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(1 ...