HTML5基础(八)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <!--margin 外边距 padding 内边距 border 边框-->
        <style>
            * {
                margin: 0px;
            }
            
            .header {
                padding: 10px;
                /*border: 1px solid black;*/
                /*border-top: 10px solid black;
                border-left: 10px dashed beige;
                border-right: 10px dotted royalblue;
                border-bottom: 10px double #989898;*/
                width: 990px;
                color: #989898;
                font-size: 25px;
            }
            
            .header img {
                vertical-align: middle;
            }
            
            .header a {
                color: #989898;
                text-decoration: none;
                font-family: "agency fb";
            }
            .content{
                min-width: 990px;/*最小宽度*/
                height: 575px;
                background-color: #e93955;
                
            }
            .container {
                /*width: 990px;
                margin: auto;*/
                height: 479px;
                
                background-image: url(img3/banner.png);
                background-repeat: no-repeat;
                background-position: center;
            }
            
            .container .login{
                margin-right: 20px;
                margin-top: 20px;
                float: right;
                width: 320px;
                height: 265px;
                background-color: white;
            }
            .container .login .opt{
                margin-top: 30px;
                margin-left: 25px;
                height: 100px;
                width: 275px;
                align-self: center;
                /*background-color: gray;*/
            }
            .itxt{/*登录注册框*/
                /*position:relative;*/  
                margin-top: 10;
                margin-bottom: 20px;
                padding: 0;
                width: 200px;
                height: 30px;
            }
            .itxt2{/*登录注册按钮*/
                /*position:relative;*/  
                margin-top: 20px;
                margin-left: 5px;
                padding: 0;
                width: 120px;
                height: 40px;
                background-color: #E93955;
                color: #FFFFFF;
            }
            
            .footer {
                width: 990px;
                display: inline;
            }
            /*交集选择器*/
            
            .header#head1 {}
            /*并集选择器*/
            /*后代选择器 子只管子,后代管孙子*/
            
            .footer p {
                color: gray;
                text-align: center;
            }
            /*子选择器*/
            
            .footer>p {
                color: gray;
            }
            
            .footer ul {
                list-style: none;
                text-align: center;
                color: gray;
            }
            
            .footer ul li {
                display: inline;
                text-align: center;
                padding-left: 10px;
                padding-right: 10px;
            }
        </style>
    </head>

    <body>
        <div class="header" id="head1">
            ![](img3/logo.png) <a href="Test3.html">欢迎登陆</a>
        </div>
        <div class="content">
            <div class="container">
                <div class="login">
                    <form action="Test5.html" method="post">
                        <div class="opt">
                        <h2>账号 <input  class="itxt" type="text" name="loginname" placeholder="邮箱/用户名/已验证手机"></h2> 
                        <h2>密码 <input class="itxt" type="text" name="loginname" placeholder="请输入密码"></h2>
                        </div>
                        <div class="opt">
                            <input class="itxt2" type="submit" value="登录" />
                            <input class="itxt2" type="reset" value="重置"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="footer">
            <ul>
                <li>友情链接</li>|
                <li>联系我们</li>|
                <li>发送邮件</li>|
                <li>转入论坛</li>|
            </ul>
            <p>Copyright ©版权所有 2017-09-08 京东JD.com 版权所有</p>
        </div>
    </body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容