利用HTML制作一个简单的界面（工具HBuilder）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
<!--标题，里面填写的内容将在浏览器顶部小框中显示-->
        <title></title>

    </head>
    <body>
<!--将网页分成三个部分，头部-->

            <header>
        <h1><a href="#"><img src="../img/163logo.gif" alt="logo"/></a></h1>
        <p>
            <a href="#">免费邮</a>
            <a href="#"> 企业邮</a>
            <a href="#">VIP邮箱</a>
            <a href="#">帮助</a>
        </p>
    </header>
<!--中部-->

    <section>
        <div>
            <img src="../img/imap.jpg" alt=""/>
            <ul>
                <li>163/126/yeah三大免费邮箱均默认开放</li>
                <li>全面支持iPhone/iPad及Android等系统</li>
                <li>客户端、手机与网页，实现发送、阅读邮件</li>
            </ul>
            <a href="#"><img src="../img/loginIcon.gif">普通登录 </a>
        </div>
        <form action="#" method="get">
            <p>
                用户名：
                <input type="text" name="userName"/>
                @163.com
            </p>
            <p>
                密码：
                <input type="password" name="psw"/>
            </p>
            <p>
                版本：
                <select name=""version id="">
                    <option value="">默认</option>
                    <option value="2018">2018</option>
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                    <option value="2015">2015</option>
                </select>
            </p>
            <p>
                <input type="checkbox" value="autoLogin"/>自动登录
                <input type="checkbox" value="ssl" checked/>SSL
            </p>
            <input type="submit" value="登录"/>
            <input type="submit" value="注册"/>
        </form>
    </section>
<!--尾部-->

    <footer>
        <img src="../img/netease_logo.gif" alt=""/>
        <a href="#">关于网易</a>
        <a href="#">免费邮 </a>
        <a href="#">官方博客</a>
        <a href="#">客户服务 </a>
        <a href="#">隐私政策</a>|
        <a href="#">网易公司版权所有  &copy; 2015-2018</a>
    </footer>
    </body>
</html>

上面是效果展示图，图片保存位置：右击当前web项目的img文件夹，打开文件所在目录（p）

将这四张图存入其中。为注释 <ul></ul>为无序列表。

利用HTML制作一个简单的界面（工具HBuilder）

猜你喜欢