百度页面纯css

叽里呱啦_711

于 2022-10-24 22:05:13 发布

阅读量120

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/m0_46678809/article/details/127503037

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
            .qwe{
                position: relative;
            }
        input:focus {
            outline: none;
        }

        header {
            overflow: hidden;
        }

        ul li {
            list-style: none;
        }

        .news li {
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }

        .weather li {
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }

        .search_img {
            text-align: center;
            margin: 0 auto;
        }

        .main button {
            color:white ;
            width: 20%;
            border: none;
            text-align: center;
            background-color: rgb(70, 98, 217);
            height: 100%;
            text-align: center;
            border-radius: 20px;
        }

        .main {
            box-sizing: border-box;
            width: 814px;
            height: 55px;
            margin: 0 auto;
            border: 1px solid rgb(70, 98, 217);
            border-radius: 20px;

        }

        .main input {
            border-radius: 20px;
            border: none;
            width: 80%;
            font-size: 14px;
            height: 90%;
        }

        footer {
            text-align: center;
            margin: 0 auto;
            height: 30px;
            bottom: 10px;
            width: 882px;
            line-height: 30px;
        }

        footer li {
            margin-right: 10px;
            font-size: 12px;
            float: left;
        }

        .emt {
            height: 300px;
        }
    </style>
</head>

<body>
<div class="qwe">
    <header>
        <div class="news">
            <ul>
                <li><a>新闻</a></li>
                <li><a>hao123</a></li>
                <li><a>地图</a></li>
                <li><a>贴吧</a></li>
                <li><a>视频</a></li>
                <li><a>图片</a></li>
                <li><a>网盘</a></li>
                <li><a>更多</a></li>
            </ul>
        </div>
        <div class="weather">
            <ul>
                <li><a>长沙22!</a></li>
                <li><a> 设置</a></li>
                <li><a>叽里呱啦</a></li>
            </ul>
        </div>
    </header>
    <div class="search_img">
        <img
            src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/yunying/Turing2017PC/common/doodle-2/66.jpg">
    </div>
    <div class="main"><input><button>百度一下</button></div>
    <div class="emt"></div>
    <footer>
        <ul>
            <li><a href="">关于百度</a></li>
            <li><a href="">About Baidu</a></li>
            <li><a href="">使用百度前必读</a></li>
            <li><a href="">帮助中心</a></li>
            <li><a href="">企业推广</a></li>
            <li><a href="">京公网安备11000002000001号</a></li>
            <li><a href="">京ICP证030173号</a></li>
            <li><a href="">信息网络传播视听节目许可证 0110516</a></li>
        </ul>
    </footer>
</div>
</body>

</html>