页面布局之圣杯布局

最新推荐文章于 2024-03-15 15:04:34 发布

VIP文章 wenlong_date

最新推荐文章于 2024-03-15 15:04:34 发布

阅读量1.3k

点赞数 2

分类专栏： HTML技巧文章标签：圣杯布局

本文链接：https://blog.csdn.net/NtosKiking/article/details/51253863

版权

圣杯布局作为我们平时处理三列布局来说还是很有用的，一般情况下他要求的是中间宽度自适应，两边的宽度是固定的，这样能够在页面解析的时候能使中间的主要内容先解析。
首先写好布局和基本的样式如下
布局

<body>
    <div class="header">header</div>
    <div class="main">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

基本的样式

<style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .header,.footer{
            width: 100%;

最低0.47元/天解锁文章

wenlong_date

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
页面布局之圣杯布局

圣杯布局作为我们平时处理三列布局来说还是很有用的，一般情况下他要求的是中间宽度自适应，两边的宽度是固定的，这样能够在页面解析的时候能使中间的主要内容先解析。首先写好布局和基本的样式如下布局<body> <div class="header">header</div> <div class="main"> <div class="center">center
复制链接

扫一扫