为了账号安全,请及时绑定邮箱和手机立即绑定

如何用CSS进行网页布局

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.60
1991人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 一、清除默认样式body{margin:0;padding:0} 二、两列布局: 1、宽度自适应(用的比较少), 1.1因为宽度要自适应,所以要设置左侧left的width:xx%;1.2,需要左右排列,所以设置float:left;1.3另一侧right也设置width和float(left和right都可以吧,再微调) 2、固定宽度()left和right增加一个父div#main,设置这个main的width,以及margin 0 auto;2.1如果要精确控制left和right的宽度,可以使用px【就是说也可以使用%粗略控制。】 如下代码 (这就是自适应宽度的布局,拖动页面的窗口可以“缩小或放大”页面的内容 宽度自适应(用的比较少),1.1因为宽度要自适应,) <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更确切的控制它的宽度可以将(%)改为像素(px)的形式 [ 收起全文 ]
    查看全部
    0 采集 收起 来源:二列布局

    2018-03-22

  • font:12px/30px "arial","微软雅黑" 意思是:字体大小12px,行高30px,英文字体为arial,中文字体为微软雅黑
    查看全部
    0 采集 收起 来源:混合布局

    2018-03-22

  • 宽度设置的有问题?自己改了才显示的出来
    查看全部
    0 采集 收起 来源:编程练习

    2016-08-23

  • 文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.<br> 浮动(float)和 绝对定位(position:absolute)-->脱离文档流<br> 脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用position:absolute脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。 有三种情况使得元素脱离文档流: 1、浮动:float; 2、绝对定位:absolute; 3、固定定位:fixed;
    查看全部
    0 采集 收起 来源:评测题目

    2018-03-22

  • 1.一列布局不适于存放文本,太长容易看走眼 一列布局: 1.通常作为网页头部。固定宽度。 2.真正开发,高度设置自动的。 两列布局自适应,使用百分比。 三列布局,使用绝对定位和margin。 盒子之间的三种关系: 1、相邻 2、嵌套 3、叠加 我们要做的就是摆放好盒子的位置。 关于页面上元素的加载顺序: 元素是从前往后依次加载的,要想先加载就要写在前面。 通常left部分是作为菜单,right部分作为主体内容,我们打开网页,都希望先看到 主体内容,所以有意把right部分写在left部分前面,然后把right部分右浮动,left部分左浮动, 这样布局不会出现问题,而且还解决了IE6下右浮动换行的问题。 ------------------------------ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto;} .top{height:100px;background-color: blue;} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>
    查看全部
    0 采集 收起 来源:一列布局

    2018-03-22

  • 分栏又称为分列,常见的布局分为: 一列布局 两列布局 三列布局 混合布局(常用)
    查看全部
    0 采集 收起 来源:内容简介

    2016-08-23

  • 网页设计的特点: 1.网页的长度理论长可以无限制延长 2.网页可以自适应宽度
    查看全部
    0 采集 收起 来源:内容简介

    2016-08-23

  • 什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合。
    查看全部
    0 采集 收起 来源:内容简介

    2016-08-23

  • 混合布局
    查看全部
    0 采集 收起 来源:内容简介

    2016-08-23

  • 子元素用margin-top,如果父元素没有border,则父元素也会整体下移 margin大多数情况用于和兄弟元素之间的距离,父子元素用padding,如果父元素有高的话,加了padding记得要减高
    查看全部
    0 采集 收起 来源:混合布局

    2016-08-23

  • 在标准流中!!!!!!!!margin的塌陷现象: 竖直方向上,如果两个盒子,上面的盒子下margin是10px,下面盒子的上margin是50px 则margin以较大的为准 水平方向上,两个盒子之间的margin是两个盒子各自margin的和,有叠加现象 有浮动后,则没有margin塌陷现象!!margin是能叠加的!!
    查看全部
    0 采集 收起 来源:混合布局

    2016-08-23

  • ie6是不支持用ovh来清除浮动的: 解决方法:追加一条 _zoom:1;
    查看全部
    0 采集 收起 来源:混合布局

    2016-08-22

  • 解决ie6微型盒子完美写法: height:10px _font-size:0px
    查看全部
    0 采集 收起 来源:混合布局

    2016-08-22

  • .top{height:100px;background:#CCC;} .main{background-color:red;} .left{width:200px;height:600px;background-color:blue;position:absolute;top:100px;} .right{height:600px;margin-left:210px;background:green;} .foot{height:50px; background-color:#369;}
    查看全部
    0 采集 收起 来源:编程挑战

    2016-08-22

  • IE6/IE7不支持小于12PX的盒子
    查看全部
    0 采集 收起 来源:混合布局

    2016-08-22

举报

0/150
提交
取消
课程须知
1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验
老师告诉你能学到什么?
1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!