-
1.任务top，foot宽度自适应：则不必设置其宽度，只需设置高度及背景色 2.父级(main)高度及背景色，相对定位position:relative， 设置左侧宽度，高度 ，背景色，再相对于父级绝对定位position：absolute 再固定位置left:0,top:0 右侧设置高度及背景，自适应则设置margin：上0 右0 下0 左侧宽+10px 3.右侧先加载，则右侧div写在左侧上面，写代码时先写右侧再写左侧 4.兼容IE6不能用浮动，而且当子元素要设定为absolute的时候，父元素main要设定position:relative才可以。查看全部
-
行内元素 span{ display:block; } 转换为块级元素，可以设置宽和高了查看全部
-
接上条 div{ display:inline; } 块级元素转换为行内元素，并列现实，不能设置宽和高了，上一条笔记有误查看全部
-
div{ display:inline; } 块级元素转换为行内元素，可设置宽和高了查看全部
-
一串数字或者一串字母是被当做一个整体的，所以浏览器默认不会破坏它的完整性所以不会换行，想换行的话需要增加这个属性word-wrap: break-word;就可以了查看全部
-
一列布局 一般用于放置 网站主页 发入简单内容 字可以大一点查看全部
-
布局又称板式布局 是网页UI设计师 将有限的视觉元素 进行有机的排列组合 网页又和传统的纸媒不同 他具有自适应 根据 网页的大小改变去适应 网页 无限大 网页可以无限扩大 ui设计师就是一个 将艺术和技术 融合的家伙查看全部
-
3列布局 左右两侧设定宽度，让中间的宽度自动自适应: 让左右两侧的布局设置为absolute，紧靠左右两边，中间的布局通过设定左右的margin值来调整位置，就可以实现中间的布局自适应了查看全部
-
color、text-开头的、line-开头的、font-开头的，这些属性都是可以继承的查看全部
-
zanle查看全部
-
...查看全部
-
浮动模块是跟随的 不会发生重叠的效果查看全部
-
浮动不能让三列布局分布在一行上，需要采用定位的方式查看全部
-
为left以及right设置position：absolute之后，main到了顶部，因为left与right已脱离标准流。main两边内容被left以及right挡住，表面上看，在main的margin处有内容也就是left，right，我们都知道margin是元素自身的属性，按理来说在其margin处是不应该有内容的，但是！不能被他的表面所迷惑，因为实际上left与right由于设置了position：absolute，所以他俩脱离了标准流。那么就可以设置margin的左右距离，这样从表面上看就是现在这样的了。查看全部
-
<!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{background:#ccc;height:100px;} .main{background:red;} .left{background:blue;position:absolute;left:0;top:100px;width:200px;height:500px;} .right{background:#9c9;margin:0 0 0 210px;height:500px;} .foot{background:#f63;height:50px;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>查看全部
举报
0/150
提交
取消