再见西城 发表于 2015-1-16 10:39:01

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为我们提供的标签。

谁可相欹 发表于 2015-1-18 07:45:44

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

飘灵儿 发表于 2015-1-26 21:34:39

只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

分手快乐 发表于 2015-2-4 23:08:23

只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

深爱那片海 发表于 2015-2-10 23:15:09

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

再见西城 发表于 2015-3-1 17:55:45

学Dreamweaver技术的过程其实是一个增加信心的过程。

若天明 发表于 2015-3-10 22:40:32

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

小女巫 发表于 2015-3-24 12:09:23

每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
页: [1]
查看完整版本: DIV教程之CSS网页结构进门教程1:一列流动宽度