|
|
域名空间 下载中心 社区论坛 信息公告 my小屋 | |
 |
联系我们 设为首页 加入收藏 |
 |
|
 |
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿 论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图 专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版 社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 韩国素材 | 素材图库 | 广告服务 | 服务 |
 |
 |
 |
 当前位置：首页>>网页设计>>html/css>>正文 |
新版上线！[旧版] |  |
|||
注:打开慢时请稍等
实践div＋css网页布局入门http://www.iyit.net 日期：2006-5-27 9:15:58 来源：西部e网 点击： |
第一种可能是你还没有理解css处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加css。这篇文章将告诉你应该怎样把html结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么css语句。当你解决了第一种问题，知道了如何结构化你的html，我再给出一个列表，详细列出原来的表现属性用什么css来代替。 结构化html 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用photoshop或者fireworks画出来、切割成小图。最后再通过编辑html将所有设计还原表现在页面上。 如果你希望你的html页面用css布局(是css-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。 外观并不是最重要的。一个结构良好的html页面可以以任何外观表现出来，css zen garden是一个典型的例子。css zen garden帮助我们最终认识到css的强大力量。 html不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在pda、移动电话和屏幕阅读机上。但是一个结构良好的html页面可以通过css的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的html结构。 如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块： 标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜索框 功能区(例如购物车、收银台) 页脚(版权和有关法律声明) 我们通常采用div元素来将这些结构定义出来，类似这样： ＜div id="header"＞＜/div＞ ＜div id="content"＞＜/div＞ ＜div id="globalnav"＞＜/div＞ ＜div id="subnav"＞＜/div＞ ＜div id="search"＞＜/div＞ ＜div id="shop"＞＜/div＞ ＜div id="footer"＞＜/div＞ 这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的id在div上。div容器中可以包含任何内容块，也可以嵌套另一个div。内容块可以包含任意的html元素---标题、段落、图片、表格、列表等等。 根据上面讲述的，你已经知道如何结构化html，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上div并加上唯一的id,你就可以用css选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个css规则，就可以完全不同于#content里的图片规则。 另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(pda还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 编辑：黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部] 上一篇：css属性中display与visibility的不同 下一篇：css不朽的经典—3d文字特效 转载请注明来源：www.iyit.net 特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。 |
| 相关文章 | ||||
| 友情链接 | ||||||
 |
设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接 |  |
| |||||||
易特网络技术