web前端制作一个简易的小网页-主页搜索框

编程知识行业动态更新时间:2024-06-13 00:20:34

效果图：

附上原图

代码：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Index</title>

    <style>

        body{
            background: url("images/b.jpg");
        }
        .inline-div{
            display: inline-block;
        }
        ul{
            display: block;
            color: #EBEFF0;
        }
        li{
            display: inline-block;
            float: left;
            list-style: none;
            margin-left: 80px;
        }
        .nav-head{
            width: 98%;
            height: 100px;
            margin: 20px auto;
        }
        .logo{
            height: 98px;
            width: auto;
            float: left;
            text-align: center;
            vertical-align: middle;
            font-size: 16px;
            line-height: 100px;
            margin-left: 50px;
            color: #EBEFF0;
        }
        .nav-info{
            height: 98px;
            width: auto;
            float: right;
        }
        .user-info{
            height: 40px;
            width: 100%;
            float: right;
            text-align: right;
            font-size: 12px;
        }
        .user-info span{
            display: inline-block;
            color: #EBEFF0;
            border-right: 1px solid #EBEFF0;
            padding-right: 7px;
            padding-left: 7px;
        }
        .nav-list{
            height: 40px;
            width: 100%;
        }
        .search-parent{
            width: 60%;
            height: 200px;
            margin: 100px auto 0;
            text-align: center;
        }
        .search-text{
            width: auto;
            height: 80px;
            font-size: 50px;
            margin: 0 auto;
            color: #EAF2F8;
        }
        .font-bold{
            font-weight: bold;
        }
        .search-desc{
            color: #EBEDEE;
        }
        .search-info{
            margin-top: 10px;
            height: 30px;
            padding: 6px;
            background: #5E85AA;
            border-radius: 10px;
            border: 1px solid #AEAFB0;
        }
        .search-info input{
            display: inline-block;
            width: 80%;
            float: left;
            height: 87%;
            border-radius: 2px;
            border: none;
            margin-left: 5px;
        }
        .search-img{
            display: inline-block;
            line-height: 25px;
            width: 10%;
            height: 87%;
            color: #D7D9DB;
            border: 1px solid #D7D9DB;
            border-radius: 3px;
        }



    </style>

</head>

<body>

    <div class="nav-head">

        <div class="logo inline-div">
            Where-Cani.Live
        </div>

        <div class="nav-info inline-div">

            <div class="user-info">
                <span>CONTACTXX</span>
                <span>HELP?</span>
                <span>LOGIN</span>
            </div>

            <div class="nav-list">
                <ul>
                    <li>HOME</li>
                    <li>EXPLORE</li>
                    <li>ABOUT</li>
                    <li>BLOG</li>
                </ul>
            </div>

        </div>

    </div>

    <div class="search-parent">

        <div class="search-text">
            <span>DISCOVER A <span class="font-bold">NEW</span> LIFE</span>
        </div>

        <div class="search-desc">
            <span>Five minutes from now,discover where you could live</span>
        </div>

        <div class="search-info">
            <input placeholder="input your text"/>
            <div class="search-img">
                Next
            </div>
        </div>

    </div>

</body>

</html>

更多推荐

web前端制作一个简易的小网页-主页搜索框

本文发布于:2023-03-30 03:42:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/5b1283c16f4aaf2be01c9716a018ca63.html