DIV与CSS的结合使用_综合

<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" οnmοuseοver="this.style.backgroundcolor='red';" οnmοuseοut="this.style.backgroundcolor='blue';"><a οnclick="txt.value='长沙'">长沙</a><br><a οnclick="txt.value='南京'">南京</a><br><a οnclick="txt.value='北京'">北京</a><br></div><!--现在做两个按钮，一个控制层的显示，一个控制层的隐藏--><!--按钮一--><input class="place" type="button" value="显示" οnclick="dv.style.display='block';"><!--按钮二--><input class="place" type="button" value="隐藏" οnclick="dv.style.display='none';"><!--当点击北京时，北京会显示在文本框中--><input class="place" type="text" name="txt"></body>
</html>