zoukankan      html  css  js  c++  java
  • 百度搜索页--不用浮动定位版

    <!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>

  • 相关阅读:
    [JLOI2011]飞行路线 不同的算法,不同的悲伤
    洛谷 [USACO17OPEN]Bovine Genomics G奶牛基因组(金) ———— 1道骗人的二分+trie树(其实是差分算法)
    P3203 [HNOI2010]弹飞绵羊 —— 懒标记?分块?
    tarjan 题目汇总(含解析)
    P1262 间谍网络 (tarjan缩点 水过去)
    #1117. 编码 ( 字典树版 ) 题解分析
    一道并查集的(坑)题:关闭农场closing the farm
    四重解法---P1047 校门外的树
    一道搜索题【2013 noip提高组 DAY2 t3】华容道
    ●BZOJ 1499 [NOI2005]瑰丽华尔兹
  • 原文地址:https://www.cnblogs.com/sandraryan/p/11128880.html
Copyright © 2011-2022 走看看