CSS基础学习07
全局布局
利用固定定位实现
一、
body {
margin: 0px;
height: 800px;
min-height: 600px;
overflow: hidden;
}
header,footer {
width: 100%;
position: fixed;
height: 50px;
background-color: lightslategray;
}
header {
top: 0px;
}
footer {
bottom: 0px;
}
.container {
width: 100%;
height: 100%;
background-color: lightgrey;
margin: 50px 0;
}
nav {
width: 100px;
height: 100%;
background-color: lightcoral;
float: left;
}
.content {
height: 1000px;
background-color: lightseagreen;
margin-left: 100px;
overflow: auto;
}
二、
body,{
height: 100%;
margin: 0;
overflow: hidden;
}
.head{
width: 100%;
height: 100px;
background-color: #00ffaa;
position: fixed;
top:0;
}
.content{
width: 100%;
/*padding-top: 100px;*/
/*padding-bottom: 100px;*/
margin: 100px 0;
}
.left{
width: 100px;
height:100%;
background-color: #1122FF;
position: fixed;
left: 0;
}
.center{
background-color: #ff0001;
margin-left: 100px;
position: fixed;
left: 0;
top: 100px;
bottom: 100px;
right: 0;
overflow: auto;
}
.center,.left{
min-width: 500px;
}
.foot{
width: 100%;
height: 100px;
background-color: #FF28E3;
position: fixed;
bottom: 0;
}
等高布局
利用单元格方式实现
.content{
width: 60%;
height: 200px;
border: solid 5px #FF28E3;
margin: 0 auto;
display: table;
table-layout: fixed ;
}
.right1,.left1{
display: table-cell;
}
.left1{
width: 100px;
background-color: #ff0001;
}
.right1{
width: 100%;
background-color: #1122FF;
}
利用外面局和内边距的相互抵消实现(伪等高)
.contenter{
width: 60%;
border: solid 5px #ff0001;
margin: 0 auto;
overflow: hidden;
}
.left2{
width: 100px;
background-color: #FF28E3;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right2{
background-color: #FFF803;
margin-left: 100px;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
等宽布局
利用定位实现
.center{
width: 860px;
height: 300px;
border: solid 5px #25FF22;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.d2{
width: 880px;
height: 300px;
position: absolute;
left: -20px;
}
.d1{
width: 200px;
height: 300px;
background-color: #25FFF3;
float: left;
margin-left: 20px;
}
利用浮动实现
.s1 {
}
.s2 {
width: 200px;
height: 300px;
background-color: #FF28E3;
float: left;
margin-right: 20px;
}
颜色
英文单词方式
注意:不同的浏览器解析的颜色有可能不同(有色差)
一、三原色方式
红绿蓝:又称RGB值
八进制表示
语法
color:rgb(0,0,0)
十六进制表示
语法
color:#00ffff
每两位表示一个颜色值,如果两位值相同可省略一位
color:#000
颜色透明度设置
RGBA(0,0,0,透明度)
范围:0-1
0表示完全透明
1表示完全不透明
代码方式
color:transparent
字体
字体大小
font-size
单位:number+像素值px
字体风格
font-family
font-family:宋体
注意事项
使用中文定义没有任何问题
使用英文定义时(如 times new roman)
必须在英文字体文本外加双引号
字体粗细
font-weight
范围100至900之间的正整数
字体样式
font-style
norml:正常字体,默认值
italic:斜体
oblique:倾斜字体