html模拟实现百度首页页面效果

模拟实现百度首页页面效果

百度页面:
html模拟实现百度首页页面效果_第1张图片
实现效果:
html模拟实现百度首页页面效果_第2张图片
代码:
html文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div id="d1">
    <div  >
        <ul id="k">
            <li><a href="http://news.baidu.com/ " >新闻</a></li>
            <li><a href="https://www.hao123.com/" >hao123</a></li>
            <li><a href="http://map.baidu.com/">地图</a></li>
            <li><a href="http://v.baidu.com/" >视频</a></li>
            <li><a href="http://tieba.baidu.com/" >贴吧</a></li>
            <li><a href="http://xueshu.baidu.com/">学术</a></li>
            <li><a href="http://www.baidu.com/gaoji/preferences.html">设置</a></li>
            <li><a href="#">更多</a></li>
            <p style="color: red;float:right;font-family:微软雅黑;font-size: 18px ">高考加油</p>
        </ul>
    </div>
</div>
<div id="d2" >
    <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" id="a1">
        <img src="image/logo.jpg">
    </a><br />
    <form action="http://www.baidu.com/s">
        <div id="l">
            <input type="text" name="wd">
            <input type="submit" class="input_out" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" value="百度一下">
        </div>
    </form>
</div>
<div id="d3">
    <div align="center" class="p">
        <ul>
            <li><a href="https://www.baidu.com/cache/sethelp/index.html" >设为首页</a></li>
            <li><a href="https://home.baidu.com/" >关于百度</a></li>
            <li><a href="http://ir.baidu.com/" >About Baidu</a></li>
            <li><a href="https://isite.baidu.com/site/e.baidu.com/d38e8023-2131-4904-adf7-a8d1108f51ef?refer=888" >百度营销</a></li>
            <li><a href="https://www.baidu.com/duty/">使用百度前必读</a></li>
            <li><a href="https://help.baidu.com/newadd?prod_id=1&category=4" >意见反馈</a></li>
            <li><a href="https://help.baidu.com/">帮助中心</a></li>
            <p class="gg" style="font-size: 4px;color: gray">&copy;2020 Baidu&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;()-经营性-2017-0020&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" style="font-size: 4px;color: gray">京公网安备11000002000001号</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;京ICP证030173号
            </p>
        </ul>
    </div>
</div>
</body>
</html>

index.css2文件:

#d1{
    position: absolute;
    width: 2000px;
    height: 20px;
}
#d1 ul{
    list-style: none;
}
#d1 a{
    font-family: "微软雅黑";
    color: black;
    font-size: 18px;

}
#d1 li{
    float: left;
    margin-right: 35px;
    text-align: center;
}

#k li:hover>a{
    color:blue;
}
#d2{
    position:relative;
    text-align: center;
    top: 100px
}
#d2 input[type="text"]{
    width:600px;
    height:48px;
    margin-top: 41px;
    font-size: 20px;
    border-width: 2px;
    border-color: blue;
    border-top-left-radius: 10px;  /*圆角*/
    border-bottom-left-radius: 10px;  /*圆角*/
}


.input_out{
    height: 54px;
    width:100px;
    margin-top: 41px;
    background-color: blue;
    border-width: 0px;
    font-size: 20px;
    color: white;
    margin-left: -5px;
    border-top-right-radius: 10px;  /*圆角*/
    border-bottom-right-radius: 10px;  /*圆角*/
}
.input_move{
    height: 54px;
    width:100px;
    margin-top: 41px;
    background-color: mediumblue;
    border-width: 0px;
    font-size: 20px;
    color: white;
    margin-left: -5px;
    border-top-right-radius: 10px;  /*圆角*/
    border-bottom-right-radius: 10px;  /*圆角*/
}
#d2 input[type="submit"]:hover{
    cursor: pointer;
}
#d3{
    position: absolute;
    width: 2000px;
    height: 20px;
    margin-top: 730px;
}
#d3 ul{
    list-style: none;
}
#d3 a{
    font-family: "微软雅黑";
    color: gray;
    font-size: 15px;

}
#d3 li{
    float: left;
    margin-right: 35px;
    text-align: center;
}
#a1{
    margin-bottom:100px;
}
a{
    text-decoration:none;
}
.gg{
    float: right;
}
#t:active{
    border-color: mediumblue;
}

你可能感兴趣的:(html,html,css)