发布日期: 2021-05-10

文章字数: 773

阅读时长: 4 分

阅读次数:

学了一个多星期的html&css，给自己定了一项任务，还原百度首页。过程中遇到了很多没学到过的东西，自己在网上找了很多资料作参考，终于完成了任务的1%。本想继续做下去，但由于学业紧张，以及欠缺的知识太多，只好暂时放弃。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <style type="text/css">
        body{
            background:#ffffff;
        }
        #left >a{
            font-family: Arial;
            font-size: 12.5px;
            line-height: 0px;
            letter-spacing: 0.4px;
            cursor: pointer;
        }
        #left >a:link{
            color:#000000;
            text-decoration:none; 
        }
        #left >a:hover{
            color:#315efb;
        }
        #left {
           width:442px;
           height: 30px;
           display: flex;
           justify-content: space-between;
           position: absolute;
           top:31px;
           left:24px;
        }
        #right{
            width: 150px;
            height: 300px;
            position: absolute;
            top:20px;
            right:24px;
        }
        #setting{
            height: 30px;
            width: 80px;
            font-family: Arial;
            font-size: 12.5px;
            line-height: 23px;
            letter-spacing: 0.4px;
            position: absolute;
            left:17px;
            text-align: center;
            cursor: pointer;
        }
        #setting li{
            margin: 3px;
            cursor: pointer;
        }
        #setmenu {
            font-family: Arial;
            background: #ffffff;
            font-size: 12.5px;
            display: none;
            position: absolute;
            width: 70px;
            top:15px; 
            list-style: none;
            padding: 7px;
            border-radius: 10px;
            box-shadow:1px 1px 5px #d1d1d1;
            }
        #setting:hover #setmenu{
            display: block;
        }
        #regist{
            background:#3385ef;
            width: 48px;
            height: 23px;
            line-height: 23px;
            font-size: 12.5px;
            letter-spacing: 0.4px;
            color: white;
            border-radius:6px;
            position: absolute;
            right: 0px;
            text-align: center;
            cursor: pointer;
        }
        #regist: hover{
            background: #315EFB;

        }
        #mid{
            height: 600px;
            width: 800px;
            margin: 45px auto;
            text-align: center;
        }
        #pic img{
            height: 130px;
            width: 270px;
        }
        #main{
            margin-top: 15px;
        }
        #in{
            width: 520px;
            height:40px; 
            border-radius: 9px 0px 0px 9px;
            border: 1px solid #D3D5DA;
        }
        input[type=submit]{
            height: 45px;
            width: 100px;
            position: relative;
            right: 6px;
            border: 1px solid white;
            background: #3385ef;
            border-radius: 0px 9px 9px 0px;
        }
    </style>
</head>
<body>
    <!--左上-->
    <div id="left">
    <a href="http://news.baidu.com/" target="_blank">新闻</a>
    <a href="https://www.hao123.com/" target="_blank">hao123</a>
    <a href="https://map.baidu.com/" target="_blank">地图</a>
    <a href="https://live.baidu.com/" target="_blank">直播</a>
    <a href="https://haokan.baidu.com/" target="_blank">视频</a>
    <a href="http://tieba.baidu.com/" target="_blank">贴吧</a>
    <a href="https://xueshu.baidu.com/" target="_blank">学术</a>
    <a href="https://www.baidu.com/more/" target="_blank">更多</a>
    </div>
    <div id="right">
    <div id="setting">设置
        <ul id="setmenu">
            <li>搜索设置</li>
            <li>高级搜索</li>
            <li>关闭预测</li>
            <li>隐私设置</li>
            <li>关闭热榜</li>
        </ul>
    </div>
    <div id="regist">登录
    </div>
    </div>
    <div id="mid">
        <div id="pic">
            <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"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片下载失败" title="点击一下，了解更多"></a>
        </div>
        <form id="main">
            <input id="in" type="text" name="content">
            <input type="submit" value="百度一下" name="确认">
        </form>
    </div>
</body>
</html>