DIV教程之CSS网页结构进门教程1：一列流动宽度
当然空口无凭，下面我们就让大家看一下Div+css在页面中达到的效果。[*]
[*]
本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
本系列教程为进门级教程，合适初学者进修，由最复杂的常识一点一点进阶。次要以实例为主，很少部分实际，如许更顺应初学者疾速把握。因自己也正在进修，不免有一些毛病或疏漏中央，看列位赐与斧正。本教程参考《CSS网站结构实录》一书，在此向作者暗示感激。
要想学好DIV+CSS，起首要有必定的HTML和CSS常识，假如这些你还不懂得，倡议你先往补习这一课，再来进修本教程。别的还要丢弃传统表格结构的头脑形式，至于为何，在你进修本教程中渐渐就会体味到。假如这些你都筹办好了，那末入手下手吧！
一列流动宽度
一列流动宽度是基本中的基本，以是这节作为进门的第一节。
我们给div利用了layout作为id称号，为了便于检察，利用了background-color:#E8F5FE;将div的背景致设置成浅蓝色，用border:2pxsolid#A9C9E2;将边框设置整天蓝色。背景致和边框的属性将会在今后的教程中解说。
因为是流动宽度结构，因而我们间接设置了宽度属性width:300px;与高度属性height:200px;最后的效果请点击“运转此代码”按钮检察。
<!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"><!--#layout{border:2pxsolid#A9C9E2;background-color:#E8F5FE;height:200px;width:300px;}--></style></head><body><divid="layout">一列流动宽度(AA25.CN)</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
上面解说一下详细的步骤，由于本系列为进门级教程，以是接纳dreaweaver可视化开辟，让您少往手工写代码（但最少能看懂每句的意义），同时教程中只管配图，做到简便易懂。假如您对CSS懂得较多，本步骤可略过。
1、翻开dreamweaver（以8.0为例），选择文件——新建
如图，注重选择好文档范例，倡议选择XHTML1.0Transitional范例，有关文档范例更多常识，请参考：选择符合的Doctype，办理CSS生效成绩
选择工具栏的“拔出div标签”工具，在对话框的ID框中写进id的称号#layout，然后在CSS面板中新建CSS款式，大概间接点击下边的新建css款式按钮，创立乐成后会主动拔出id称号，点击断定便可看到div标签已拔出到页面中了（假如刚拔出的div为未选中形态，在css面板中新建时则需手动输出ID名：#layout）。
注重：此处选择器内请输出你要界说的id称号
CSS款式设置以下：
注：红线框内的部分为本例中必要设置的部分。
怎样，一列流动宽度，就这么复杂！
我们应当活用HTML为我们提供的标签。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 学Dreamweaver技术的过程其实是一个增加信心的过程。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。
页:
[1]