zoukankan      html  css  js  c++  java
  • CSS格式与布局

    一、position:fixed   (针对主页面body进行定位,并且在下拉页面是处于原位置不动,通常为网站右下角弹窗。)

    <style sype=“text/css”>

    .a

    {

         100px;

         height:100px;

         backgroun-color:red;

         border:1px solid 黑;

         margin:10px;

         left:20%;

         position:fixed;

    </style>

    <body>

    <div class="a"></div>

    </body>


    二、position:absolute   在页面上是浮动的,进行的是绝对定位

    .a

    {

         100px;

         height:100px;

         backgroun-color:red;

         border:1px solid 黑;

         top:10px;

         left:20%;

         position:absolute;

    </style>

    <body>

    <div class="a"></div>

    </body>


    三、position:relative  实际在页面上占有一定位子,相对定位,所占用的剩下空间左上角定位,只是位置的平移,而所占有的位置不变


    四、分层

    所有编辑的成都可以看成一摞纸进行罗列,在Z轴上进行分成,因此我们需要太高所在层需要将

    z-index:2;进行设置


    五、float:left    从左向右进行分布

    overflow:hidden;  超出部分进行隐藏

    .a:hover

    overflow:visible     悬浮位子超出部分可见

    例    鼠标悬浮选择显示所隐藏内容

    <style>
    .a
    {
    80px;
    height:40px;
    background-color:#0CC;
    position:relative;
    float:left;
    margin-left:5px;
    overflow:hidden;}
    .a:hover
    {
    overflow:visible;}
    .b
    {
    80px;
    height:120px;
    position:relative;
    background-color:#C06;
    top:40px;
    }
    .c
    {
    400px;
    height:400px;
    border:#909 solid 1px;
    background-color:#0CC;
    top:300px;
    left:300px;
    text-align:center;
    position:absolute;}

    </style>
    </head>
    <body>
    <div class="a"><div class="b"></div></div>

    <div class="a"><div class="b"></div></div>
    <div class="a"><div class="b"></div></div>
    <div class="a"><div class="b"></div></div>
    <div class="c">

    </body>


    六、半透明效果

    .box

    {

        opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)}

    <div class="box"

  • 相关阅读:
    WinCE 编译固定IP到内核
    wince telnet登陆密码的取消
    lab 美国大学实验室
    PLC 开放性源代码的软件
    linux 嵌入式Linux下3G无线上网卡的驱动
    创业者/职业经理人/员工受用的36句感悟
    iShoot Developer Makes $600,000 In One Month
    如何彻底解决Vista狂读硬盘的问题
    宁做创业狼,不做打工狗
    跟我学EJBCA系列一:安装
  • 原文地址:https://www.cnblogs.com/tfl-511/p/5792817.html
Copyright © 2011-2022 走看看