画面设计

一，style1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--
            作者：offline
            时间：2016-02-22
            描述：引入JQuery
        -->
        <script type="text/javascript" src="../../js/jquery/jquery-2.1.0.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.min.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/npm.js" ></script>
        <!--
            作者：offline
            时间：2016-02-22
            描述:引入CSS
        -->
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap-theme.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.min.css" />
        <link rel="stylesheet" href="../../css/Buttons/buttons.css" />
        <!--
            自定义CSS样式(内联)
        -->
        <style type="text/css">
            .container{
                background-color: paleturquoise;
                width: 1000px;
                height: 50px;
                padding-top: 20px;
                padding-left: 20px;
                padding-right: 20px;
                border-top: 200px;
                margin-top: 100px;
                /*使div内容居中显示*/
                margin: 0 auto;
            }
            
            .main{
                background-color: blanchedalmond;
                width: 1000px;
                height: 800px;
                margin: 0 auto;
                margin-top: 50px;
            }
            
            .main1{
                background-color: thistle;
                width: 300px;
                height: 760px;
                margin-left: 20px;
                padding-bottom: 20px;
                margin-top: 20px;
                /*使用绝对定位可以解决位置不对的问题*/
                position: absolute;
            }
            
            .main2{
                background-color: thistle;
                width: 620px;
                height: 760px;
                margin-left: 340px;
                position: absolute;
                margin-top: 20px;
                margin-left: 360px;
            }
            
            .footer{
                background-color: #5E53E4;
                margin: 0 auto;
                width: 1000px;
                height: 150px;
                margin-top: 50px;
            }
        </style>
        <title>网页设计1</title>
    </head>
    <body>
        <div class="container">Part1</div>
        <div class="main">
            <div class="main1">Part2</div>
            <div class="main2">Part3</div>
        </div>
        <div class="footer">Part4</div>
    </body>
</html>

二， style2.heml

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--
            作者：offline
            时间：2016-02-22
            描述：引入JQuery
        -->
        <script type="text/javascript" src="../../js/jquery/jquery-2.1.0.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.min.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/npm.js" ></script>
        <!--
            作者：offline
            时间：2016-02-22
            描述:引入CSS
        -->
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap-theme.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.min.css" />
        <link rel="stylesheet" href="../../css/Buttons/buttons.css" />
        <!--
            自定义CSS样式(内联)
        -->
        <style type="text/css">
            /*.container,.main,.footer,.main1,.main2{
                width: 1200px;
            }*/
            
            /*设计导航栏*/
            .container{
                background-color:darkkhaki;
                height: 150px;
                width: 1240px;
                margin: 0 auto;
                margin-bottom: 50px;
            }
            
            /*.part2,.part3,.part4,.part5,.part6,.part7,.part8,.part11{
                height: 150px;
                background-color: burlywood;
                
            }*/
            .main{
                background-color: blank;
                margin-top: 50px;
                width: 1240px;
                height: 610px;
                margin: 0 auto;
            }
            .part2{
                width: 150px;
                height: 150px;
                background-color: green;
                margin-top: 20px;
                margin-left: 20px;
                position: absolute;
            }
            
            .part3{
                width: 150px;
                height: 150px;
                background-color: green;
                margin-top: 20px;
                margin-left: 230px;
                position: absolute;
            }
            
            .part4{
                width: 150px;
                height: 150px;
                background-color: green;
                margin-top: 20px;
                margin-left: 440px;
                position: absolute;
            }
            
            .part5{
                width: 150px;
                height: 150px;
                background-color: green;
                margin-top: 20px;
                margin-left: 650px;
                position: absolute;
            }
            
            .part6{
                width: 150px;
                height: 150px;
                background-color: green;
                margin-top: 20px;
                margin-left: 860px;
                position: absolute;
            }
            
            .part7{
                width: 150px;
                height: 150px;
                background-color: green;
                margin-top: 20px;
                margin-left: 1070px;
                position: absolute;
            }
            /*.main2{
                margin: 0 auto;
                width: 1240px;
                height: ;
            }*/
            .part8{
                width: 150px;
                height: 150px;
                background-color: black;
                margin-top: 230px;
                margin-left: 20px;
                position: absolute;
            }
            
            .part9{
                width: 570px;
                height: 360px;
                background-color: black;
                margin-top: 230px;
                margin-left: 230px;
                position: absolute;
            }
            
            .part10{
                width: 360px;
                height: 360px;
                background-color: black;
                margin-top: 230px;
                margin-left: 860px;
                position: absolute;
            }
            
            .part11{
                width: 150px;
                height: 150px;
                background-color: black;
                margin-top: 440px;
                margin-left: 20px;
                position: absolute;
            }
            
            .footer{
                background-color: gold;
                width: 1240px;
                height: 100px;
                margin: 0 auto;
                margin-top: 50px;
                
                /*float: left;*/
            }
            
            .mm{
                height: 2000px;
                width: 100%;
            }
        </style>
        <title>网页布局模板2</title>
    </head>
    <body>
        <div class="mm">
            <div class="container">
            <p>part1</p>
        </div>
        <div class="main">
            <div calss="main1">
                <div class="part2"></div>
                <div class="part3"></div>
                <div class="part4"></div>
                <div class="part5"></div>
                <div class="part6"></div>
                <div class="part7"></div>
            </div>
            <div class="main2">
                <div class="part8"></div>
                <div class="part9"></div>
                <div class="part10"></div>
                <div class="part11"></div>
            </div>
        </div>
        <div class="footer"><p>Part12</p></div>
        </div>
    </body>
</html>

