Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案

最新推荐文章于 2022-05-21 19:28:55 发布

软件测试李同学

最新推荐文章于 2022-05-21 19:28:55 发布

阅读量2.5k

点赞数 3

分类专栏： HTML CSS JavaScript 文章标签： html web前端开发百度仿百度首页 visual studio

本文链接：https://blog.csdn.net/qq_29720657/article/details/78753567

版权

HTML CSS JavaScript 专栏收录该内容

15 篇文章 11 订阅

订阅专栏

编程题：

1.仿照百度首页，自己动手还原出来（仿站是初学者最佳的实践方式，而百度首页往往是最适合初学者联系的第一个页面）。

我们来看看百度首页：

1)用VS2013新建ASP.NET空网站，添加新项，建立名称为baidu的HTML文件，向其加入以下代码：

<!DOCTYPE html>
<html >

<head>
    <meta  charset="utf-8" />
    <title>百度一下，你就知道</title>
    <link rel="stylesheet" type="text/css" href="css/baidu.css">
</head>

<body>
    <div class="top">
        <a href="http://news.baidu.com/"><span>新闻</span></a>
        <a href="http://www.hao123.com/"><span>hao123</span></a>
        <a href="http://map.baidu.com/"><span>地图</span></a>
        <a href="http://v.baidu.com/i"><span>视频</span></a>
        <a href="http://tieba.baidu.com/"><span>贴吧</span></a>
        <a href="http://xueshu.baidu.com/"><span>学术</span></a>
        <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>
        <a href="#" class="below">设置</a>
        <button class="more">更多产品</button>
        <div class="menu">
            <div class="inner">
                <span class="memo">搜索设置</span>
                <span class="memo">高级搜索</span>
                <span class="memo">关闭预测</span>
                <span class="memo">搜索历史</span>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="midden">
            <img src="img/baidu.png" alt="百度LOGO">
        </div>
        <div class="count">
            <input type="text" id="text" οnfοcus="style" />
            <input type="submit" class="button" value="百度一下" />
        </div>
    </div>
    <div class="footing">
        <div class="about">
            <a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
               
            <a href="http://home.baidu.com">关于百度</a>
               
            <a href="http://ir.baidu.com">About Baidu</a>
               
            <a href="http://e.baidu.com/?refer=888">百度推广</a>
        </div>
        <div class="info">
            <span class="copyright">&copy;2017 Baidu</span>
            <a href="http://www.baidu.com/duty/"class="copyright">使用百度必读</a>
            <a href="http://jianyi.baidu.com/" class="copyright">意见反馈</a>
            <span class="copyright">京ICP证030173号</span>
                
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" class="copyright">京网公安备11000002000001号</a>
            <img src="img/jinghui.png" class="gongan" alt="警徽" />
        </div>
    </div>
</body>

</html>

2)建立名称为baidu的css文件，向其加入以下代码：

body {
    margin: 0px;
    padding: 0px;
}

.top {
    margin-top: 20px;
    text-align: right;
}

    .top a {
        color: #333;
        font-size: 13px;
        margin-right: 10px;
    }

        .top a span {
            font-weight: bold;
        }

        .top a:hover {
            color: #0909F7;
        }

.menu {
    display: none;
    background-color: red;
    margin-left: 90.5%;
    margin-top: .5%;
    font-size: 15px;
    position: relative;
    float: right;
    left: -66px;
    top: -7px;
    width: 80px;
    height: 115px;
    background-image: url(img/memu.png);
}

.inner {
    position: relative;
    left: -15px;
    top: 15px;
}

.more {
    height: 30px;
    width: 75px;
    background-color: #3385FF;
    font-size: 12px;
    color: #FFF;
    border: solid;
}

.midden {
    margin-top: 7%;
    text-align: center;
}

    .midden img {
        width: 270px;
        height: 129px;
    }

.count {
    margin-top: 20px;
    text-align: center;
}

#text {
    width: 540px;
    height: 30px;
    font-size: 16px;
}

.button {
    height: 44px;
    width: 100px;
    background-color: #3385FF;
    font-size: 15px;
    color: #FFF;
    border: solid;
    margin-left: -10px;
    border-style: none\9;
    height: 36px\9;
}

.button:hover {
        cursor: pointer;
    }

.footing {
    text-align: center;
    margin-top: 24%;
}

.about a {
    color: silver;
    font-size: 12px;
}

.info {
    margin-top:6px;
}

.copyright {
    color:silver;
    font-size: 12px;
}

.gongan {
    width: 15px;
    height: 15px;
}

项目结构如下所示：

点F5，运行结果如下所示：

以上代码参考来源于互联网。

软件测试李同学

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案

编程题：1.仿照百度首页，自己动手还原出来（仿站是初学者最佳的实践方式，而百度首页往往是最适合初学者联系的第一个页面）。我们来看看百度首页：1)用VS2013新建ASP.NET空网站，添加新项，建立名称为baidu的HTML文件，向其加入以下代码：百度一下，你就知道新闻 hao12
复制链接

扫一扫