zoukankan      html  css  js  c++  java
  • 6.链接与导航

    1.动态超链接

    <a href="****">链接文本</a>
    去掉下划线:text-decoration:none

    利用css的为类别来制作超链接动态效果的方法

    a:link  普通样式
    a:visited被点击过的超链接的样式
    a:hover鼠标指针经过超链接上时的样式
    a:active在超链接上单击时,即当前激活时,超链接的样式
    需要注意的问题
    6.链接与导航 - 骡子 - stupidmule@126 的博客注意声明的顺序   css设置后面的会覆盖前面的效果
    6.链接与导航 - 骡子 - stupidmule@126 的博客a:link和a的区别
    6.链接与导航 - 骡子 - stupidmule@126 的博客a:active当前激活状态  显示的情况非常少 所以很少使用
    2.按钮式超链接
    利用边框的样式模拟按钮效果。普通超链接和点击过的冲链接采用相同的样式,鼠标指针经过时的超链接相应的改变文字           颜色背景色,位置和边框。模拟按下去的效果
    例子: a{
    font-family:
    font-size:
    text-align:
    margin:
    }
    a:link, a:visited
    {
    color:#aaa
    padding:4 10 4 10;
    color: rgb(69, 83, 83); font-family: 'Hiragino Sans GB W3', 'Hiragino Sans GB', Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px;"> text-decoration:none;
    border-top:1px solid #eeeeee;
    border-left:1px solid #eeeeee;
    border-bottom:1px solid #717171;
    border-right:1px solid #717171;
    }
            a:hover{
    color:#821818;
    padding:5 8 3 12
     
    border-top:1px solid #717171;
    border-left:1px solid #717171;
    border-bottoom:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
    }
    6.链接与导航 - 骡子 - stupidmule@126 的博客
    3.css控制鼠标指针  本人认为不常用
    4.浮雕背景超链接  实例应用(用table和a标签制作的菜单)
    超链接背景图片的变换实现浮雕的效果,变换图片的思路
    (1)原始的背景图片  
    (2)a:visited鼠标浏览过和a正常时的背景图片
    (3)a:hover鼠标经过时的背景图片
    a标签间不要有空格
    firefox中a标签不能直接设高度和宽度 ,将a变为块才可
    6.链接与导航 - 骡子 - stupidmule@126 的博客

     项目列表

    1.列表的符号
    顺序为ol   无顺序为ul标记
    ul{list-style-type:decimal}  项目编号
    2.图片符号
    ul设置list-style-image:url(*);此种方法不推荐
    建议方法:ul:list-style-type:none
    设置li标签的background图像 并设置padding-left让出图像位置
    例子:li{
    background:url(icon1.jpg) norepeat;
    padding-left:25px;
    }
     
    简单的导航菜单
    竖直排列菜单
    <div id="navigation"> //结构
    <ul>
    <li><a href="#">home</a></li> 
    <li><a href="#">contact us</a></li> 
    <li><a href="#">web dev</a></li> 
    <li><a href="#">map</a></li> 
    </ul>
     
    </div>
     
     
    #navigation{
    150px;
    font-family:arial;
    font-size:14px;
    text-align:right;
    }
    #navigation ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
    }
     
    #navigation li{
    border-bottom:1px solid #9f9fed;
    }
    #navigation li a {
    display:block;
    height:1em;
    padding:5 5 5 0.5em;
    text-decoration:none;
    border-left:12 solid #151571;
    border-right:1px solid #151571;
    }
    6.链接与导航 - 骡子 - stupidmule@126 的博客
    再设置超链接样式
    #navigation li a:link,#navigation li a :visited{
    background-color#1136c1;
    color:#ffffff;
    }
    #navigation li a :hover{
     
    color:#ffff00;
    border-left:12px solid yellow;
    }
    6.链接与导航 - 骡子 - stupidmule@126 的博客
     

       6.链接与导航 - 骡子 - stupidmule@126 的博客

    150px从#navigation移动到#navigation li a中,即div没有宽度限制了,同时保证每个列表项的宽度都是150px
    在#navigation li的样式中增加一条float:left确保各个列表项依次排列。
  • 相关阅读:
    Android获取View对应的Bitmap
    Android按需添加Google Play服务
    Android自定义View的构造函数
    两个Fragment之间如何传递数据
    SmartImageView
    onSingleTapUp()和onSingleTapConfirmed()的区别
    Android Fragment add/replace以及backstack
    InputStream与InputStreamReader的区别
    Android手动签名
    使用后台服务数据更新UI
  • 原文地址:https://www.cnblogs.com/dongguolei/p/7902934.html
Copyright © 2011-2022 走看看