CSS之滚动条和后台基本布局

今天药忘吃喽~ 2022-04-06 07:56 182阅读 0赞

### 1：滚动条的出现 ###

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title></title>
 		<style type="text/css">
 			.test{
 				width: 50%;
 				background-color: cadetblue;
 				
 				/*出现滑动块*/
 				position: absolute;
 				overflow: auto;
 				top: 100px;
 				bottom: 200px;
 			}
 		</style>
 	</head>
 	<body>
 		
 		<div class="test">
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 				测试
 		 
 		</div>
 	</body>
 </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70][]

### 2: 后台的基本布局 ###

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 body{
 margin:0 auto;
 background-color:#EEEEEE;
 }
 .header{
 height:60px;
 background-color:black;
 
 }
 .body .body-menu{
 position:absolute;
 top:60px;
 left:0;
 bottom:0;
 width:200px;
 background-color:#123456;
 }
 .body .body-content{
 background-color:#F5F5DC;
 
 /*出现滑块*/
 position:absolute;
 top:60px;
 bottom:0;
 overflow:auto;
 /*出现滑块end*/
 	
 /*内容从左230px到右填满,而不是根据子元素的width改变而改变*/
 left:230px;
 right:0;
 }
 </style>
 </head>
 <body>
 <div class="header"></div>
 <div class="body">
 <div class="body-menu">
 		
 </div>
 <div class="body-content">
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 				测试	测试	测试	测试
 </div>
 </div>
 </body>
 </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70]: /images/20220406/7626b8b0610b4f1ea700e929bd684fb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_16_color_FFFFFF_t_70 1]: /images/20220406/a7ee2be0af8145df9cce56f028451411.png