master

分支 (1)

管理

管理

master

css_practice
/
css04.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>简单导航</title>
    <style type="text/css">
        body,ul,li{
            margin: 0px;
            padding: 0px;
        }

        ul,li{
            list-style: none;
        }
        .nav{
            height: 50px;
            background-color: #eeeeee;
            overflow: hidden;
        }
        .nav .left{
            margin-left: 30px;
            float: left;
        }

        .nav .left li{
            display: inline-block;
            width: 80px;
            height: 50px;
            text-align: center;
        }
        .nav .left li a{
            display: inline-block;
            height: 50px;
            font: 16px/50px 宋体;
            padding: 0px 10px;
            color: #888888;
            text-decoration: none;
            width: 60px;
        }
        .nav .left li a:hover{
            background-color: #bbbbbb;
            color: white;
        }
        .nav .right{
            float: right;
            position: relative;
            margin-right: 20px;
        }
        .nav .right form{
            width: 150px;
            height: 25px;
            margin: 10px 20px;
            background-color: aquamarine;
        }
        .nav .right form input{

            width: 120px;
            height: 25px;
            padding: 0px 30px 0px 10px;
        }
        .nav .right form a{
            position: absolute;
            top: 15px;
            right: 5px;
            font: 12px 宋体;
            color: #cccccc;
            text-decoration: none;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: transparent;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="left">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">分类</a></li>
                <li><a href="#">我的</a></li>
            </ul>
        </div>
        <div class="right">
            <form action="#" method="post">
                <input type="text" placeholder="搜索">
                <a href="#">提交</a>
            </form>

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