三， style3.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <!--
            作者：offline
            时间：2016-02-22
            描述：引入JQuery
        -->
        <script type="text/javascript" src="../../js/jquery/jquery-2.1.0.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.min.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/npm.js" ></script>
        <!--
            作者：offline
            时间：2016-02-22
            描述:引入CSS
        -->
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap-theme.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.min.css" />
        <link rel="stylesheet" href="../../css/Buttons/buttons.css" />
        <!--
            自定义CSS样式(内联)
        -->
        <style type="text/css">
            body{
                height: 2700px;
            }
            .main1,.main2,.main3,.main4{
                width: 1200px;
                height: 500px;
            }
            .main1{
                background-color: bisque;
                margin: 0 auto;
            }
            
            .main2{
                background-color: gainsboro;
                margin: 0 auto;
                margin-top: 100px;                
            }
            
            .main3{
                background-color: grey;
                margin: 0 auto;
                margin-top: 100px;
                
            }
            
            .main4{
                background-color: lightblue;
                margin: 0 auto;
                margin-top: 100px;
            }
        </style>
        <title>网页布局第3</title>
    </head>
    <body>
        <div class="main1"></div>
        <div class="main2"></div>
        <div class="main3"></div>
        <div class="main4"></div>
    </body>
</html>

四， style4.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <!--
            作者：offline
            时间：2016-02-22
            描述：引入JQuery&BootStrap3.0
        -->
        <!--<script type="text/javascript" src="../../js/jquery/jquery-2.1.0.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.min.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/npm.js" ></script>-->
        <script type="text/javascript" src="../../js/BootStra2.0/bootstrap.js" ></script>
        <script type="text/javascript" src="../../js/BootStra2.0/bootstrap.min.js" ></script>
        <!--
            作者：offline
            时间：2016-02-22
            描述:引入CSS：BootStrap3.0
        -->
        <!--<link rel="stylesheet" href="../../css/BootStrap/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap-theme.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap/bootstrap.min.css" />
        <link rel="stylesheet" href="../../css/Buttons/buttons.css" />-->
        <link rel="stylesheet" href="../../css/BootStrap2.0/bootstrap-responsive.css" />
        <link rel="stylesheet" href="../../css/BootStrap2.0/bootstrap-responsive.min.css" />
        <link rel="stylesheet" href="../../css/BootStrap2.0/bootstrap.css" />
        <link rel="stylesheet" href="../../css/BootStrap2.0/bootstrap.min.css" />
        <!--
            自定义CSS样式(内联)
        -->
        <style type="text/css">
            .container{
                background-color: rgb(200,500,600);
                width: 1340px;
                height: 100px;
                margin: 0 auto;
            }
            
            .main{
                width: 1340px;
                height: 1440px;
                margin: 0 auto;
                margin-top: 50px;
                background-color: papayawhip;
                padding-top: 20px;
            }
            
            .footer{
                background-color: lightgray;
                width: 1340px;
                height: 200px;
                margin: 0 auto;
                margin-top: 100px;
            }
            
            .part1,.part2,.part3{
                background-color: azure;
                width: 1300px;
                height: 440px;
                margin: 0 auto;
                margin-top: 20px;
                margin-left: 20px;
                margin-right: 20px;
            }
            
            
            /*.login1,.login2,.login3,.login4,.login5,.login6{
                width: 600px;
                height: 400px;
                margin: 0 auto;
                background-color: goldenrod;
            }*/
            
            .login1{
                background-color: palegreen;
                width: 600px;
                height: 400px;
                margin: 0 auto;
                position: absolute;
                margin-top:20px ;
                margin-left: 20px;
                
            }
            
            .login2{
                background-color: palegreen;
                width: 600px;
                height: 400px;
                margin: 0 auto;
                position: absolute;
                margin-top:20px ;
                margin-left: 680px;
                
            }
            
            .login3{
                background-color: palegreen;
                width: 600px;
                height: 400px;
                margin: 0 auto;
                position: absolute;
                margin-top:20px ;
                margin-left: 20px;
                
            }
            
            .login4{
                background-color: palegreen;
                width: 600px;
                height: 400px;
                margin: 0 auto;
                position: absolute;
                margin-top:20px ;
                margin-left: 680px;
                
            }
            
            .login5{
                background-color: palegreen;
                width: 600px;
                height: 400px;
                margin: 0 auto;
                position: absolute;
                margin-top:20px ;
                margin-left: 20px;
                
            }
            
            .login6{
                background-color: palegreen;
                width: 600px;
                height: 400px;
                margin: 0 auto;
                position: absolute;
                margin-top:20px ;
                margin-left: 680px;
                
            }
            
            .form1{
                margin-top: 50px;
                margin-bottom: 50px;
                margin-left: 100px;
                margin-right: 100px;
            }
            
            /*#username1{
                margin-left: 200px;
                
            }
            
            #u1{
                margin-left: 0px;
            }
            */
            .u1,.UserName{
                float: left;
            }
            .u1{
                margin-left: 50px;
                margin-top: 150px;
            }
            .UserName{
                margin-left: 150px;
            }
        </style>
        <title>表单登录设计</title>
    </head>
    <body>
        <div class="container"></div>
        
        <div class="main">
            <div class="part1">
                <div class="login1">
                    <form action="LoginSuccesspage/LoginSuccessPage.html" class="form1">
                        <div>
                            <div class="Uname1">
                                <label class="u1" for="userName">UserName： </label>
                                <div class="UserName">
                                    <input type="text" id="userName" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="login2"></div>
            </div>
            <div class="part2">
                <div class="login3"></div>
                <div class="login4"></div>
            </div>
            <div class="part3">
                <div class="login5"></div>
                <div class="login6"></div>
            </div>
        </div>
        
        <div class="footer"></div>
    </body>
</html>

发表于 2016-03-28 13:09 复制乔布斯阅读(183) 评论(0) 编辑收藏举报

Hello world

Hello World