Excellent course of Web front-end development HTML CSS JavaScript Basic Course Chapter 23 answers to programming questions after class

Programming questions:

1. Copy Baidu home page and restore it by yourself (imitation station is the best practice way for beginners, and Baidu home page is often the first page most suitable for beginners to contact).

Let's take a look at Baidu's home page:


1) Build with VS2013 ASP.NET Empty website, add a new item, create an HTML file named baidu, and add the following code to it:

<!DOCTYPE html>
<html >

<head>
    <meta  charset="utf-8" />
    <title>Baidu, you know</title>
    <link rel="stylesheet" type="text/css" href="css/baidu.css">
</head>

<body>
    <div class="top">
        <a href="http://news.baidu.com/ "> < span > News < / span ></a>
        <a href="http://www.hao123.com/"><span>hao123</span></a>
        <a href="http://map.baidu.com/ "> < span > map < / span ></a>
        <a href="http://V. baidu.com/i "> < span > Video < / span ></a>
        <a href="http://tieba.baidu.com/ "> < span > Post Bar</a>
        <a href="http://xueshu.baidu.com/ "> < span > academic < / span ></a>
        <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww . baidu.com%2F "> login</a>
        <a href="#"Class =" below "> Settings</a>
        <button class="more">More products</button>
        <div class="menu">
            <div class="inner">
                <span class="memo">Search settings</span>
                <span class="memo">Advanced search</span>
                <span class="memo">Close forecast</span>
                <span class="memo">Search history</span>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="midden">
            <img src="img/baidu.png" alt="Baidu LOGO">
        </div>
        <div class="count">
            <input type="text" id="text" onfocus="style" />
            <input type="submit" class="button" value="use Baidu Search" />
        </div>
    </div>
    <div class="footing">
        <div class="about">
            <a href="https://www.baidu.com/cache/sethelp/help.html "> set Baidu as home page</a>
               
            <a href="http://home.baidu.com "> about Baidu</a>
               
            <a href="http://ir.baidu.com">About Baidu</a>
               
            <a href="http://E. baidu.com/?refer=888 "> Baidu promotion</a>
        </div>
        <div class="info">
            <span class="copyright">&copy;2017 Baidu</span>
            <a href="http://www.baidu.com/duty/ "Class =" copyright "> must read when using Baidu</a>
            <a href="http://jianyi.baidu.com/ "Class =" copyright "> feedback</a>
            <span class="copyright">Beijing ICP Certificate No. 030173</span>
                
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001 "Class = copyright" > jingwanggong'an Bei no.110000020000001</a>
            <img src="img/jinghui.png" class="gongan" alt="police badge" />
        </div>
    </div>
</body>

</html>

2) Create a css file named baidu and add the following code to it:

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;
}


The project structure is as follows:


At F5, the operation results are as follows:


The above code reference is from the Internet.



Tags: Programming

Posted on Tue, 30 Jun 2020 12:51:08 -0400 by kanetan