新手求怎样用html+css画下面的布局，求大神啊。。_百度知道
提问者采纳
&style&&&&&&&&&&&&&.clearfix:after{clear:&&content:&&.&;&display:&&height:&0;visibility:&}&&&&&&&&&&&&.father{width:&800&position:&}&&&&&&&&&&&&.father&.left{width:&300&height:&200&padding:珐珐粹貉诔股达瘫惮凯&20&margin-right:&100&border:2px&solid�&float:}&&&&&&&&&&&&.father&.left&ul&li{list-style:&&display:&}&&&&&&&&&&&&.father&input.ps1{position:&top:20&left:&350}&&&&&&&&&&&&.father&input.ps2{position:&top:120&left:&350}&&&&&&&&&&&&.father&.right{border:2px&solid�width:300&height:&200&padding:&20&float:&}&&&&&&&&&/style&&&&&&&&&&div&class=&father&clearfix&&&&&&&&&&&&&&&div&class=&left&&&&&&&&&&&&&&&&&&&ul&&&&&&&&&&&&&&&&&&&&&&li&1&/li&&&&&&&&&&&&&&&&&&&&&&li&1&/li&&&&&&&&&&&&&&&&&&&&&&li&1&/li&&&&&&&&&&&&&&&&&&&&&&li&1&/li&&&&&&&&&&&&&&&&&&/ul&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&input&type=&button&&value=&按钮&&class=&ps1&&/&&&&&&&&&&&&&&input&type=&button&&value=&按钮&&class=&ps2&&/&&&&&&&&&&&&&&div&class=&right&&&/div&&&&&&&&&&/div&
提问者评价
多谢大神！！！！！
其他类似问题
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁你的位置：
&& 详细内容
《HTML+CSS网页设计与布局从入门到精通》扫描版[PDF]
本资料所属分类：
更新时间：日
如不能下载，请查看
中文名:&HTML+CSS网页设计与布局从入门到精通作者:& 温谦图书分类:&软件资源格式:&PDF版本:&扫描版出版社:&人民邮电出版社书号:&2地区:& 大陆语言:& 简体中文简介:&
内容简介：本书共分4个部分21章和两个附录，包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。全书遵循Web标准，强调“表现”与“内容”的分离，抛弃了那些过时的HTML标记和属性，从更规范的角度全面、系统地介绍了网页设计制作方法与技巧。附录收录了网站发布与管理的知识和160个应用CSS时出现频度较高的英文单词及其中文解释。书中给出了大量详细的案例，并对案例进行分析，便于读者在理解的基础上，直接修改后使用。本书作者具备扎实的实践功底，行文细腻，对每一个技术细节以及每一个实际工作中可能遇到的难点和错误都进行了详细的说明，并给出了解决方案。本书附带学习光盘，收录了12个小时HTML和CSS多媒体教学录像和网页制作技术多媒体教学录像，辅助读者学习，达到事半功倍的效果。光盘还附带书中所有实例的素材文件、源代码和最终效果文件，修改后可直接使用。本书适合于网页设计制作人员和开发人员阅读，读者可以在掌握HTML和CSS之后做出精美的网页。编辑推荐：《HTML+CSS网页设计与布局从入门到精通》包括6小时HTML+CSS关键技术视频教程6小时网页制作视频教程书中实例源文件/效果文件/制作素材资深网页设计师倾心打造，融合多年项目经验和工作心得。抛弃过时的HTML标记和属性，详细介绍Web标准化网页制作必备的HTML标记和属性全面讲解CSS控制页面表现的方法，包括控制文字、图像、背景、表格、表单、导航链接等。深入剖析CSS布局的核心技术和实际操作方法，包括固定宽度布局、变宽度布局。逐个效果解决IE6/IE7/Firefox浏览器兼容性问题。读者对象：网页设计与布局人员，网页美工人员，网站建设与开发人员，网页制作与网站建设培训学员，HTML/CSS爱好者。内容截图：下载地址：
第1部分 HTML基础篇第1章 网页设计基础知识 31.1 基础概念 31.2 网页与HTML语言 41.3 Web标准：结构、表现与行为 51.3.1 标准的重要性 51.3.2 “Web标准”概述 61.4 初步理解网页设计与开发的过程 71.4.1 基本任务与角色 71.4.2 明确网站定位 81.4.3 收集信息和素材 81.4.4 策划栏目内容 81.4.5 设计页面方案 91.4.6 制作页面 91.4.7 实现后台功能 91.4.8 整合与测试网站 101.5 与设计相关的技术因素 101.6 本章小结 12第2章 HTML网页文档结构 132.1 HTML简介 132.1.1 创建第一个HTML文件 132.1.2 HTML文件结构 152.2 简单的HTML案例 162.3 网页源文件的获取 182.3.1 直接查看源文件 192.3.2 保存网页 192.4 辅助：利用Dreamweaver快速建立基本文档 202.5 本章小结 24第3章 用HTML设置文本和图像 253.1 文本排版 253.1.1 实现段落与段内换行(p和br) 253.1.2 设置标题(h1～h6) 273.1.3 使文字水平居中(center) 273.1.4 设置文字段落的缩进(blockquote) 293.2 设置文字列表 293.2.1 建立无序列表(ul) 293.2.2 建立有序列表(ol) 303.3 HTML标记与HTML属性 313.3.1 用align属性控制段落的水平位置 313.3.2 用bgcolor属性设置背景颜色 323.3.3 设置文字的特殊样式 343.3.4 设置文字的大小和颜色(font) 353.4 忘记过时的HTML标记和属性 353.5 特殊文字符号 363.6 在网页中使用图像(img) 383.6.1 网页中的图片格式 383.6.2 一个简单的图片网页 383.6.3 使用路径 393.7 用width和height属性设置图片的尺寸 413.8 用alt属性为图像设置替换文本 433.9 辅助：利用Dreamweaver设置文本和图像 433.10 辅助：利用Dreamweaver代码视图提高效率 473.10.1 代码提示 473.10.2 代码折迭 493.10.3 使用拆分视图对代码快速定位 493.11 本章小结 50第4章 用HTML建立超链接(a) 514.1 设置基本文字超链接 514.1.1 URL的格式 514.1.2 URL的类型 524.2 设置页面内部的特定目标的链接 534.3 设置图片的超链接 544.4 设置电子邮件链接 544.5 设置以新窗口显示链接页面 554.6 创建热点区域 554.6.1 用HTML建立热点区域(map和area) 564.6.2 辅助：利用Dreamweaver精确定位热点区域 574.7 框架之间的链接 594.7.1 建立框架与框架集(frame和frameset) 594.7.2 用cols属性将窗口分为左右两部分 604.7.3 用rows属性将窗口分为上中下三部分 604.7.4 框架的嵌套 614.7.5 用src属性在框架中插入网页 614.7.6 用src属性在框架之间链接 624.7.7 创建嵌入式框架(iframe) 644.8 链接增多后网站的组织结构与维护 654.9 本章小结 66第5章 用HTML创建表格 675.1 表格基本结构(table) 675.2 合并单元格 685.2.1 用colspan属性左右合并单元格 685.2.2 用rowspan属性上下合并单元格 695.3 用align属性设置对齐方式 705.4 用bgcolor属性设置表格背景色和边框颜色 715.5 用cellpadding属性和cellspacing属性设定距离 725.6 完整的表格标记(thead、tbody和tfoot) 735.7 需要抛弃的方法：用表格进行页面布局 755.8 本章小结 78第2部分 CSS基础篇第6章 (X)HTML与CSS概述 816.1 HTML与XHTML 816.1.1 追根溯源 816.1.2 DOCTYPE(文档类型)的含义与选择 826.1.3 XHTML与HTML的重要区别 836.2 (X)HTML与CSS 846.2.1 CSS标准 856.2.2 传统HTML的缺点 856.2.3 CSS的引入 866.2.4 如何编辑CSS 886.2.5 浏览器与CSS 896.3 本章小结 90第7章 CSS核心基础 917.1 构造CSS规则 917.2 基本CSS选择器 927.2.1 标记选择器 927.2.2 类别选择器 937.2.3 ID选择器 957.3 在HTML中使用CSS的方法 967.3.1 行内样式 967.3.2 内嵌式 977.3.3 链接式 987.3.4 导入样式 997.3.5 各种方式的优先级问题 1007.4 本章小结 102第8章 手工编写与借助工具 1038.1 从零开始 1038.2 设置标题 1048.3 控制图片 1058.4 设置正文 1068.5 设置整体页面 1068.6 对段落进行分别设置 1078.7 完整代码 1088.8 CSS的注释 1098.9 辅助：使用Dreamweaver创建页面 1098.10 辅助：在Dreamweaver中新建CSS规则 1108.11 辅助：在Dreamweaver中编辑CSS规则 1128.12 为图像创建CSS规则 1148.13 本章小结 116第9章 CSS的高级特性 1179.1 复合选择器 1179.1.1 “交集”选择器 1179.1.2 “并集”选择器 1189.1.3 后代选择器 1209.2 CSS的继承特性 1229.2.1 继承关系 1229.2.2 CSS继承的运用 1239.3 CSS的层迭特性 1259.4 本章小结 126第10章 用CSS设置文本样式 12710.1 长度单位 12710.2 颜色定义 12810.3 准备页面 12910.4 设置文字的字体 12910.5 设置文字的倾斜效果 13010.6 设置文字的加粗效果 13110.7 英文字母大小写转换 13210.8 控制文字的大小 13310.9 文字的装饰效果 13310.10 设置段落首行缩进 13410.11 设置字词间距 13510.12 设置段落内部的文字行高 13610.13 设置段落之间的距离 13610.14 控制文本的水平位置 13710.15 设置文字与背景的颜色 13810.16 设置段落的垂直对齐方式 13810.16.1 使用line-height属性进行设置 13810.16.2 更通用的解决方案 13910.17 本章小结 140第11章 用CSS设置图像效果 14111.1 设置图片边框 14111.1.1 基本属性 14111.1.2 为不同的边框分别设置样式 14211.2 图片缩放 14411.3 图文混排 14511.3.1 文字环绕 14511.3.2 设置图片与文字的间距 14611.4 案例——八大行星科普网页 14711.5 设置图片与文字的对齐方式 15011.5.1 横向对齐方式 15011.5.2 纵向对齐方式 15111.6 本章小结 154第12章 用CSS设置背景颜色与图像 15512.1 设置背景颜色 15512.2 设置背景图像 15612.3 设置背景图像平铺 15712.4 设置背景图像位置 15912.5 设置背景图片位置固定 16212.6 设置标题的图像替换 16312.7 使用滑动门技术的标题 16612.8 本章小结 168第3部分 CSS高级篇第13章 CSS盒子模型 17113.1 “盒子”与“模型”的概念探究 17113.2 边框(border) 17213.2.1 设置边框样式(border-style) 17313.2.2 属性值的简写形式 17413.2.3 边框与背景 17613.3 设置内边距(padding) 17713.4 设置外边距(margin) 17813.5 盒子之间的关系 17913.5.1 HTML与DOM 18013.5.2 标准文档流 18313.5.3 div标记与span标记 18413.6 盒子在标准流中的定位原则 18713.6.1 行内元素之间的水平margin 18713.6.2 块级元素之间的竖直margin 18813.6.3 嵌套盒子之间的margin 18913.6.4 margin属性可以设置为负值 19113.7 思考题 19213.8 本章小结 196第14章 盒子的浮动与定位 19714.1 盒子的浮动 19714.1.1 准备代码 19714.1.2 案例1——设置第1个浮动的div 19914.1.3 案例2——设置第2个浮动的div 19914.1.4 案例3——设置第3个浮动的div 19914.1.5 案例4——改变浮动的方向 20014.1.6 案例5——再次改变浮动的方向 20014.1.7 案例6——全部向左浮动 20114.1.8 案例7——使用clear属性清除浮动的影响 20214.1.9 案例8——扩展盒子的高度 20314.2 盒子的定位 20414.2.1 静态定位(static) 20414.2.2 相对定位(relative) 20514.2.3 绝对定位(absolute) 20914.2.4 固定定位(fixed) 21414.3 z-index空间位置 21414.4 盒子的display属性 21514.5 本章小结 216第15章 用CSS设置表格样式 21715.1 控制表格 21715.1.1 表格中的标记 21715.1.2 设置表格的边框 21915.1.3 确定表格的宽度 22215.1.4 其他与表格相关的标记 22315.2 美化表格 22415.2.1 搭建HTML结构 22415.2.2 整体设置 22515.2.3 设置单元格样式 22615.2.4 斑马纹效果 22715.2.5 设置列样式 22715.3 设置鼠标指针经过时整行变色提示的表格 23215.3.1 在Firefox和IE 7中实现鼠标指针经过时整行变色 23215.3.2 在IE 6中实现鼠标指针经过时整行变色 23315.3.3 最终合并代码 23415.4 辅助：使用jQuery实现更多效果 23615.4.1 用jQuery实现斑马纹效果 23715.4.2 用jQuery实现“前3行”特殊样式 23915.4.3 用jQuery实现渐变背景色表格效果 24015.4.4 用jQuery实现鼠标指针经过变色效果 24115.5 案例——日历 24115.5.1 搭建HTML结构 24115.5.2 设置整体样式和表头样式 24415.5.3 设置日历单元格样式 24515.6 本章小结 248第16章 用CSS设置链接与导航菜单 24916.1 丰富的超链接特效 25016.2 创建按钮式超链接 25216.3 制作荧光灯效果的菜单 25316.3.1 HTML框架 25416.3.2 设置容器的CSS样式 25416.3.3 设置菜单项的CSS样式 25516.4 控制鼠标指针 25716.5 设置项目列表样式 25716.5.1 列表的符号 25816.5.2 图片符号 26016.6 创建简单的导航菜单 26116.6.1 简单的竖直排列菜单 26116.6.2 横竖自由转换菜单 26416.7 设置图片翻转效果 26516.8 应用滑动门技术的玻璃效果菜单 26616.8.1 基本思路 26616.8.2 设置菜单整体效果 26716.8.3 使用“滑动门”技术设置玻璃材质背景 26816.8.4 进一步解决的问题 26916.9 鼠标指针经过时给图片增加边框 27016.10 本章小结 272第17章 用CSS建立表单 27317.1 表单的用途和原理 27317.2 表单输入类型 27417.2.1 文本输入框 27417.2.2 单选按钮 27417.2.3 复选按钮 27517.2.4 密码输入框 27517.2.5 按钮 27617.2.6 多行文本框 27717.2.7 列表框 27717.3 CSS与表单 27817.3.1 表单中的元素 27817.3.2 像文字一样的按钮 28117.3.3 多彩的下拉菜单 28317.4 案例——“数独”游戏网页 28417.4.1 搭建基本表格 28517.4.2 设置表格样式 28617.4.3 加入文本输入框 28717.4.4 设置文本输入框的样式 28717.5 对齐文本框和旁边的图像按钮 28917.6 本章小结 290第18章 网页样式综合案例——灵活的电子相册 29118.1 搭建框架 29118.2 阵列模式 29318.3 单列模式 29818.4 改进阵列模式 30118.5 IE 6兼容 30418.6 双向联动模式 30618.6.1 在Firefox中实现 30618.6.2 IE 6兼容 31118.6.3 改变方向 31218.7 本章小结 314第4部分 CSS布局篇第19章 固定宽度布局剖析与制作 31719.1 向报纸学习排版思想 31719.2 CSS排版观念 31919.2.1 两列布局 32019.2.2 三列布局 32019.2.3 多列布局 32119.2.4 布局结构的表达式与结构图 32119.3 圆角框 32519.3.1 准备图像 32519.3.2 搭建HTML结构 32619.3.3 放置背景图像 32819.3.4 设置样式并修复缺口 32919.4 单列布局 33019.4.1 放置第一个圆角框 33119.4.2 设置圆角框的CSS样式 33119.4.3 放置其他圆角框 33419.5 “1-2-1”固定宽度布局 33519.5.1 准备工作 33619.5.2 绝对定位法 33719.5.3 浮动法 33919.6 “1-3-1”固定宽度布局 34119.7 “1-((1-2)+1)-1”固定宽度布局 34319.8 本章小结 344第20章 变宽度网页布局剖析与制作 34520.1 “1-2-1”变宽度网页布局 34520.1.1 “1-2-1”等比例变宽布局 34520.1.2 “1-2-1”单列变宽布局 34820.2 “1-3-1”宽度适应布局 35220.2.1 “1-3-1”三列宽度等比例布局 35220.2.2 “1-3-1”单侧列宽度固定的变宽布局 35220.2.3 “1-3-1”中间列宽度固定的变宽布局 35320.2.4 进一步的思考 35520.2.5 “1-3-1”双侧列宽度固定的变宽布局 35620.2.6 “1-3-1”中列和侧列宽度固定的变宽布局 35820.3 变宽布局方法总结 35920.4 分列布局背景色问题 36020.4.1 设置固定宽度布局的列背景色 36020.4.2 设置特殊宽度变化布局的列背景色 36420.4.3 设置单列宽度变化布局的列背景色 36420.5 CSS排版与传统的表格方式排版的分析 36520.6 浏览器的兼容性问题 36820.7 CSS布局页面的调试技巧 36820.7.1 技巧1：设置背景色或者边框，确定错误范围 36920.7.2 技巧2：删除无关代码，暴露核心矛盾 36920.7.3 技巧3：先用Firefox调试，然后使它兼容IE 36920.7.4 技巧4：善于利用工具，提高调试效率 37020.7.5 技巧5：善于提问，寻求帮助 37020.8 本章小结 370第21章 网页布局综合案例——儿童用品网上商店 37121.1 案例概述 37121.2 内容分析 37221.3 HTML结构设计 37421.4 原型设计 37721.5 页面方案设计 38021.6 布局设计 38321.6.1 整体样式设计 38321.6.2 页头部分 38421.6.3 内容部分 38621.6.4 页脚部分 38921.7 细节设计 38921.7.1 页头部分 38921.7.2 内容部分 39521.7.3 左侧的主要内容列 39521.7.4 右边栏 39821.8 CSS布局的优点 40221.9 交互效果设计 40321.9.1 次导航栏 40321.9.2 主导航栏 40421.9.3 账号区 40421.9.4 图像边框 40521.9.5 产品分类 40721.10 遵从Web标准的设计流程 40721.11 从“网页”到“网站” 40821.11.1 历史回顾 40821.11.2 不完善的办法 40821.11.3 服务器出场 40921.11.4 CMS出现 40921.11.5 具体操作 40921.12 本章小结 410附录A 网站发布与管理 411A.1 在Internet上建立自己的Web站点 411A.1.1 制作网站内容 411A.1.2 申请域名 411A.1.3 信息发布 411A.2 租用虚拟主机空间 412A.2.1 了解基本的技术名词 412A.2.2 选择和租用虚拟主机 413A.3 向服务器上传网站内容 414A.3.1 使用Dreamweaver上传文件 414A.3.2 使用IE浏览器上传文件 415A.3.3 使用专业FTP工具上传文件 416A.4 网站管理 418A.4.1 修改密码 418A.4.2 集团邮箱管理 419A.4.3 注意事项 420附录B CSS英文小字典 421
自带站内搜索End-->
相关学习资料css实现div 水平居中的两种方法介绍，利用行内元素文本水平居中属性text-align:center实现div单行文字水平居中和div标签块 水平居中（display:inline-block）等方法...
已有2543人围观
html+css布局实例-推荐
html+css布局实例-人气榜
懒人建站为您提供-基于jquery特效，jquery弹出层效果，导航菜单代码，下拉菜单代码和jquery焦点图片代码，懒人建站关注软件界面设计，WEB/后台/手机/软件UI设计、建站素材、html5和CSS3新技术等。CSS入门教程：HTML+CSS布局入门
如果不坚持,何必当初那么努力
帖子140505&缘分币531757 Y&阅读权限255&注册时间&
21:06 
CSS入门教程：HTML+CSS布局入门
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习：
& &第一种可能是你还没有理解 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 还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。
& &一个仔细结构化的 HTML 页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用 blockquote标签，只要使用 p标签，并对 p加一个 CSS的 margin 规则就可以实现缩进目的。p是结构化标签，margin 是表现属性，前者属于 HTML，后者属于 CSS。(这就是结构于表现的相分离.)
& &良好结构的 HTML 页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码&table width=80% cellpadding=3 border=2 align=left&，现在可以只在 HTML 中写&table&，所有控制表现的东西都写到 CSS 中去，在结构化的 HTML 中，table 就是表格，而不是其他什么(比如被用来布局和定位)。
& &亲自实践一下结构化上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现 DIV 嵌套的情况，你会看到container层中又有其它层，结构类似这样：代码:&div id=navcontainer&
&div id=globalnav&
&ul&a list&/ul&
&div id=subnav&
&ul&another list&/ul&
&/div&嵌套的 div 元素允许你定义更多的 CSS 规则来控制表现，例如：你可以给#navcontainer 一个规则让列表居右，再给#globalnav 一个规则让列表居左，而给#subnav 的 list 另一个完全不同的表现。
用CSS 替换传统方法 下面的列表将帮助你用 CSS 替换传统方法：
HTML 属性以及相对应的 CSS方法
HTML 属性 CSS 方法 说明&&
align=left
align=right float:&&
& &float: 使用 CSS 可以浮动 任何元素:图片、段落、div、标题、表格、列表等等&&
& &当你使用 float 属性，必须给这个浮动元素定义一个宽度。
& &marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; 使用 CSS, margin 可以设置在任何元素上, 不仅仅是 body 元素.更重要的，你可以分别指定元素的 top, right, bottom 和left 的 margin 值。代码:vlink=#333399 alink=#000000 link=#3333FF a:link #3
a:visited: #339;
a:hover: #999;
a:active: #00f; 在HTML 中，链接的颜色作为 body 的一个属性值定义。整个页面的链接风格都一样。使用 CSS 的选择器，页面不同部分的链接样式可以不一样。
& &bgcolor=#FFFFFF background-color: # 在 CSS 中，任何元素都可以定义背景颜色，不仅仅局限于 body 和 table元素。
& &bordercolor=#FFFFFF border-color: # 任何元素都可以设置边框(boeder)，你可以分别定义 top, right, bottom和left border=3
&&cellspacing=3 border-width: 3 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left 边框的颜色、尺寸和样式。 你可以使用 table, td or th 这些选择器.&&如果你需要设置无边框效果，可以使用 CSS定义：代码:border-collapse:
clear: 许多 2列或者 3列布局都使用 float 属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用 clear属性.
cellpadding=3 vspace=3 hspace=3 padding: 3
用 CSS，任何元素都可以设定 padding 属性，同样， padding 可以分别设置 top, right, bottom and left。padding 是透明的。
align=center text-align: margin-right: margin-left: Text-align 只适用于文本.
象div，p 这样的块级怨毒可以通过 margin-right: 和margin-left:来水平居中 一些令人遗憾的技巧和工作环境由于浏览器对 CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS 实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧，盒模型 bug 的技巧等等。所有这些技巧都在 Molly Holzschlag 的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。
& & 另外一个关于 CSS技巧的资源站点是 Big John 和 Holly Bergevin 的Position is Everything。
如果您在做图或者看教程（PHOTOSHOP方面），遇到任何问题请到问题交流区提问，地址：；我们会在第一时间帮助您解决问题，如果在教程后面跟帖，一律不给予解决！~
UID1&精华&积分225403&威望15120 F&回复币49206 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
当前时区 GMT+8, 现在时间是