20201102王娟

unction change(){
document/文档/.getElementById("inp").style.borderTop="2px sooild #4e6ef2"
document/文档/.getElementById("inp").style.borderLeft="2px sooild #4e6ef2"
document/文档/.getElementById("inp").style.borderBottom="2px sooild #4e6ef2"
}
function recover(){
document/文档/.getElementById("inp").style.borderTop="2px sooild #c4c7ce"
document/文档/.getElementById("inp").style.borderLeft="2px sooild #c4c7ce"
document/文档/.getElementById("inp").style.borderBottom="2px sooild #c4c7ce"
}


<form>
                <div class="search">
                    <div id="inp" class="inp">
                        <!--绑定js(获取焦点)事件-->
                        <input onfocus="change()"  onblur="recover" type="text"/>       
                        <span title="按图片搜索"></span>
                    </div>
                    <div class="search-btn">
                        <input type="submit" value="百度一下"/>
                    </div>
                </div>
            </form>
下拉菜单:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .nav li{
                width: 120px;
                height: 40px;
                float: left;
                list-style: none;
                text-align: center;
                line-height: 40px;
            }
            .underList{
                display: none;/*隐藏元素*/
            }
            .nav li:hover .underList{
                display: block;/*显示元素*/
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li>首页
               <ul class="underList">
                  <li>棉衣秋裤</li>
                  <li>棉衣秋裤</li>
                  <li>棉衣秋裤</li>
               </ul>
            </li>
            <li>首页</li>
            <li>首页</li>
        </ul>
    </body>
</html>

心得总结:今天老师就网页问题给我们做了补充,除此之外老师让我们优化自己的页面。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1