如何用CSS进行网页布局_学习笔记

首页免费课如何用CSS进行网页布局笔记

如何用CSS进行网页布局

最热最新

念碎红尘

div是块状元素，它会很霸道的占一行，从代码可以看出啊，整个的main内容块没有指定高度的，只有它的子内容块指定了高度，但是它的子内容块是浮动的，所以子内容块的高度不能影响成为main的高度，那么浏览器就默认了把footer的div显示在top的下一行，这个时候添加clear:both清除了上面模块的浮动特性，那么此时main的高度就是和子内容块的高度是一样的，因此浏览器就会把footer的div显示在main的下一行

查看全部

0 采集收起来源：实践题
2016-06-04
慕粉3275112

混合布局编程挑战: <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{background:gray;} .main{background:red;position:relative;} .left{background:blue;height:300px;width:200px;position:absolute;top:0;} .right{background:green;height:300px;margin-left:210px;} .foot{background:orange;} </style> <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>

查看全部

0 采集收起来源：编程挑战
2018-03-22
真子轩

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 左边和右边是绝对定位，相对浏览器一个left:0,一个right:0. 中间部分采取外边距,上下距离为零，距离左边是200px，右边是300px，如果想留下空隙，增加间隔就行，所以margin:0 310 0 210.上右下左

查看全部

0 采集收起来源：编程练习
2016-06-03
慕哥4415817

<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%;height:100px;background:grey;} .main{width:100%;height:500px;margin:0 auto;background:red;} .left{ width:200px;height:500px;position:absolute;background:blue;} .right{width:100%;height:500px;margin-left:210px;position:absolute;background:green;} .foot{width:100%;height:100px;background:#e34298;} </style>

查看全部

0 采集收起来源：编程挑战
2018-03-22
Dberglas

div是块状元素，它会很霸道的占一行，从代码可以看出啊，整个的main内容块没有指定高度的，只有它的子内容块指定了高度，但是它的子内容块是浮动的，所以子内容块的高度不能影响成为main的高度，那么浏览器就默认了把footer的div显示在top的下一行，这个时候添加clear:both清除了上面模块的浮动特性，那么此时main的高度就是和子内容块的高度是一样的，因此浏览器就会把footer的div显示在main的下一行；你可以尝试把clear:both语句清除，然后定义如下的样式 .main{height:600px;}；把main的高度加上，那么浏览器也会正确显示的（我也刚学的，表达不清楚，不知道你可不可以理解）

查看全部

0 采集收起来源：实践题
2016-06-03
maumel

.top{ height:100px; width:100%; background:grey; } .main{ height:800px; width:100%; background:red; } .left{ height:800px; width:200px; position:absolute; background:blue; } .right{ height:800px; width:100%; margin-left:210; position:absolute; background:green; } .foot{ height:50px; width:100%; background:yellow; }

查看全部

0 采集收起来源：编程挑战
2016-06-03
549029316

body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%;height:100px;background-color:#ccc;} .main{width:100%;margin:0 auto;background-color:red;} .left{ width:200px;height:500px;float:left;background-color:blue;} .right{width:76%;height:500px;float:right;background-color:green;} .foot{width:100%;clear:both;background-color:orange;} 没有红色的那竖栏..

查看全部

0 采集收起来源：编程挑战
2016-06-03
慕仙8268269

三列布局特殊案例：左右定宽，中间自适应用浮动实现不了要求，要使用定位的方法左侧绝对定位，left：0；top：0 右侧绝对定位，right：0；top：0

查看全部

0 采集收起来源：三列布局
2016-06-03
慕设计7041374

Q:要求右侧（right）先加载，左侧（left）后加载

查看全部

0 采集收起来源：编程挑战
2016-06-02
Aprilis

清除浮动两种方法：1. clear:both; 2. overflow:hidden.

查看全部

0 采集收起来源：实践题
2016-06-02
Aprilis 03:35

单列布局，水平居中 margin:0 auto

查看全部

0 采集收起来源：一列布局
2016-06-02
CMinC

清除浮动：clear：both

查看全部

0 采集收起来源：实践题
2016-06-02
慕设计7041374

上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。解决方法有两个：1.清除浮动， clear:both; 2.为main设置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }

查看全部

0 采集收起来源：实践题
2016-06-02
CMinC

最常用混合布局页面上的元素是块与块之间的关系，存在于三种状态：块挨着块、块嵌套着块和块叠压着块通过CSS将块的位置摆放正确，网页的布局就完美

查看全部

0 采集收起来源：混合布局
2016-06-02
huangliangjian

这节课主要讲了网页的简单介绍；网页的主要元素是文本和图片，网页设计的特点有两个（一个是网页可以自适应宽度、二是网页的长度理论上没有限制）网页一般分为三部分：头部、内容、底部；再根据内容的多少给网页分栏（又称分列）：一列布局、二列布局、三列布局、混合布局等）

查看全部

0 采集收起来源：内容简介
2016-06-02