慕课网《如何用CSS进行网页布局》视频学习笔记

最新推荐文章于 2024-07-26 08:00:00 发布

liweiwei1419

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量1k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/lw_power/article/details/44535411

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

慕课网《如何用CSS进行网页布局》视频学习笔记
[toc]
授课老师：江老实。
Web前端工程师，资深前端攻城师，深受欢迎的前端领路人，多家大型网站的建造者，主攻前端技术开发、网页UI设计，影像技术达人，古典音乐发烧友，儒雅先生。

一、内容简介

网页可以自适应。
网页的长度理论上可以没有限制
常见的网页分为：头部、主体（主体可以再分栏）。
分栏又称为分列，常见的布局分为：一列布局、二列布局、三列布局。

二、一列布局

下面我们写一个固定宽度的一列布局。
div 水平居中的 css 样式设置：给 div 设置 margin:0 auto。
div 的宽度如果不定义，它就是一个通栏的 div。
示例代码：

<style>
    body{ margin:0; padding:0; font-size:30px}
    div{ 
        text-align:center; 
        font-weight:bold
    }
    .head, .main, .footer{ 
        width:960px; 
        margin:0 auto
    }
    .head{ 
        height:100px; 
        background:#ccc
    }
    .main{
        height:600px; 
        background:#FCC
    }
    .footer{ 
        height:50px; 
        background:#9CF
    }
</style>
</head>
<body>
    <div class="head">head</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>

liweiwei1419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
慕课网《如何用CSS进行网页布局》视频学习笔记

慕课网《如何用CSS进行网页布局》视频学习笔记 [toc] 授课老师：江老实。 Web前端工程师，资深前端攻城师，深受欢迎的前端领路人，多家大型网站的建造者，主攻前端技术开发、网页UI设计，影像技术达人，古典音乐发烧友，儒雅先生。一、内容简介网页可以自适应。网页的长度理论上可以没有限制常见的网页分为：头部、主体（主体可以再分栏）。分栏又称为分列，常见的布局分为：一列布局、二列布局
复制链接

扫一扫

专栏目录