如何用CSS进行网页布局-imooc-【更新完毕】

头像
黄奋斗
    阅读 5 分钟
    1

    第一章 内容简介

    1-1 内容简介

    clipboard.png

    网页可以自适应宽度
    网页的长度理论上可以无限延长

    页面为：

    • 头部

    • 主体部分

    • 底部

    clipboard.png

    分栏又称为分列：

    • 一列布局

    • 二列布局

    • 三列布局

    • 混合布局（用的最多）

    布局通过浮动和定位来完成(实现ui界面效果）

    第2章 用HTML+CSS实现最简单的网页布局效果：一列布局

    2-1 一列布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
/*清楚默认样式，设置字体大小为30px*/
body{ margin:0; padding:0; font-size:30px} 
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; 【任务1】}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC;margin:0 auto;}
.footer{ height:50px; background:#9CF;margin:0 auto;}
</style>
</head>

<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

    第3章 自适应宽度及固定宽度的二列布局的实现

    3-1 二列布局

    float和position：absolute可以使元素脱离文档流。

    CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

    需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

    而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc;float:left; 【任务1】}}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC;float:right; 【任务2】}/*右浮动样式*/
</style>
</head>

<body>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>

    第4章 用position定位方法实现自适应效果的三列布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0px 310px 0px 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; top:0; right:0; background:#FCC;}
</style>
</head>

<body>
    
    <div class="left">left</div>
    <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
    <div class="right">right</div>
</body>
</html>

    第5章 用HTML+CSS实现复杂结构的混合布局

    5.1 混合布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;【任务1】}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;【任务2】}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;【任务3】}
.footer{ height:50px; background:#9F9; clear:both;【任务4】}
</style>
</head>

<body>
<div class="top">
    <div class="head">head</div>
</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
        <div class="r_sub_left">sub_left
        </div>
        <div class=" r_sub_right">sub_right
        </div>
    </div>
</div>
<div class="footer">footer</div>
</body>
</html>

    5.3 挑战编程

    clipboard.png

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%;height:100px;background:#ccc;}
.main{background:#f00;height:500px;}
.left{ width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;}
.right{background:#9C9;height:500px;margin-left:210px;}
.foot{width:100%;height:50px;background:#F63;clear:both;}
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>
</html>
    css
    黄奋斗
    163 声望19 粉丝
    « 上一篇
    HTML+CSS基础课程-imooc-【更新完毕】
    下一篇 »
    数据结构习题1：线性表

    引用和评论

    推荐阅读
    头像
    JavaScript数据结构描述

    黄奋斗阅读 1.9k

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 8阅读 1.6k评论 2

    头像
    纯CSS实现有趣emoji切换开关

    南城FE阅读 4k

    头像
    那些年我用过的SAP IDE

    注销阅读 3k

    头像
    SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版

    注销阅读 1.4k

    0 条评论
    得票最新