HTML5和CSS3开发电子商务网站第九章习题_html第九章css高级搜索-优快云博客

本文链接：https://blog.youkuaiyun.com/wsbbdbjay/article/details/80841330

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ彩贝高级搜索</title>
    <style>
       div{
           border: 1px solid;
           width: 300px;
           margin:  0px auto;
           transition: height 4s ease-in-out;
       }
        h2{
            margin: 10px;
            padding: 10px;
            border-bottom: 5px solid red;
        }
        #i1{
            padding: 6px;
            font-size: 18px;
           margin: 15px;
            width: 270px;
            border:#A9A9A9 1px solid;
            color: #A9A9A9;
        }
        #i2{
            font-size: 18px;
            width: 100px;
            position: relative;
            left: 100px;
            border:#DDDDDD 2px solid;
            background:#CCCCCC ;
            border-right:#898989 2px solid;
            border-bottom: #898989 2px solid;
        }
        li{
            list-style: none;
            float: left;
            padding: 20px;
           width: 80px;
        }
        option{
            width: 40px;
        }
        ul li select{
            font-size: 16px;
        }
     li{
         opacity: 0;
         filter: alpha(opacity=0);
     }
        div:hover{
            height: 450px;
        }
        div:hover li{
            opacity: 1;
            filter: alpha(opacity=100);
        }
    </style>
</head>
<body>
<div>
    <h2>高级搜索</h2>
    <form method="post" action="">
     <input id="i1" type="search" placeholder="请输入关键字">
        <input id="i2" type="button" value="搜索">
        <ul>
            <li><select><option>唱歌</option></select></li>
            <li><select><option>性别</option></select></li>
            <li><select><option>风格</option></select></li>
            <l