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

    <!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>&copy;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>
  • 相关阅读:
    Java的运算符
    Java的输入和输出
    ieda使用maven出现unable to find valid certification path to requested target问题解决
    linux设置mysql查询忽略表明大小写的配置
    idea插件GsonFormat的使用
    Charles抓包(iOS的http/https请求)
    (转)Java线上应用故障排查之一：高CPU占用
    基本功知识点
    MYSQL 什么时候用单列索引？什么使用用联合索引？(收集)
    Quartz定时器中的misfire指定解析
  • 原文地址：https://www.cnblogs.com/sandraryan/p/11128880.html
Copyright © 2020-2023  润新知