zoukankan      html  css  js  c++  java
  • 练习html,css,js仿制百度首页

    1.练习目的

    练习使用html,scc,js
    完成界面样式,用ul标签实现文本框下拉,通过js完成添加列表内容等功能

    2.效果

    3.程序代码

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title>baidu</title>
        <style>
            div.list {
                position: absolute;
                margin: auto;
                 550px;
                height: 260px;
                top: 150px;
                left: 40px;
            }
    
            ul {
                margin: 0;
                padding: 0;
            }
    
            ul li {
                 543px;
                cursor: pointer;
                position: relative;
                padding: 2px 0 2px;
                background: #ffffff;
                color: rgb(71, 103, 150);
                font-size: 15px;
                transition: 0.2s;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                list-style-type: none;
            }
    
            ul li:hover {
                background: #ddd;
            }
    
            input.inputer {
                -web-kit-appearance: none;
                -moz-appearance: none;
                font-size: 1.4em;
                height: 36px;
                 540px;
                border: 1px solid #c8cccf;
                color: #6a6f77;
                position: absolute;
                margin: auto;
                top: 110px;
                left: 40px;
            }
    
            input[type=text]:focus {
                border: #317EF3 1px solid;
            }
    
            div.search-bar {
                 700px;
                height: 700px;
                position: absolute;
                margin: auto;
                top: 15%;
                left: 0;
                right: 0;
            }
    
            img.pic {
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
            }
    
            #button {
                color: #FFF;
                 100px;
                height: 40px;
                background: #317EF3;
                border: 0px;
                padding: 0px;
                position: absolute;
                margin: auto;
                top: 110px;
                left: 584px;
            }
    
            .ul1 li {
                display: inline;
                margin-right: 10px;
            }
    
            .topright {
                float: right
            }
    
            .bottom {
                height: 20px;
                 500px;
                position: absolute;
                margin: auto;
                left: 0;
                right: 0;
                bottom: 50px;
            }
        </style>
    </head>
    
    <body>
        <div class="topright">
            <ul class="ul1">
                <li>
                    <a href="www.baidu.com">糯米</a>
                </li>
                <li>
                    <a href="www.baidu.com">新闻</a>
                </li>
                <li>
                    <a href="www.baidu.com">hao123</a>
                </li>
                <li>
                    <a href="www.baidu.com">地图</a>
                </li>
                <li>
                    <a href="www.baidu.com">视频</a>
                </li>
                <li>
                    <a href="www.baidu.com">贴吧</a>
                </li>
                <li>
                    <a href="www.baidu.com">登录</a>
                </li>
                <li>
                    <a href="www.baidu.com">设置</a>
                </li>
                <li></li>
            </ul>
        </div>
        <div class="search-bar">
            <img src="baidu.jpg" alt="" class="pic">
            <input type="text" class="inputer" id="inputer" onfocus="display()" onblur="undisplay(this)">
            <button class="btn-search" id="button" onclick="newElement()">百度一下</button>
            <div class="list">
                <ul class="dropdown-list" id="dropdown-list">
                    <li>Coffee</li>
                    <li>Milk</li>
                </ul>
            </div>
        </div>
        <div class="bottom">
                &copy;2016 baidu<a href="http://www.baidu.com/duty/">使用百度前必读</a> 京ICP证030173号
        </div>
    </body>
    <script>
        var list = document.getElementById("dropdown-list");
        var input = document.getElementById("inputer");
        window.onload = function () { list.style.display = "none"; }
        input.addEventListener("click", display);
        function newElement() {
            var li = document.createElement("li");
            var inputValue = input.value;
            var t = document.createTextNode(inputValue);
            li.appendChild(t);
            if (inputValue != '') {
                list.appendChild(li);
            }
            input.value = "";
        }
        function display() {
            list.style.display = "";
        }
        function undisplay(x) {
            var y;
            var i;
            var obj_lis = list.getElementsByTagName("li");
            for (i = 0; i < obj_lis.length; i++) {
                obj_lis[i].onclick = function () {
                    x.value = this.innerHTML;
                }
            }
            setTimeout(function () { list.style.display = "none"; }, 200);
        }
    </script>
    
    </html>
    

    4.总结

    通过短期的学习,对html、css、js有了一些了解,但是发现要把众多的元素组合起来实现效果比想象的还要复杂,需要学习和积累。

  • 相关阅读:
    java中Object转String
    JSON以及Java转换JSON的方法(前后端常用处理方法)
    JS基础如何理解对象
    图解数据结构(7)——二叉查找树及平衡二叉查找树(一共14篇)
    C++虚函数表解析(图文并茂,非常清楚)( 任何妄图使用父类指针想调用子类中的未覆盖父类的成员函数的行为都会被编译器视为非法)good
    C++中代理类和句柄类
    C++的 RTTI 观念和用途(非常详细)
    川普就是领着一群工业革命时代的棺材瓤子,发动了一次资本主义复辟,面对互联网不过是一次新的砸机器运动
    基于.NET MVC的高性能IOC插件化架构
    雅虎35条
  • 原文地址:https://www.cnblogs.com/fanner7/p/9393575.html
Copyright © 2011-2022 走看看