DIV与CSS的结合使用

来源：互联网发布：中国经济数据发布时间编辑：程序博客网时间：2024/05/22 16:39
<html>  <head>    <!--什么是层：层在网页中是一种容器，用<span></span>和<div></div>表示-->    <!--层的作用：将网页上的内容进行分块，每一块放在一个层中-->    <title>层和css的结合使用</title>    <!--层很少单独使用，一般结合css样式使用-->    <style type="text/css">      /*以下是层比较常用的css样式属性，记住！*/      #spa{        position:absolute;/*绝对定位*/        left:500px;/*横坐标*/        top:100px;/*纵坐标*/        background-color:#a5a5a5;/*背景颜色*/        border:1px solid red;/*边框粗细，样式，颜色*/        height:200px;/*层的高度*/        width:200px;/*层的宽度*/        display:block;/*显示：block，隐藏：none*/      }    </style>    <!--溢出属性（overflow）：元素块的内容溢出元素块的容量，有三种处理方法，如下所示-->    <style type="text/css">      .test1{            border:1px solid blue;            height:80px;            width:120px;            overflow:scroll;/*设置滚动条*/          }        .test2{            border:1px solid blue;            height:80px;            width:120px;            overflow:hidden;/*隐藏溢出部分内容*/          }        .test3{            border:1px solid blue;            height:80px;            width:120px;            overflow:visible;/*所有内容可见，默认方式*/          }    </style>    <style type="text/css">      #dv{        position:absolute;/*绝对定位*/        top:400px;/*纵坐标*/        background-color:#a5a5a5;/*背景颜色*/        border:1px solid red;/*边框粗细，样式，颜色*/        height:200px;/*层的高度*/        width:200px;/*层的宽度*/      }      .place{        position:relative;/*相对定位*/        top:350px;/*纵坐标*/              }    </style>      </head>  <body>    <span id="spa">层的使用</span>    <p class="test1">当元素块里的内容超过元素块的容量的时候，通过滚动条来显示所有内容。</p>    <p class="test2">当元素块里的内容超过元素块的容量的时候，超过部分的内容将会不可见。</p>    <p class="test3">当元素块里的内容超过元素块的容量的时候，默认显示所有内容，边框不会变。</p>        <!--onclick事件-->    <div id="dv" onmouseover="this.style.backgroundcolor='red';" onmouseout="this.style.backgroundcolor='blue';">      <a onclick="txt.value='长沙'">长沙</a><br>          <a onclick="txt.value='南京'">南京</a><br>          <a onclick="txt.value='北京'">北京</a><br>              </div>    <!--现在做两个按钮，一个控制层的显示，一个控制层的隐藏-->    <!--按钮一-->    <input class="place" type="button" value="显示" onclick="dv.style.display='block';">    <!--按钮二-->    <input class="place" type="button" value="隐藏" onclick="dv.style.display='none';">    <!--当点击北京时，北京会显示在文本框中-->    <input class="place" type="text" name="txt">  </body></html>
0 0