仓酷云

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

[DIV+CSS] 给大家带来CSS网页结构中表格制造实例

[复制链接]
只想知道 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:52:11 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。
网页制造poluoluo文章简介:论坛仍有人在会商用DIV来拼集一个表格,之前已提过table建站、DIV建站和XHTML建站的区分,W3C不倡始整站利用TABLE套用,并非说TABLE就一事无成,甚么中央都不克不及使了。相反,该用TABLE的中央是倡始利用TABLE的。
论坛仍有人在会商用DIV来拼集一个表格,之前已提过table建站、DIV建站和XHTML建站的区分,W3C不倡始整站利用TABLE套用,并非说TABLE就一事无成,甚么中央都不克不及使了。相反,该用TABLE的中央是倡始利用TABLE的。
比方上面的的结构,你必要用几个DIV来浮动?

最公道的办法,就是利用表格来完成表格,经由HeTingYi的公布和goos的简化,代码以下:
页面布局:

  • <tablecellspacing="1"cellpadding="0">
  • <colgroup>
  • <colclass="col1"/>
  • <colclass="col2"/>
  • <colclass="col3"/>
  • </colgroup>
  • <tr>
  • <th>旅客种别</th>
  • <th>日票(国民币.元)</th>
  • <th>夜票(国民币.元)</th>
  • </tr>
  • <tr>
  • <td>成人</td>
  • <td>170</td>
  • <td>100</td>
  • </tr>
  • <tr>
  • <td>先生</td>
  • <tdcolspan="2">125(文章出自poluoluo.com转载请说明出处)</td>
  • </tr>
  • <tr>
  • <td>儿童</td>
  • <td>85</td>
  • <td>50</td>
  • </tr>
  • <tr>
  • <td>老年</td>
  • <td>35</td>
  • <td>30</td>
  • </tr>
  • </table>
CSS部分:

  • *{
  • padding:0;
  • margin:0;
  • font:12px/1.5em"SimSun";
  • }
  • body{padding:100px;}
  • table{
  • width:400px;
  • text-align:center;
  • background:#DEE4FF;
  • border:solid5px#DEE4FF;
  • }
  • .col1,.col2{width:30%;}
  • .col3{width:40%;}
  • th,td{vertical-align:middle;}
  • tableth{color:#fff;background:#4F86FF;}
  • tabletd{color:#2467FA;background:#A1BEFF;}

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
admin 该用户已被删除
沙发
发表于 2015-1-17 23:45:34 | 只看该作者
可以使用CSS检查工具进行设计。
简单生活 该用户已被删除
板凳
发表于 2015-1-25 20:29:57 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
灵魂腐蚀 该用户已被删除
地板
发表于 2015-2-4 03:08:47 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
爱飞 该用户已被删除
5#
发表于 2015-2-9 13:24:02 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
若相依 该用户已被删除
6#
发表于 2015-2-27 08:03:56 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
山那边是海 该用户已被删除
7#
发表于 2015-3-9 01:30:56 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
老尸 该用户已被删除
8#
发表于 2015-3-16 21:45:29 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
莫相离 该用户已被删除
9#
发表于 2015-3-23 07:57:01 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-10 16:33

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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