ASP.NET简易教程-页面布局

页面布局

网上有太多介绍,个人觉得不错的有《Div+CSS布局大全》,有PDF版本,可下载离线观看,别人总结的一个文档,简洁易懂,学起来不费劲,花时间不多,快速阅读完,即可上手,呵呵。

这里就不介绍语法,讲述一下一些布局的实现。

布局最常用的是div和table,个人比较喜欢div,灵活性高。

Div水平居中

核心语句:margin:0px auto;

<div style=" margin:0px auto; width:100px; height:100px; background:#FF0000;">

 

Div水平排列

核心语句:float:left

    <div style="float:left; width:20%; height:100px; background:#FF0000;"></div>
    <div style="float:left; width:60%; height:200px; background:#000000;"></div>
    <div style="float:left; width:20%; height:100px; background:#FF0000;"></div>

三列

Div三行(满屏)

    <div style=" margin:0px auto; height:50px; background:#FF0000;"></div>
    <div style=" margin:0px auto; height:300px; background:#000000;"></div>
    <div style=" margin:0px auto; height:50px; background:#FF0000;"></div>

 

Div三行(居中)

并排div自动增高(中部两列)

核心语句:底部div设置clear:both

复制代码

    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div>
    <div style=" margin:0px auto; width:400px;">
        <div style=" float:left; width:30%; height:100px; background:#000079;"></div>
        <div style=" float:right; width:70%; height:300px; background:#006000"></div>
    </div>
    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div>

复制代码

并排div自动增高(中部三列)

复制代码

    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div>
    <div style=" margin:0px auto; width:400px;">
        <div style=" float:left; width:30%; height:100px; background:#000079;"></div>
        <div style=" float:left; width:50%; height:300px; background:#006000"></div>
        <div style=" float:right; width:20%; height:150px; background:#BB3D00"></div>
    </div>
    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div>

复制代码

Div固定到屏幕指定位置(广告位、头部导航固定,不随滚动条滑动变化)

核心语句:position:fixed; left:0px; top:50px;

复制代码

    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div>
    <div style=" margin:0px auto; width:400px;">
        <div style=" float:left; width:30%; height:100px; background:#000079;"></div>
        <div style=" float:left; width:50%; height:300px; background:#006000"></div>
        <div style=" float:right; width:20%; height:150px; background:#BB3D00"></div>
    </div>
    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div>
    <div style="width:50px; height:150px; background:#00FFFF; position:fixed; left:0px; top:50px;"></div>

复制代码

 

可自行变化成头部、底部固定布局。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值