百度搜索页--不用浮动定位版

系统管理员 2023-06-05 08:08 3阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>莆田度首页</title>
        <style>
        * {
        margin: 0;padding: 0;}
        .wrap {
        
            height: 570px;
            line-height: 1.5;
            text-align: center;
            /* font-size: 0; */
        }
        ul {
        
            list-style: none;
            /* clear list-style */
        }
        ul li {
        
            display: inline-block;
            /* make li stay inline */
        }
    
        .app img {
        
            width: 120px;height: 140px;
        }
    
        .nav {
        
            margin-left: 700px;
        }
        .nav a {
        
            color: black;
            font-size: 16px;
            padding: 5px;
            text-decoration-color: black;
            text-decoration-style: solid;
        }
        .nav a:hover {
        
            color: blue;
        }
        .nav input {
        
            color: white;
            background-color: rgb(55, 121, 245);
            padding: 5px;
        }
        .main .logo {
        
            width: 270px;height: 130px;
            margin: 0 auto;
            padding-bottom: 20px;
        }
        .main .search {
        
            width: 500px;height: 40px;
        }
        .main .click {
        
            height: 40px;width: 100px;
            padding: 9px;
            background-color: rgb(55, 121, 245);
            margin-left: 2px;
            color: white;
        }
    
        .app {
        
            margin-top: 50px;
            margin-bottom: 30px;
        }
        .app span {
        
            font-size: 14px;
            color: gray;
        }
    
        .footer1 li a, .footer2 li, .footer2 li a{
        
            padding: 0 5px;
            color: gray;
            font-size: 14px;
            text-decoration-color: gray;
            text-decoration-style: solid;
        }
    
        </style>
    </head>
    <body>
        <div class="wrap">
            <ul class="nav">
                <li><a href="">news</a></li>
                <li><a href="">hao123</a></li>
                <li><a href="">map</a></li>
                <li><a href="">video</a></li>
                <li><a href="">tieba</a></li>
                <li><a href="">academic</a></li>
                <li><a href="">logn in</a></li>
                <li><a href="">setting</a></li>
                <li><input type="button" value="more products"></li>
    
    
            </ul>
            <div class="main">
                <img class="logo" src="logo.jpg">
                <br>
                <input class="search" type="search">
                <input class="click" type="button" value="search now">
            </div>
            
            <div class="app">
                <img src="1.jpg">
                <br>
                <span>downlown baidu app</span>
                <br>
                <span>what's your problem?</span>
            </div>
            <ul class="footer1">
                <li><a href="">set as home page</a></li>
                <li><a href="">about baidu</a></li>
                <li><a href="">about baidu</a></li>
                <li><a href="">baidu SEO</a></li>
    
            </ul>
            <ul class="footer2">
                <li>©2019 baidu</li>
                <li><a href="">readme</a></li>
                <li><a href="">advice</a></li>
                <li>京ICP证030173号 </li>
                <li><a href="">京公网安备11000002000001号 </a></li>
            </ul>
        </div>
    </body>
    </html>

![1645790-20190703203305762-1762347799.jpg][]

转载于:https://www.cnblogs.com/sandraryan/p/11128880.html

[1645790-20190703203305762-1762347799.jpg]: /images/20230601/283cce7ce8a44b11a3fbbb9e15f2616c.png