笔记之jsp美化（CSS排版）

JSP美化：

Css排版：

Div定位：

Div默认在上一个div的下面。

多个DIV在同一条线上,采用浮动效果:

Float，让div都向左浮动float:left

浮动效果会影响后续div效果。

如果想不影响后续DIV，可以定义个ID为clear的DIV，clear:both

margin设置div间距:

指定方向：

Margin-top,Margin-left,Margin-bottom,Margin-right设置上下左右不同方向的间距

如果不指定方向:

margin跟一个值，代表4个方向的间距相同。

margin:1px 2px 3px 4px;距离上右下左的距离。顺时针

Margin跟2个值，第一个值是上下距离，第二个是左右距离。

Margin跟3个值，第一个是上，中间是左右距离，第三个是下。

顶格显示：

Body{

margin:0px;//顶格显示，4个方向间距都是0

}

设置边框：

Border:3px solid red  //设置边框的宽度，样式，颜色

样式：

None,hidden...........

具体参考CSS文档

Border-top

Border-left

Border-right

Border-bottom 

设置上下左右边框

设置数据在边框中的定位：

Padding:4px

Padding-top,padding-left.......

其他属性：

Background-color:#fffff;

Wight:100%；

Height:100Px;

Border:4px solid red

相对定位：相对的是自己原来的位置,位置移动了，原来的位置依然自己占着

Position:relative;

Left:60%

绝对定位：

相对于浏览器边框定位:移动后，原来的位置会让出来

Position:obsolute;

Left:4PX;

特殊情况：

父类div使用相对定位，子类使用绝对定位，则子类是相对于父类定位，而不是浏览器边框

多个子类div 同时设置属性：

Display:inline;三个显示成一行

Display:none;该div 隐藏，可实现，点一下隐藏，再点一下展开效果

#son2:hover{//鼠标放上去，改变div背景颜色

Background-color:#30000f;

Cursor:hand;

}

浏览器大小：980*1002

PS案例，参考项目.

<style>

Body{//选定body标签

Margin:0px;

Overflow:hidden;//去除右边和下边的滚动条

Background-color:#01600A;

Font-size:12px;

}

#container{//设置ID为container的div属性

Wight=980px;

Margin:left=50%;//相对原位置50%距离

Position:relative;

Left:-490px;//居中：先往右相对移动50%，再相对现在的位置往左490像素就可

Border:1px solid red

Text-align:center;居中

}

#div1{

Background-image:url(images/login.gif);

Wight:853px;

Height:331px;

Margin-top:120px;

}

#div2{

Margin-top:160px;

}

</style>