zoukankan      html  css  js  c++  java
  • css009 装饰网站的导航

    css009 装饰网站的导航

    1、         选择定义样式的链接

    1、连接的状态: 

     A、未访问  a:link{C;}

     B、已访问  a:visited{ color : red; }

     C、鼠标经过变化  a:hover{ color : red; }

     D、活跃   a:active{ color : red;  }

    2、可以给不同的链接设定不同的类,针对不同的链接设定不同的样式

       .mainnav a: link { color : red; }

       .mainnav a: visited { color : red; }

       .mainnav a: hover { color : red; }

       .mainnav a:active{ color : red; }

    3、用派生器对连接进行分组。如导航栏链接用一个标签<nav>包裹起来

       Css样式中就可以这样写来设置链接群的样式:

       nav a {  font-size :20px; color:red;}

       nav a:link{color : red;}

       nav a:visited{ color : red;}

       nav a:hover{ color : red; }

       nav a:active{ color : red; }

    2、         给链接定义样式

    1、添加边框,设置背景颜色、图片,鼠标经过时颜色变化等

    2、给连接添加下划线:

    添加下划线 text-direction:underline;

    取消下划线:text-direction:none;

    鼠标经过时添加下划线 a:hover{ text-direction:underline; }

    3、使用底部边框线a{ text-direction:none;border-bottom:dashed 2px r ed; }

    4、使用背景图片

         a { text-direction:none; background:url(images/underline.gif )reapt-x left bottom;  padding-bottomm:5px; }

    5、创建按钮

            <a href="stale.html" class="button"></a>  (html代码)

           (css样式)a.button{ border:solid 2px red;  background-color:red }

    3、         创建导航栏(如果是主导航的话最好是用nav标签)

    1、使用无序列表

    2、取消项目符号,消除padding和margin

    3、ul.nav{ list-style-type:none; padding:0;  margin:0; }

    4、创建垂直导航栏

    A把连接当成块显示,a是行内元素,所以设置ul.nav a{display:block;}

    B 限制按钮的宽度 ul.nav a{display:block; 8px; }

    5、水平导航栏 (步骤)

    A display: inline-block;

    B 把<ul>浮动起来

    C 给无序列表创建样式,删除padding margin和项目符号,添加底部边框

    ul.nav{

       margin:0px;

       padding:0px;

       list-style:none;

       border-bottom:1px dashed red;

    }

    D给连接定义样式

    .nav a{

        text-decoration: none;

      color: black;

        font-size: 16px;

        font-family: "microsoft yahei";

    }

    6、对水平导航栏使用浮动 (步骤)

    A 浮动列表项目  .nav li{ float :left;}

    B 给链接添加 display: block;  ul .nav li{ display: block;}

    C 给链接定义样式 添加背景色 边框线等

    D 添加一个宽度 50px;

    E 在<ul>标签样式中添加 overflow:hidden;

      ul.nav{ overflow:hidden;}

    4、         Css式的预载替换算法

    预载:提前下载好替换的图片,减少加载时间的花费

    步骤:

      A 创建一张带有不同按钮版本的图片

      B 测量从整张图片的顶部到每张图片顶部之间的距离

      C 给普通的链接创建一个css样式

      D 创建:hover样式

         a:hover{background-position:0 0;}

      E

    5、         给特殊的链接类型定义样式

    1、链接到其他网站   

    a [href^=’http://’]       (^ 表示以什么开头)

    2、链接到电子邮箱

      a [href^=’mailto’]

    3、链接到特殊类型的文件

       a [href$=’.pdf’]       ($ 表示以什么结尾)

  • 相关阅读:
    Java 7 中 NIO.2 的使用——第二节 元数据文件的属性
    Java 7 中 NIO.2 的使用——第一节 Path 类的使用
    使用第三方工具覆写Object中方法
    Java Synchronized Blocks vs. Methods
    生如夏花,死如秋叶
    Struts2中的ModelDriven机制及其运用(转)
    Java 调用 Javascript 函数的范例
    枚举实现工厂模式
    使用Java 8 Lambda表达式对Employee类进行操作
    自定义异常时如何定义checked异常和unchecked异常
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5107459.html
Copyright © 2011-2022 走看看