CSS 案例学习

1.样式 display:inline-block;可改变a标签，合其可定义宽高

2.a:hover表示鼠标经过

3.background:url(110.png) bottom 表示：给链接一个图片并底端对齐代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a{
    display: inline-block;
    width:67px;
    height:32px; 
    background: url("110.png");

}

a:hover{
    background: url(110.png) bottom;
}
</style>
    <title></title>
</head>
<body>
<a href="#"></a>

</body>
</html>

View Code

4.text-align:center 水平剧中

5.一行文字行高与父元素等高时文字垂直居中

6.text-decoration:none去掉下划线

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    a{
        display: inline-block;
        width: 120px;
        height: 58px;
        text-align: center;
        text-decoration: none;
        color: white;
        line-height: 50px;

    }

    a.one{
    background: url(images/bg1.png);
    }
    a.two{
    background: url(images/bg2.png);
    }

    a.three{
    background: url(images/bg3.png);
    }
    a.four{
    background: url(images/bg4.png);
    }

    a:hover{
        
    background: url(images/bg6.png)

    }
    
}
</style>
    <title></title>
</head>
<body>
<a href="#" class="one">五彩导行</a>
<a href="#" class="two">五彩导行</a>
<a href="#" class="three">五彩导行</a>
<a href="#" class="four">五彩导行</a>
</body>
</html>

View Code

效果：

7.padding 学习

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    .nav{

        height: 40px;
        background: #eee;
        border-top: 3px solid orange;
        border-bottom: 1px solid #aaa
    }
    .nav-con{
        width:1000px;
        height: 40px;
        margin: 0 auto;
        line-height: 40px;
    }
    a{
        
        display: inline-block;
        height: 40px;
        color:#aaa;
        font:12px/40px 微软雅黑;
        text-decoration: none;
        padding: 0 12px;
    }

    a:hover{
        background: #999;
    }
</style>
    <title></title>
</head>
<body>
<div class="nav">
    <div class="nav-con">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
    </div>
</div>
</body>
</html>

View Code

效果：

8.列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .news{
            width: 238px;
            height: 166px;
            border:1px solid #d9e0ee;
            border-top: 3px solid #ff8400;
            margin: 0 auto; 
        }

        .news-title{
            height: 35px;
            border-bottom: 1px solid #d9e000;
            line-height: 35px;
            padding-left: 12px;
        }
        ul{
            margin-top: 12px;
        }
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        li{
            padding-left: 12px;
            background: url("li_bg.jpg") no-repeat 
            9px 7px;
            font: 14px 微软雅黑;
        }
    </style>
</head>
<body>
    <div class="news">
        <div class="news-title">行业动态</div>
        <ul>
            <li>气质不错</li>
            <li>气质不错</li>
            <li>气质不错</li>
            <li>气质不错</li>
            <li>气质不错</li>
        </ul>

    </div>
</body>
</html>

View Code

效果:

9.浮动

作用：1.文字环绕图片

　　2.导航

3布局

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;

        }
        ul,li{
            list-style: none;
        }
        .nav{
            width: 800px;
            height: 40px;
            background: pink;
            margin: 20px auto;
        }

        .nav ul li{
            float: left;

        }

        .nav ul li a{
            display: inline-block;
            height: 40px;
            font: 14px/40px 微软雅黑;
            padding: 0 20px ;
            text-decoration: none;
        }

        .nav ul li a:hover{
            background: #aaa;
        }


    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#">百度</a></li>
        <li><a href="#">百度</a></li>
        <li><a href="#">百度</a></li>
    </ul>
</div>
</body>
</html>

View Code

效果：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;

        }

        .nav{
            height: 55px;
            background: url("img/head_bg.jpg");
            margin-top: 30px;
            border-top: 1px solid #666;
        }

        .nav .nav-con{
            width: 1000px;
            margin: 0 auto;
            height: 55px;
        }

        .nav-con ul li{
            float: left;
            background: url("img/li_bg.png") no-repeat right;
            height: 55px;
            padding:0 30px;
        }

        a{
            display:inline-block;
            height: 55px;
            font: 14px/55px 微软雅黑;
            text-decoration: none;
            color: gray;
        }

        a:hover{
            color: green;
        }



    </style>
</head>
<body>
<div class="nav">
    <div class="nav-con">
        <ul>
            <li><a href="#" >智能手机</a></li>
            <li><a href="#">平板电脑</a></li>
            <li><a href="#" >百度</a></li>
            <li><a href="#" >么么么哒</a></li>
        </ul>
    </div>
</div>

</body>
</html>

View Code

效果：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .header,.main,.footer{
            width: 500px;
        }

        .header,.footer{
            height: 100px;
            background: #000;
            margin: 10px 0;
        }

        .main{
            height: 300px;
            background: #eee;
        }
        .content{
            width: 300px;
            height: 300px;
            background: orange;
            float: left;
        }

        .sidebar{
            width: 190px;
            height:300px;
            background: green;
            float: right;
        }


    </style>
</head>
<body>

<div class="header"></div>
<div class="main">
    <div class="content"></div>
    <div class="sidebar"></div>

</div>
<div class="footer"></div>

</body>
</html>

View Code

效果：

10 .清除浮动

1).clear：both 浮动最后加一个标签样式加这个清除浮动

2).overflow:hidden 在父盒子里用当浮动出合子时不可使用

3).clearfix:after{content:"";display:block;height:0;line-height:0;visibility:hidden;clear:both} .clearfix{zoom:1;} 兼容IE 伪元素清除（常用）最后把这个样式给要清除的父元素