1. 程式人生 > >練習html,scc,js仿制百度首頁

練習html,scc,js仿制百度首頁

inf bottom onclick relative web name borde user scrip

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;
            width: 550px;
            height: 260px;
            top: 150px;
            left: 40px;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        ul li {
            width: 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;
            width: 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 {
            width: 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;
            width: 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;
            width: 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"  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有了一些了解,但是發現要把眾多的元素組合起來實現效果比想象的還要復雜,需要學習和積累。

練習html,scc,js仿制百度首頁