【CSS】“盗版”百度首页

最新推荐文章于 2023-05-20 14:36:51 发布

爪可摘星辰

最新推荐文章于 2023-05-20 14:36:51 发布

阅读量521

点赞数 1

分类专栏：前端文章标签：前端 css3

本文链接：https://blog.csdn.net/lovely_dzh/article/details/79344364

版权

前端专栏收录该内容

2 篇文章 2 订阅

订阅专栏

代码展示（第一版）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #container{
            width:100%;
        }
        #topdiv{
            width: 100%;
            height: 37px;
            margin-top: 8px;
        }
        #toprightdiv{
            float: right;
        }
        ul{
            list-style: none;
        }
        #list1 li{
            float: right;
            padding: 15px 5px 5px 0px;
            margin-left: 20px;
            font-size: 14px;
            text-decoration: underline;
        }
        #list1 li button{
            height: 26px;
            width: 66px;
            background-color: #0A87FF;
            border: none;
            color: white;
            font-size: 14px;
            position: relative;
            bottom: 4px;
        }
        #middlediv{
            height: 475px;
        }
        #middlelogo{
            position: relative;
            left:50%;
            margin-left: -150px;

        }
        #middlelogo img{
            width: 300px;
        }
        #middleform{
            margin-top: 33px;
            position: relative;
            left: 50%;
            margin-left: -350px;
        }
        #middleform input{
            width: 595px;
            height: 40px;
            margin-right: -5px;
            position: relative;
            top: -4px;
        }
        #middleform img{
            height: 40px;
            position: relative;
            top: 12px;
            left: -45px;
        }
        #middleform button{
            border: none;
            width: 110px;
            height: 40px;
            margin-left: -35px;
            background-color: #0C84FF;
            color: white;
            font-size: 20px;
        }
        #bottomdiv{
            border: none 1px black;
            height: 270px;
            font-size: 13px;
            color: #9A9791;
        }
        #bottomdiv p{
            position: relative;
            left: 50%;
            margin-left: -8px;
            color: #666560;
            font: 14px;
            font-weight: 2px;
            margin-top: 5px;
        }
        #list2{
            margin-top: 20px;
            position: relative;
            left: 50%;
            margin-left: -192px;
        }
        #list2 li{
            float: left;
            padding: 5px;
            margin-left: 20px;
            text-decoration: underline;
        }
        #list3{
            clear: both;
            position: relative;
            left: 50%;
            margin-left: -300px;
        }
        #list3 li{

            float: left;
            padding: 5px;
            margin-left: 20px;

        }
    </style>
</head>
<body>
    <div id="container">
        <div id="topdiv">
            <div id="toprightdiv">
                <ul id="list1">
                    <li><button type="submit">更多产品</button></li>
                    <li>设置</li>
                    <li>登陆</li>
                    <li>学术</li>
                    <li>贴吧</li>
                    <li>视频</li>
                    <li>地图</li>
                    <li>hao123</li>
                    <li>新闻</li>
                </ul>
            </div>
        </div>
        <div id="middlediv">
            <div id="middlelogo">
                <img src="image/logo.png">
            </div>
            <div id="middleform">
                <input type="text">
                <img src="image/photo.png">
                <button>百度一下</button>
            </div>
        </div>
        <div id="bottomdiv">
            <div>
                <ul id="list2">
                    <li>把百度设为主页</li>
                    <li>关于百度</li>
                    <li>About  Baidu</li>
                    <li>百度推广</li>
                </ul>
            </div>
            <div>
                <ul id="list3">
                    <li>©2018 Baidu 使用百度前必读 意见反馈 京ICP证030173号</li>
                    <li>京公网安备11000002000001号</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>