全局布局

 

利用固定定位实现

一、

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:倾斜字体

打赏

发表评论

邮箱地址不会被公开。 必填项已用*标注