-
一列布局查看全部
-
margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）查看全部
-
这节课主要讲了网页的简单介绍； 网页的主要元素是文本和图片，网页设计的特点有两个（一个是网页可以自适应宽度、二是网页的长度理论上没有限制） 网页一般分为三部分：头部、内容、底部；再根据内容的多少给网页分栏（又称分列）：一列布局、二列布局、三列布局、混合布局等）查看全部
-
常见的布局方式查看全部
-
.left{width:200px;height:600px;background:#ccc;position:absolute;left:0;top:0;} .main{height:600px;background:#9CF;margin:0 310px 0 210px;} .right{height:600px;width:300px;background:#FCC;position:absolute;right:0;top:0;} /*position:absolute;使得其脱离标准文档流，因而使main参照body显示（margin:0 310px 0 210px;）*/查看全部
-
宽度不定义 就是一个通栏查看全部
-
清除默认样式 body{margin:0;padding:0;}查看全部
-
三列布局较为特殊的例子，左右固定列宽，中间自适应宽度，只能用position，不能用float<br/> .left{width:200px;height:500px;background-color:red;position:absolute;left:0} .middle{height:500px;background-color:silver;margin:0px 300px 0px 200px;} .right{width:300px;height:500px;background-color:blue;position:absolute;right:0;}查看全部
-
float:left; float:right;查看全部
-
有三种情况使得元素脱离文档流： 1、浮动：float; 2、绝对定位：absolute; 3、固定定位：fixed;查看全部
-
什么叫布局查看全部
-
自适应的三列分布布局，可以DIY 。查看全部
-
float:left;text-align:left;有关浮动样式的选择。查看全部
-
左右的宽度不一样 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{height:200px;magrin:0 auto;background: #ccc} .main{height:600px;magrin:0 auto;background: red;} .left{width:200px;height:600px;background: blue;position:absolute;top:200px;left:0;} .right{height:600px;background:green; position:absolute;top:200px;right:0;left :220px;} .foot{height:200px;magrin:0 auto;background:orange;} </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
提交
取消