DIV与CSS的结合使用

最新推荐文章于 2022-05-16 00:41:46 发布

须佐能乎！

最新推荐文章于 2022-05-16 00:41:46 发布

阅读量842

点赞数

分类专栏： HTML CSS 文章标签： HTML css div onclick 溢出属性overflow

本文链接：https://blog.csdn.net/qq_34416191/article/details/51648473

版权

HTML 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

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

须佐能乎！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DIV与CSS的结合使用

和表示--> 层和css的结合使用 /*以下是层比较常用的css样式属性，记住！*/ #spa{ position:absolute;/*绝对定位*/ left:500px;/*横坐标*/ top:100px;/*纵坐标*/
复制链接

扫一扫