前端学习笔记2-CSS

最新推荐文章于 2024-01-22 21:50:59 发布

Lei Peng

最新推荐文章于 2024-01-22 21:50:59 发布

阅读量240

点赞数

常用属性
1丶position
2丶background
3丶text-align
4丶margin
5丶padding
6丶font-size
7丶z-index
8丶over-flow
9丶：hover
10丶opacity
11丶float （clear：both）
12丶line-height
13丶border
14丶color
15丶display
页面布局
主站--
 <div class="pd-header">
 <div style='width:980px;margin:0 auto;'>
 //内容自动居中
 </div>
 </div>
 <div class="pd-content"></div>
 <div class="pd-footer"></div>
后台管理布局--
 position:
 fixed
 relative
 absolute
<head>
<style>
 body{
 margin: 0;
 }
 .left{
 float: left;
 }
 .right{
 float: right;
 }
 .pg-header{
 height: 48px;
 background-color: aqua;
 color: aliceblue;
 }
 .pg-content .meau{
 position: fixed;
 top: 48px;
 left: 0;
 bottom: 0;
 width: 200px;
 background-color: crimson;
 }
 .pg-content .content{
 position: fixed;
 //position:absolute; //第一次定位
 top: 48px;
 left: 200px;
 right: 0;
 bottom: 0;
 background-color: aquamarine;
 overflow: auto;
 }
 </style>
</head>
<body>
 <div class="pg-header"></div>
 <div class="pg-content">
 <div class="meau left">
 caidan
 </div>
 <div class="content left">
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 neirongneirongneirongneirongneirong
 </div>
 </div>
 <div class="pg-footer"></div>
</body>