|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
首先你要知道,当你开始学习DIV+CSS的时候,你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话),然而这项技术更适合刚接触网页制作的人。
本站2010年9月新增《十天学会web尺度(div+css)》系列教程,接待进修!
在实践使用中,偶然候必要左栏流动宽度,右栏依据扫瞄器窗口巨细主动顺应,在CSS中完成如许的结构体例是复杂可行的,只需在设置左栏的宽度便可,如上例中摆布栏都接纳了百分比完成了宽度自顺应,而我们只必要将左栏宽度设定为流动值,右栏不设置任何宽度值,而且右栏不浮动,代码以下:#left{
background-color:#E8F5FE;
border:1pxsolid#A9C9E2;
float:left;
height:300px;
width:200px;
}
#right{
background-color:#F2FDDB;
border:1pxsolid#A5CF3D;
height:300px;
} 如许,左栏将出现100%的宽度,而右栏将依据扫瞄器窗口巨细自顺应。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>二列左列流动,右列宽度自顺应——AA25.CN</title><styletype="text/css"><!--#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;float:left;height:300px;width:200px;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;height:300px;}--></style></head><body><divid="left">左列——流动(AA25.CN)</div><divid="right">右列——宽度自顺应(AA25.CN)</div></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
二列右列宽度自顺应常常在网站在用到,不但是右列,也能够是左列,办法是一样的,只必要改动两个div的编写便可,而这类使用在今朝的很多blog都可以常常看到,如pjblog中的很多网友制造的模板就是这类结构的。
制造历程这里不再具体赘述,请参考上一教程:CSS网页结构进门教程5:二列宽度自顺应,只需将左列的宽度改成200px,右列的宽度和向左浮动往失落便可。如另有不分明中央您能够在批评中发问。
我们应当活用HTML为我们提供的标签。 |
|