仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 978|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS网页结构进门教程2:一列自顺应宽度

[复制链接]
柔情似水 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:39:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
最后你还得知道,你所用的工具,你可能认为Dreamweaver很好,没错,它的确不错,但你要认识到,当你熟练使用了这门技术,你就可以在任何文本编辑器中编写网页,甚至在记事本中。



本站2010年9月新增《十天学会web尺度(div+CSS)》系列教程,接待进修!
自顺应结构是网页计划中罕见的结构情势,自顺应的结构可以依据扫瞄器窗口的巨细,主动改动其宽度和高度值,是一种十分天真的结构情势,优秀的自顺应结构网站对分歧分辩率的显现器都能供应最好的显现效果。实践上div默许形态的占有整行的空间,即是宽度为100%的自顺应结构的体现情势,一列自顺应结构必要我们做的事情也十分复杂,只必要将宽度由流动值改成百分比值的情势便可
#layout{
border:2pxsolid#A9C9E2;
background-color:#E8F5FE;
height:200px;
width:80%;
}
CSS在年夜部分用数值作为参数的款式属性都供应了百分比,width宽度属性也不破例,在这里我们将宽度由一列流动宽度的300px,改成80%,从下边的预览效果中能够看到,div的宽度已变成了扫瞄器宽度的80%的值。自顺应的上风就是当扩展或减少扫瞄器窗口巨细时,其宽度还将保持在与扫瞄器以后宽度的比例。
<!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:80%;}--></style></head><body><divid="layout">一列自顺应宽度(AA25.CN)</div></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
详细操纵步骤请参考:CSS网页结构进门教程1:一列流动宽度
只用在设置宽度时由本来的300px,改成80%便可。


大大增加协同工作的难度,很多没学过div的程序员对于美工出的div页面束手无措,稍微改错了,可能整个站点就惨不忍睹了。当然,如果你是一个全才,可以搞定一切,也可能不会。
若相依 该用户已被删除
沙发
发表于 2015-1-18 07:45:44 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
蒙在股里 该用户已被删除
板凳
发表于 2015-1-26 21:34:39 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
再现理想 该用户已被删除
地板
发表于 2015-2-4 23:05:22 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
小魔女 该用户已被删除
5#
发表于 2015-2-10 23:06:56 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
山那边是海 该用户已被删除
6#
发表于 2015-3-1 17:41:49 | 只看该作者
可以使用 CSS 检查工具进行设计。
若天明 该用户已被删除
7#
发表于 2015-3-10 22:14:03 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
活着的死人 该用户已被删除
8#
发表于 2015-3-17 12:09:16 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
简单生活 该用户已被删除
9#
发表于 2015-3-24 11:12:45 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-16 05:25

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表