zoukankan      html  css  js  c++  java
  • 层在页面中的定位

    层(div)的定位在Web开发中,有着很重要的位置。主要用到的Css属性有:

            position:absolute;
    		100px;
    		height:100px;
    		background:CornflowerBlue;
    		left:100%;
    		top:50%;
    		margin-left:-100px;
    		margin-top:-50px;
    

    下面是不同位置的参考实现方式:分为东、南、西、北、中、东南、东北、西南、西北。  

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>positioning</title>
    <style type="text/css">
    *
    {
    margin
    :0px;
    padding
    :0px;
    }
    .center
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    left
    :50%;
    top
    :50%;
    margin-left
    :-50px;
    margin-top
    :-50px;
    background
    :DeepSkyBlue;
    }
    .east
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    background
    :CornflowerBlue;
    left
    :100%;
    top
    :50%;
    margin-left
    :-100px;
    margin-top
    :-50px;
    }
    .west
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    background
    :Olive;
    left
    :0;
    top
    :50%;
    margin-left
    :0;
    margin-top
    :-50px;
    }
    .north
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    background
    :MediumPurple;
    left
    :50%;
    top
    :0;
    margin-left
    :-50px;
    margin-top
    :0;
    }
    .south
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    background
    :LightCoral;
    left
    :50%;
    top
    :100%;
    margin-left
    :-50px;
    margin-top
    :-100px;
    }
    .westNorth
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    background
    :Violet;
    }
    .westSouth
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    background
    :CadetBlue;
    top
    :100%;
    margin-top
    :-100px;
    }
    .eastNorth
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    background
    :Tomato;
    left
    :100%;
    margin-left
    :-100px;
    }
    .eastSouth
    {
    position
    :absolute;
    width
    :100px;
    height
    :100px;
    background
    :orange;
    left
    :100%;
    top
    :100%;
    margin-top
    :-100px;
    margin-left
    :-100px;
    }
    </style>
    </head>

    <body>
    <div class="center">center</div>
    <div class="east">east</div>
    <div class="west">west</div>
    <div class="north">north</div>
    <div class="south">south</div>
    <div class="westNorth">westNorth</div>
    <div class="westSouth">westSouth</div>
    <div class="eastNorth">eastNorth</div>
    <div class="eastSouth">eastSouth</div>
    </body>
    </html>

    效果如下:

      

  • 相关阅读:
    grunt in webstorm
    10+ Best Responsive HTML5 AngularJS Templates
    响应式布局
    responsive grid
    responsive layout
    js event bubble and capturing
    Understanding Service Types
    To add private variable to this Javascript literal object
    Centering HTML elements larger than their parents
    java5 新特性
  • 原文地址:https://www.cnblogs.com/zfc2201/p/2140508.html
Copyright © 2011-2022 走看看