百度页面 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        input{
            margin: 0;
            padding: 0;
        }
        #header{
            min-width: 800px;
            position: relative;
        }
        #nav{
            width: 600px;
            height: 30px;
            /*background: lightpink;*/
            /*float: left;*/
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 14px;
            display: flex;
            justify-content: space-around;
            line-height: 30px;
        }
        #nav>li{
            /*display: inline-block;*/
            /*list-style: none;去黑点*/
            
        }/*子代选择器*/
        #nav a{
            color: black;
            text-decoration: none;/*去下划线*/
        }
        #topRight{
            width: 140px;
            height: 30px;
            
            position: absolute;
            right: 10px;
            top: 5px;
            display: flex;
            justify-content: space-between;
        }
        #topRight>input{
            background: #fff;
            border: 0;
            font-size: 13px;
            height: 24px;
            cursor: pointer;

        }
        #topRight>#login{
            width: 48px;
            background: #38f;
            color: #fff;
            border-radius: 6px;
        }
        /*极值,权重
        行内样式1000,id100,class10,tag1*/
        /*div{
            width: 120px;
            height: 30px;
            
            float: right;
            position: absolute;
            right: 10px;
            top: 10px;

        }*/
        #center{
            width: 600px;
            height: 250px;
            margin: 150px auto 0;
            /*background: lightpink;*/

        }
        #imgBox{
            width: 220px;
            margin: 0 auto;
            /*background: lightblue;*/

        }
        #imgBox>img{
            width: 100%;
        }
        #iptBox{
            width: 100%;
            height: 30px;
            /*background: hotpink;*/
            border: 1px solid lightgrey;
            border-radius: 10px;
        }
        #iptBox>input[type='text']{
            width: 500px;
            height: 100%;
            float: left;
            border: 0;
            border-radius: 10px 0 0 10px;
        }/*属性选择器*/
        #iptBox>input[type='button']{
            width: 100px;
            height: 100%;
            float: left;
            border: 0;
            background: #38f;
            color: #fff;
            border-radius: 0px 10px 10px 0px;

        }
        #a{
            position: fixed;
            bottom: 0;
            width: 80%;
            left: 10%;
            display: flex;
            justify-content: space-between;
            min-width: 760px;
            list-style: none;
            /*height: 30px;
            /*background: lightpink;*/
            /*float: left;*/
            /*padding: 0px;
            list-style: none;
            font-size: 14px;
            display: flex;
            justify-content: space-around;
            line-height: 30px;
            margin-top: 270px ;
            margin-left: 400px;*/
            
        }
        #a a{
            color: lightgrey;
            text-decoration: none;/*去下划线*/
        }

    </style>
</head>
<body>
    <div id="header">
<ul id="nav">
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
</ul>
<div id="topRight">
    <input type="button" name=""value="设置">
    <input type="button"id="login" name=""value="登录">
</div>
</div>
<div id="center">
    <div id="imgBox">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
    </div>
    <div id="iptBox">
        <input type="text" name="" id="aaa">
        <input type="button" name=""value="百度一下">
    </div>
</div>
<ul id="a">
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a href="">新闻</a></li>
    <li><a>新闻</a></li>
    <li><a>新闻</a></li>
    <li><a href="">新闻</a></li>
</ul>
</body>
</html>

 

posted @ 2021-11-07 17:53  栗栗向前冲  阅读(133)  评论(0)    收藏  举报