2.    3.<">     2.    3.<" />
CSSdiv+css布局

CSSdiv+css布局

ID:40533085

大小:89.00 KB

页数:5页

时间:2019-08-04

CSSdiv+css布局_第1页
CSSdiv+css布局_第2页
CSSdiv+css布局_第3页
CSSdiv+css布局_第4页
CSSdiv+css布局_第5页
资源描述:

《CSSdiv+css布局》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、3.布局(图一)(图二)(图三)要实现如图的这种布局,可以用三个并列关系的div加上样式就可以实现代码结构:Html代码1.

    2.
    3.
  
这种代码结构非常灵活,可以仅仅通过样式达到多种布局效果 图一(demo3.1.zip)的css:Html代码1.

2、ext/css">  2.    body{margin:10px;padding:0;}  3.    div{background:#ccc;}     4.    #first{float:left;width:100px; height:150px}     5.    #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}    6.    #third{margin-left:110px;_margin-left:107px; height:310p

3、x}  7.  8./*_margin-left:107px;为了ie6多出的3像素而写的hack*/   body{margin:10px;padding:0;}div{background:#ccc;}#first{float:left;width:100px;height:150px}#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}#third{margin-left:110px;_marg

4、in-left:107px;height:310px}/*_margin-left:107px;为了ie6多出的3像素而写的hack*/图二(demo3.2.zip)的cssHtml代码1.  2.    body{margin:10px;padding:0;}  3.    div{background:#ccc;}     1.    #first{float:left;width:100px; height:300px}     2.    #second{float:right;

5、width:100px;height:300px}    3.    #third{margin:0 110px;_margin:0 107px; height:300px}  4.  5./*_margin:0 107px; 为了ie6多出的3像素而写的hack*/   body{margin:10px;padding:0;}div{background:#ccc;}#first{float:left;width:100px;height:300px}#second{float:righ

6、t;width:100px;height:300px}#third{margin:0110px;_margin:0107px;height:300px}/*_margin:0107px;为了ie6多出的3像素而写的hack*/图三(demo3.3.zip)的css和js,鼠标hover时当前模块放大比例Html代码1.  2.    body{margin:0;padding:0;}  3.    div{background:#ccc;position:absolute;}  4.  

7、  #first{width:100px; height:150px;top:10px;left:10px;}     5.    #second{width:100px;height:150px;top:170px;left:10px;}    6.    #third{height:310px;top:10px;left:120px;width:200px;}   7.  8.  9.    function zo

8、om(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)  

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。