画面设计

一，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>

时间： 2024-07-29 19:16:53

画面设计的相关文章

C#: 启动画面设计

Windows Form经常会在启动主界面的时候预先有启动画面,这也是因为用户体验的需要,用户知道已经启动application,而不是在load resource的时候等待.因此这里不能用单线程的思路,单单只是设计一个界面而已,而需要在splash画面的时候同时Load resource.那么这个技术有两个线程,一个是splash画面,二是load resource.搜了一些资料,下面进行一些总结: 1 using System; 2 using System.Collections.Gene

《结对-贪吃蛇-设计文档》

设计人员: 张晓亮.李国峰环境搭建: 本系统有Java语言编写.需要在本地搭建Java运行环境.1)下载JDK(官网下载1.7以上版本)2)下载eclipseIDE开发软件.本人是Mac系统所以不需要额外配置环境变量. 可行性分析设计: 本系统设计要求win.mac.liunx,等多平台运行,实现嵌入式移植系统.综合考虑后选择Java语言,而摒弃Python脚本语言与C++等编译性语言. java当代流行语言,主要实现网络编程,可用于开发各种系统. 本系统是一个简单的游戏系统,对于这样的一个系

扁平交互设计更加符合用户体验

当我们没有智能手机.ipad也没有电脑的时候也许不用考虑各种需求设计了,当然这是玩笑话,随着互联网的发展,交互设计的作用越来越重要,未来的日子必将围绕用户体验展开.为什么小c会这么自信的说呢?很简单,如果你认定客户就是上帝的话,那么用户体验的初衷就是服务好客户,最终得到收益.UI设计服务扁平化设计来势汹汹互联网并不是一成不变的,随着各种智能设备的多样化,交互设计也越来越受商人们重视,由于扁平化设计比其他设计更平易近人,更加容易处理的优势得到业内的热衷.同时移动互联网向着低配置.高效能的方向

概要设计、详细设计(二) 设计的内容

3.1 概要设计的主要内容不同的系统类型其概要设计的内容也不相同,通过概要设计准则我们可以根据实际情况确定概要设计的具体内容,但是一般来说,概要设计的内容可以包含系统构架.模块划分.系统接口.数据设计4个主要方面的内容. 1.系统构架系统构架包含系统使用的软硬件技术平台及相关技术列表.系统的物理架构.物理器件类型.数据库管理系统类型.服务器类型.子系统划分及部署方式.系统的软件架构.第三方软件平台列表等. 例: 硬件架构例: 软件架构:包括层次划分.子系统&模块划分例: 软件技术

TIA WinCC Professional入门经典(3) 创建画面与联合仿真

TIA WinCC Professional 入门经典>一共30篇,如果我们的文章您每篇都转发的话,会在结束时获赠完整视频,欢迎关注,欢迎转发! *************************************************************************************** *************************************************************************************** 本

综合支撑【恶灵附身 Psycho Break】的世界观的概念艺术

综合支撑[恶灵附身 Psycho Break]的世界观的概念艺术三上真司监督提出的,是对着重表现讲述内心恐怖的哪个世界观的创作和统一做了很大贡献的概念艺术. 这里以他经手的艺术为例,来看看稀少的恐怖艺术生成的背景. 关于艺术方面无所不能 [恶灵附身]是2014年10月发售的恐怖游戏,负责开发的是同类型游戏的巨匠三上真司氏带领的Tango Gameworks(后面简称 Tango).本作是追求可以说是80年代的恐怖黄金期的电影和游戏原点的精神恐怖的作品.从PS4首次作为本世代机的规格利

黑板报粉笔画绘画详细教程

1.粉笔画绘画技法 (1)直接画法直接画法是指在黑板上用粉笔直接描绘出画面的画法.此种画法是笔笔定位,环环相扣,不做重复,作画速度快,画面痛快淋漓,一气呵成,能充分发挥出粉笔线描.色点和色块塑造形象的特点.所绘制的画面层次较少,简练概括,笔触生动清晰,极具装饰性.运用直接画法,首先应对描绘物象的结构.比例.位置布局做到心中有数,其次要从整体到局部逐步进行完善,下笔时,要准确果断,依手腕弹性.力度大小和用笔角度来控制点.线.面的变化.使画面达到具有韵律的美感.直接画法运用点.线.面塑造画面形象,

ERP问题解决

1.Program stopped at 'cin_aint340.4gl', line number 1121.FORMS statement error number -1338.The function 'cl_exe_rep' has not been defined in any module in the program. 解决办法:1.做报表打印格式时,在azzi988里面添加报表元件参数时,必须要重新下载单据程序并且上传, 2.上传后第一次运行单据作业会出现全英

移动游戏的精品原则

去年全球网络游戏市场收入达1,011亿美元,中国占246亿美元(约1,789亿元人民币),同比增长25%,超越美国成为"全球游戏玩家之都".中国玩家的所有游戏支出中,高达93%流向中国公司开发的游戏.其细分领域中,类游戏因其玩家的粘度和消费行为比较稳定,较潮流带动的游戏类别具有更长的生命周期及更为稳定的盈利增长能力. 游戏需要坚持打造精品的原则,从画面设计.游戏配乐到产品开发,每一阶段皆由团队精雕细琢,力求为玩家带来最佳的游戏体验.在深度方面不断深挖经典产品的玩家满意度与付费率,专注创