HTML display:inline-block

 元素转换

  display:block;   行内转块

  Display:inline;   块转行内

  Display:inline-block;  块或行内转行内块

 

链接伪类

a:link{属性:值;}   链接默认状态   a{属性:值;}是一样的

a:visited{属性:值;} 链接访问之后的状态

a:hover{属性:值;}  鼠标放上去显示的状态

a:active{属性:值;}    链接激活的状态

:focus{属性:值;}       获取焦点

 

购物车案例：

 

 图片显示在网页中是购物车，鼠标点击时是登录：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        a{
            display: inline-block;
            width: 67px;
            height: 32px;
            background: url("110.png");
        }
        a:hover{
            background: url("110.png") bottom
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>
  •  浏览器默认文字大小

            浏览器默认文字大小：16px;

            行高：基线与基线之间的距离

           行高 = 文字高度 + 上下边距

 一行文字行高和父元素高度一致的时候，垂直居中显示。

posted @ 2018-02-28 15:30  kangjie  阅读(2933)  评论(0)  编辑  收藏  举报