我想把div（用js遍历相同class的div的class）板块进行放到ul，li里进行横向排列
点击联系发帖人
时间：2018-05-19 13:30
CSS如何实现&div&中&li&的图片、文字分别排列一行？（图文描述） - 知乎5被浏览<strong class="NumberBoard-itemValue" title="分享邀请回答22 条评论分享收藏感谢收起12 条评论分享收藏感谢收起写回答→ div,css
上传时间： 来源：
第一篇:div,css第一天
XHTML CSS 基础知识
欢迎大家学习《十天学会 web 标准》，也就是我们常说的 DIV+CSS。不过这里的 D IV+CSS 是一种错误的叫法，建议大家还是称之为 web 标准。学习本系列教程需有一定 html 和 css 基础， 也就是指您之前做过网页， 会用表格布局。如果您刚开始学习网页制作，不知道什么是表格布局及 html 和 css，建议您先去充电，否 则学习本教程会非常吃力或者根本就听不懂。由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到 web 标准 （div+css）布局，会使用 web 标准制作出常见的页面，这也达到了本教程的目的。本教程多以实例形式循序渐进讲解， 实例涉及到哪些关键点或难点就讲解什么， 较少讲解概 念。因为概念这些东西很难说明白， 或者说明白你也不一定能听懂， 听懂了也不一定能理解。所以把概念留给大家以后再深入研究。由于章节关系，没有把 css 和 css hack 单独分出，只是在用到的时候穿插入讲解了。html 基础和 css 基础只在第一节中介绍了几点重要的。下面我们开始第一天的学习
一、xhtml css 基础知识
首先说一下我们这节课的知识点 1. 文档类型 2. 语言编码 3. html 标签 4. css 样式 5. css 优先级 6. css 盒模型组成 1）文档类型 当我们用 dreamweaver 新建一下 html 格式文档时，查看源代码，会发现代码最上 部有如下这句话：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &/pub/shockwave/cabs/flash/swflash.cab#version=6, 0,0,0& width=&'+ swf_width +'& height=&'+ swf_height +'&&'); document.write('¶m name=&movie& value=&/go/getflashplayer& /&'); document.write('&/object&'); &/script& &div id=&login&&&span&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/btn_login1.gif& alt=& 个 人 用 户 登 录 & width=&131& height=&39& /&&/a&&/span&&a href=&#&&&img
src=&http://www.aa25.cn/upload//images/btn_login.gif& alt=& 经 销 商 登 录 & width=&131& height=&39& /&&/a&&/div& &/div& &div id=&hot_news&& &div id=&news_top&& &h1&苹果 iphone 4 手机将于 9 月 25 日在中国上市&/h1& &p&日前中国联通正式宣布将于 9 月 25 日 9 时在中国大陆市场全面推出 iPhone4，并为 iPhone4 用户量身定制了合约计划。&/p& &/div& &div id=&news_list&& &ul& &li&&span&9-22&/span&&a href=&#&&纯 CSS 实现三列 DIV 等高布局&/a&&/li& &li&&span&9-22&/span&&a href=&#&&HTML 元素的 ID 和 Name 属性的区别 &/a&&/li& &li&&span&9-22&/span&&a href=&#&&完美兼容 ie6,ie7,ie8 以及 firefox 的 css 透 明滤镜&/a&&/li& &li&&span&9-22&/span&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式 &/a&&/li& &li&&span&9-22&/span&&a href=&#&&javascript 为 FF 设置首页&/a&&/li& &li&&span&9-22&/span&&a href=&#&& 复 制 到 系 统 剪 贴 板 之 IE,ff 兼 容 版 &/a&&/li& &/ul& &/div& &/div& &/div& &div id=&index_pic&& &h2&&span&&/span&&/h2& &ul& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li&
&li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &/ul& &/div& &div id=&index_box&& &div class=&box&& &h2&&a class=&more& href=&#&&更多..&/a&&span&企业历史&/span&&/h2& &div class=&box_con&& &dl& &dt&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic5.gif& alt=&多角度对比 苹果 iPod 系列真 机& width=&91& height=&70& /&&/a&&/dt& &dd&&a href=&#&&&strong&多角度对比 苹果 iPod 系列真机&/strong&&/a& 导言北京时间 9 月 2 日凌晨 1 点苹果在旧金山举行新品发布会， 数码特派 记者在美国现场直播&&/dd& &/dl& &ul& &li&&a href=&#&&纯 CSS 实现三列 DIV 等高布局&/a&&/li& &li&&a href=&#&&HTML 元素的 ID 和 Name 属性的区别&/a&&/li& &li&&a href=&#&&完美兼容 ie6,ie7,ie8 以及 firefox 的 css 透明滤镜&/a&&/li& &li&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式&/a&&/li& &li&&a href=&#&&javascript 为 FF 设置首页&/a&&/li& &li&&a href=&#&&复制到系统剪贴板之 IE,ff 兼容版&/a&&/li& &li&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式&/a&&/li& &/ul& &/div& &/div& &div class=&box box1&& &h2&&a class=&more& href=&#&&更多..&/a&&span&企业历史&/span&&/h2& &div class=&box_con&& &dl& &dt&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic5.gif& alt=&多角度对比 苹果 iPod 系列真 机& width=&91& height=&70& /&&/a&&/dt& &dd&&a href=&#&&&strong&多角度对比 苹果 iPod 系列真机&/strong&&/a& 导言北京时间 9 月 2 日凌晨 1 点苹果在旧金山举行新品发布会， 数码特派 记者在美国现场直播&&/dd& &/dl& &ul& &li&&a href=&#&&纯 CSS 实现三列 DIV 等高布局&/a&&/li& &li&&a href=&#&&HTML 元素的 ID 和 Name 属性的区别&/a&&/li& &li&&a href=&#&&完美兼容 ie6,ie7,ie8 以及 firefox 的 css 透明滤镜&/a&&/li&
&li&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式&/a&&/li& &li&&a href=&#&&javascript 为 FF 设置首页&/a&&/li& &li&&a href=&#&&复制到系统剪贴板之 IE,ff 兼容版&/a&&/li& &li&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式&/a&&/li& &/ul& &/div& &/div& &/div& &/div& &div id=&side&& &div class=&side_box&& &h2&&strong&产品&/strong&导购&/h2& &div class=&side_con product&& &ul& &li&&strong&语音业务：&/strong&&a href=&#&&普通电话&/a& | &a href=&#&&语音 数字中继&/a&&/li& &li&&strong&语音业务：&/strong&&a href=&#&&普通电话&/a& | &a href=&#&&语音 数字中继&/a&&/li& &li class=&product3&&&strong&语音业务：&/strong&&a href=&#&&普通电话&/a& | &a href=&#&&语音数字中继&/a&&/li& &/ul& &/div& &/div& &div class=&side_box&& &h2&&strong&使用&/strong&问答&/h2& &div class=&side_con ask&& &dl& &dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多， 使用方法更加简便...&/dd& &/dl& &dl& &dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一...&/dd& &/dl& &dl& &dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...&/dd& &/dl& &dl& &dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...&/dd& &/dl& &dl&
&dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多， 使用方法更加简便...&/dd& &/dl& &/div& &/div& &div class=&side_box&& &h2&&strong&联系&/strong&我们&/h2& &div class=&side_con contact&&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/tel.gif& alt=& 联 系 我 们 & width=&222& height=&112& /&&/a&&/div& &/div& &/div& &/div& &div class=&clearfloat&&&/div& &div id=&footer&& &dl& &dt&&a href=&#&&关于我们&/a& || &a href=&#&&产品目录&/a& || &a href=&#&&联系我 们&/a& || &a href=&#&&友情链接&/a& || &a href=&#&&反馈问题&/a& || &a href=&#&&广 告合作&/a&&/dt& &dd&Copyright & 2007 - 2010 aa25.cn All Rights Reserved&br /& 标准之路 版权所有 京 ICP 备
号&/dd& &/dl& &/div& &/div& &/body& &/html&
提示：可以先修改部分代码后再运行
点击此处下载实例源代码及 psd 源文件 九、相对路径和相对于根目录路径 上边的例子学完后，你会发现在 html 中插入的图片路径是 images/pic4.gif，而在 c ss 中插入的图片路径是这样的../images/nav_bg.gif， 后者比前者多出了../， 这是什么意 思呢？ 这就是相对路径和绝对路径，../表示返回上一级，因为 css 文件在 css 文件夹里，图 片在 images 文件夹下，那么 layout.css 就需要返回上一级找到 images 文件夹才能找到 相应的图片。直接文件夹名或是./开头表示和当前平级，因为 index.html 和 images 文件 夹平级。不管是带../还是不带，这种写法都叫相对路径；另一种叫相对于根目录路径，它 的写法必须以/开始，意思是从根目录开始一级一级向下查找，不管在哪里，要使用 pic4. gif 这个图片，路径都必须是/images/pic4.gif；还有一种写法叫绝对路径，是以 http://
加域名开始的，这个不多多说了。使用相对路径时，当根目录放到一个二级目录下时，文件仍然可以正常访问，而使用 相对于根目录路径时， 其中一个页面放到其它位置时， 照样能关联么相关的图片和其它文件， 比如：本例如果用相对于根目录路径的话，把 index.html 放到一个文件夹下后，还是可以 正常访问的。总之两种方法各有优劣，根据你的需要采用一种合适的方法。相对路径和相对 于根目录路径是可以相互更改的， 在站点管理――编辑――高级设置的本地信息里有链接相 对于，如下图，默认为文档（就是所说的相对路径） ，也可以改为站点根目录，相对路径一 般为直接目录名，需要返回上级时用../，向上返回两级时用../../；相对于根目录路径始终 以/开头，不管该文件现在在哪一级，它都是以根目录开始向下找。
div+css 网页标准布局实例教程（三）
文章出处：标准之路(http://www.aa25.cn/div_css/913.shtml) 编辑：杨雨晨思 前边两节学完后，前台工作基本上完成了，下边的任务该程序员添加程序了。为什么 说是基本完成呢？因为要做的工作还很多， 不但要把首页做出来， 其它的列表页详细页等页 面也得做。还要配合程序员把整个网站完成，这样才能呈现给用户。应部分同学的要求，讲
解一下程序怎么添加的，这样和程序员配合起来也更默契，还有怎么连接 FTP 上传下载， 后期出现问题怎么调试等等。添加程序部分只需要了解就行了，连接 ftp 上传下载，页面调 试查找问题这部分一定要掌握哟。
创建服务器环境 建立数据库 本地和远程服务器连接 php 读取数据 页面调试及浏览器兼容
一、创建服务器环境 程序语言有多种，常用的有 asp、php、jsp 等，之前做的 html 页面，可以直接在浏 览器上运行，因为 html 是客户端语言，而这些是服务器端语言，也就说你所看到的页面是 经过服务器加工之后传输过来的， 不管使用哪种语言环境， 最终目的就是把数据库的数据读 取出来展示到网页上。不同的语言有不同的运行环境，要想运行这些语言，首先要创建一个 适应他们的环境，下边以 php 为例，讲解一下 php 环境的搭建。
点击下载：WampServer 5 集成环境 下载 wamp 安装完成后，php 运行所需的 Apache、 MySQL、PHP 5 等都具备了， 安装完成后需要启动 WampSeaver，启动后会在托盘区显示一图标（如上图） ，当它正常 运行后，说明服务器环境已经创建成功了。接下来打开如上图中的 php.ini 文件，找到 sh ort_open_tag，把值改为 On，作用是开启短标签支持，以免后边教程中使用短标签时报 错。有关软件的安装，及服务器环境问题本站不做过多介绍，如想详细了解，请百度相关文 章，asp 环境的搭建更简单了，如想知道，也请百度。
二、建立数据库 php 的作用是从数据库读取数据，下面我们就先创建一个数据库，并录入部分数据。点击如上图的 phpMyAdmin，然后会在浏览器中打开数据库。创建一个名为：jiaocheng 的数据库和 news 的表
设置表结构如下：
注意将 ID 字段设置为主键并在额外中选择 auto_increment 选项。表结构创建完后， 选择插入，插入一条数据：
依次插入更多条数据，为后面程序调用做准备，选择性将某些数据插入形象图片，以 便在幻灯处调用。
三、本地和远程服务器连接 只有本地和远程服务器连接后，才能把我们做的页面上传到服务器上来运行。连接的 前提是你知道服务器的地址及网管给你分配的用户名和密码， 有了这些后， dw 的站点― 在 ―管理站点中，选中 jiaocheng，然后编辑，在弹出的对话框中选择服务器选项，然后填 写 ftp 地址，用户名和密码，如果一切正常应该可以顺利连接了，点击测试按钮一下吧，如 果无法连接，就需要查找问题了（下面的截图是 dw cs5 的界面，其它版本略有不同） 。
刚才我们在自己电脑上创建了服务器环境，那么这里的连接就用本地网络了。
设置完后，在文件面板站点上点击右键，选择上传，将文件上传到服务器文件夹中。
完了之后打开浏览器，在地址栏中输入 http://localhost/index.html，就可以访问，或者 直接在 dw 中点击地球图标，也可以直接打开浏览器预览。如果能正常打开页面，说明本地 和服务器连接成功，修改完文件后，把文件上传到服务器上就可以了。如果是协同办公，修
改文件之前一定要先下载，这样才能保证本地的文件为最新，如果你上次修改完之后，别人 又修改了，你没下载，直接修改本地的文件又上传了，那么别人的修改将被覆盖掉，所以一 定要养成好习惯，修改前先下载。
四、php 读取数据 以上的工作都完成后，下面就该用程序读取数据了。首先需要创建一个数据库连接文 件，让 php 程序可以访问数据库，这样才能读取里边的数据，在根目录下创建一个 inc 文 件夹，并创建一个 conn.php 文件，然后打开文件，在源代码里插入如下代码：
&? $conn = mysql_connect (&localhost&,&root&,&&) or die (&数据库连接出错& . mysql_error()); mysql_select_db (&jiaocheng&,$conn); mysql_query(&set names 'gbk'&); ?&
之所以单独创建一下文件，是因为后边很多页面都要用，这样只需包含这个页面即可， 不用每个页面再写这段代码了。数据库连接文件创建好后， 下面就该在 index.html 调用了。注意：这里要将后缀改为 php 才行，如果还是 html 的话，那么它将直接输出，不会经过 服务器加工。接下来打开 index.php，在源代码的最顶部插入如下代码，把 conn.php 文 件包含进来：
&? include(&inc/conn.php&);
记得要把 inc 文件夹上传到服务器上哟。下面就先做“热门新闻”列表吧， 把原来做的# news_list 下的 ul 列表改为如下形式：
&ul& &? $sql=&select * from news order by id desc limit 0,6&; $query=mysql_query($sql); while($row=mysql_fetch_array($query)){ ?& &li&&span&&?=$row['add_time']?&&/span&&a href=&#&&&?=$row['title']?&&/a&&/li& &? }?& &/ul&
第一句是创建一个 sql 查询语句， 表示查询 news 表以 id 的倒序排列且只查询前 6 条， 接下来循环读取出来。上传预览一下吧，是不是变形了，一方面标题太长了，另一方面日期 应该只显示月和日， 日期通过程序只取月日两位， 处理标题有两种方法， 一种是用程序截取， 一种是 css 超出隐藏。下面先把日期给改了，把&?=$row['add_time']?&替换为：&?= date('m-d',strtotime($row['add_time']))?&
把日期改短后，显示正常了，但为了防止以后出现长标题把页面撑乱，让程序员注意 截取一下标题或者你用 css 来实现，css 超出隐藏的话可以给 li 定义高度和 overflow:hid den 属性。得了，从数据库中读取数据出来，就这么简单，下面说一下幻灯部分的实现吧。
和上边的读取方法一样，只不过用 if 判断一下$pic 是否为空，来解决开头没有|的问 题。上传上再预览一下吧，看看是不是显示出来了呢？是吧，已经显示出来了，打开源代码 看看，刚才我们添加的程序部分并没有显示出来，取而代之的是数据库中的数据，这就是程 序的奇妙之处。
好了，有关程序部分就讲这么多了，相信你也该明白是怎么回事了，剩下的你可以自 己对照着制作个试试，如果你想学习程序的话，给大家推荐以前我学过的教程，asp 的话可 以学习 fif 小组的 asp 视频教程，在百度里搜索：fif asp，就出来了，第一个结果便是网易 学院的 fif 视频教程；如果你对 php 感兴趣的话，建议去 php100 中文网，听听张恩民老 师讲解的 php 系列教程，相信很快你也会成为一个程序高手的。五、页面调试及浏览器兼容 在和程序员配合完成网站的过程中或网站上线后，常常会出现一些小问题，比如页面 撑开，显示错乱等，这时候就需要查找问题出在哪里了。查找这些问题，希望大家装上火狐 浏览器（因为它是相对标准的浏览器，这样显得你更专业一些，嘿嘿，最主要是有调试用的 插件） ，装上之后还需要装两个插件：web developer，firebug
插件的下载请点击上图中的获取附加组件，然后输入关键字搜索到后下载安装即可。web developer 作用很强大，如下图所示可以查看当前页面所用到的图片，包括 cs s 中的背景图片，具体使用教程请参看：http://www.aa25.cn/div_css/255.shtml
firebug 这是个更好的一个插件，使用时点击浏览器右下角的萤火虫图标或者按 F12， 会启用这个插件，如需查看某一部分代码，点击插件上的查看页面元素按钮后，鼠标移到网 页上，会出现一个相应的框，当框选中需要查看源代码的元素后点击，在插件区域就显示出 当前区域的代码及样式了，可以禁用某些样式，还可以添加新的样式来查找问题所在。
如上图，先点 1 中的查看页面元素按钮，然后鼠标移动到 2 的地方，将会出现图中所 示的蓝色线框，然后点击鼠标，会在插件中选中 3 位置的代码并在 4 位置出现对该区域生 效的所有样式，即是上边框选部分的代码和样式，当鼠标移动到圈 4 位置时，会出现一个 禁止图标，点击后禁用当前样式，这样便于查找问题所在，另外还可以在后边双击插入新的 样式。另外，如果你装的是 IE8 浏览器，同样具备类似的功能，打开浏览器后，按 F12 键， 即可打开该功能，使用方法和火狐的 firebug 类似。希望大家多多研究，对查找问题能起到事半功倍的效果。不过这些修改只停留在浏览 器层面，不会对你本地和服务器上的文件做任何改动，查找到哪里出问题后，及时在 dw 里 将出错的地方改过来。学会了怎么调试页面后，兼容问题也是一个不容忽视的问题，现在浏览器市场鱼龙混
杂，别的不说，IE 的 6/7/8 版本兼容就够让人头疼了，现在又出了个 IE9，还有火狐、ch ome、opera、Safari 等等，而且标准不统一，一片混乱的状况。从下图中标准之路网站 的访问情况来看，目前 IE6 仍然占最大比重，而 IE6 恰恰也是让设计者最为头疼的浏览器， bug 太多了。鉴于这种混乱情况，目前只用考虑兼容最常用的 IE6/7/8 和 firefox 就可以 了，其它使用人数很少的浏览器可以暂不考虑。只要我们掌握了各个浏览器的特性，避免一 些使它解析错误的写法， 还是不用太多的 css hack 就可以使页面在各个浏览器下显示基本 一致，所以这个需要大家的多观察，多实践，多总结。
因 IE 浏览器的特殊性，一台电脑同时只能装一个版本的 IE 浏览器，不过呢有高人提 供了 IE Tester，把 IE 的几个版本集成到一块，专门供测试兼容使用。大家可以下载安装 一下，测试下页面在各个浏览器下的显示效果。
第一篇:div,cssdiv＋css 教程(入门到精通）
一、div＋css 教程(入门到精通）详细讲解 二、DIV+CSS 网页布局常用基础知识 三、div＋css 常用布局入门 四、div＋css 网站首页布局实例教程
一、div＋css 教程(入门到精通）详细讲解
CSS 高度_css height DIV CSS 高度基础知识 这里的 CSS 高度是指通过 CSS 来控制设置对象的高度。使用 CSS 属性单词 height。单位可以使用 PX，em 等常用使用 PX（像素）为单位。实例.yangshi{height:300}即设置了 yangshi 选择器对象高度为300px。CSS 高度单词：height CSS 最大高度：max-height (IE7及以上版本浏览器支持) CSS 最小高度：min-height (IE7及以上版本浏览器支持) CSS 上下居中：line-height 以上可跟值为数字加单位。Html 初始高度与 DIV+CSS 高度对照 以前 html 直接设置高度 width=&300&这种方式嵌入表格标签内，而且无需带单 位，默认以 px（像素）为单位。实例&table& &tr& &td height=&100&&我的高度为100px&/td& &/tr& &tr& &td height=&50&&我高度为50px&/td& &/tr& &/table& 分别设置了高度为100px 和50px 的两行表格
接下来我们讲解 CSS 高度使用方法及技巧 1、CSS 自适应高度 一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即 可实现此效果。同时也无需使用 height:auto 来实现高度自适应。通常默认情况 下不设置高度，对象高度即是自适应高度。2、固定高度及隐藏超出固定高度的内容 很多时候我需要设置对象固定高度同时让多余的内容不显示出来。解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容） 如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效 果同时设置对象为1px 黑色边框演示， CSS 代码.yangshi{ height:50 width:50 overflow: border:1px solid #666;} Html body 内代码&div class=&yangshi&&www.divcss5.com 演示，内容 测试内容高度超出演示实例，divcss5实例 &/div& CSS 固定高度效果截图3、
说明观看此上图，看出设置固定高度宽度并设置1px 的黑色边框，并且实现内容 未超出设置高度宽度。
禁止溢出设置 CSS 高度、CSS 宽度的 CSS 属性单词及值 overflow: 。3、设置最小高度 使用 CSS 单词：min-height 为什么要设置最小高度？ 有时特别是在文章页面里因为文章内容多少参差不齐， 所以我们可以使用最小高 度设置让左右结构的布局对齐，感觉饱和一点，但是我们又不能设置固定高度， 因为内容可能多可能少，当多的时候自然设置固定高度就不会显示完整内容。这里有个问题就是 IE6不支持最小高度设置（min-height） ，解决办法使用 css hack 方法来解决，大家知道区别不同浏览器时候用的 css hack 中 IE6可以使用 “_”来区别其它浏览器。最小高度运用.yangshi{min-height:50 _height:50}这样就可以解决此问题，说明这里 就不能再使用 overflow:-CSS overflow 设置隐藏超出内容溢出。完整 CSS html 最小高度实例代码&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& & 演示，内容 测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实 例，divcss5实例 &/div& &/body& &/html&
以上是超出内容自动适应高
这里是内容够少，未能充满设置最小高度。无论在 IE6还是 IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设 置。关于 CSS height 高度总结说明这里讲解 CSS height 与 html height 区别及用法，同时讲解了最小高度、自适 应高度、固定高度的设置及运用。
二、CSS 宽度――CSS width 一、宽度基础知识 CSS 宽度是指通过 CSS 样式设置对应 div 宽度，以下我们了解传统 html 宽度、 宽度自适应、固定宽度等宽度知识。传统 Html 宽度属性单词：width 如 width=&300&; CSS 宽度属性单词：width 如 width:300 最大宽度单词：max-width 如 max-width:300 css 手册中了解 max-width/shouce/c_maxwidth.shtml。最小宽度单词：min-width 如：min-width:300px css 手册中了解 min-width/shouce/c_minwidth.shtml 同时你可以进入 CSS 在线手册中 width 手册了解详细基础知识/shouce/c_width.shtml 二、Html 初始宽度与 DIV+CSS 宽度对照 1、传统 html 中宽度 width=&300&，即设置对应元素宽度为300px（像素） 。而宽 度值后无需跟单位，默认情况下以像素（px）为单位。如：&td width=&300&&我的宽度为300px&/td& 即：设置了对应表格 td 的宽度为300px. 2、div css 中宽度设置 width:300，即设置对应 CSS 样式为300px，这里需要 跟单位。
如：#header{ width:300} 即：定义 header CSS 选择器样式为300px 宽度。而在标签运用：&div id=&header&&我的宽度为300px 宽度&/div& 三、css 宽度演示与讲解 1、CSS 宽度自适应 常常我们看见一个网页宽度随浏览器宽度改变而自动改变，如 www.divcss5.com 一样，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。如果网页总宽度为80%即 width:80%;，将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。DIV CSS 自适应宽度例子CSS 样式代码&style type=&text/css&& body{ margin:0 text-align:} .yangshi{ width:80%; border:1px solid #003; margin:0} &/style&
Html 中 body div 代码&div class=&yangshi&&我是80%自适应宽度&/div& 这样即设置内容居中，为了方便测试加上1px 黑色边框。大家可以测试观察其内 容是随浏览器拉大而宽度变宽而自适应宽度80%，而左右两边始终有10%宽度留 着，因为设置此 box 宽度为80%。
以上为 CSS 宽度（width）演示图解。2、CSS 宽度固定 固定即设置宽度为固定值即可如 很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度 width:300px，即设置对应固定宽度为300像素。3、最小固定宽度 CSS 样式属性单词：min-width 兼容支持：min-width 除 IE6不支持为，IE7以上浏览器、火狐、谷歌都支持 常常用于设置宽度最小值，如设置对应 DIV 的样式最小宽度值限制。例.yangshi{border:1px solid #003; min-width:300} 即设置最小宽度为300px， 当然一般很少设置最小宽度。如果要使用最小宽度即， 使用浮动（float）可使用最小宽度限制。最大固定宽度 CSS 属性单词：max-width 兼容支持：max-width 除 IE6不支持为，IE7以上浏览器、火狐、谷歌都支持 最大固定宽度是对对应的样式 div 设置最大宽度限制， 即内容不超过此设置最大
宽度。最大宽度限制例子.yangshi{border:1px solid #003;max-width:300} 即设置了最大宽度限制为300px，以下为设置最大宽度限制演示图：
通过图例和基础知识 DIVCSS5给大家讲解了关于 css 宽度知识，希望大家能掌握 其宽度运用。
CSS 边框即 CSS border CSS 边框基础知识 CSS 边框即 CSS border 是控制对象的边框边线宽度、颜色、虚线、实线等样 式 CSS 属性。Html 原始边框与 DIV+CSS 边框对照 Html 表格控制边框border=&1& bordercolor=�& 说明：控制表格边框宽度为 1px，颜色为黑色，默认为实线样式边框。DIV CSS 边框：border-color:#000; border-style: border-width:1 说明：以上代码为设置对象边框颜色为黑色、边框为实线、宽度为 1px 边框 边框样式包括 设置上边框：border-top 设置下边框：border-bottom 设置左边框：border-left 设置右边框：border-right 边框显示样式border-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 参数值解释none 无边框。与任何指定的 border-width 值无关
hidden 隐藏边框。IE 不支持 dotted 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为点线。否则为实线 dashed 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为虚线。否则为实线 solid 实线边框 double 双线边框。两条单线与其间隔的和等于指定的 border-width 值 groove 根据 border-color 的值画 3D 凹槽 ridge 根据 border-color 的值画菱形边框 inset 根据 border-color 的值画 3D 凹边 outset 根据 border-color 的值画 3D 凸边 例子设置上边框为 1px 实线黑色边框。border-top-color:#000; border-top-style: border-top-width:1 或简写 border-top:#000 solid 1 可以根据以上实例举一反三，可以设置左、右、下的边框 CSS 样式。DIV CSS 边框技巧 如果设置对象上、下、左、右边框相同样式，可以简写无需分别写出上下左右的 属性及对应值。例，设置上下左右边框为 1px 宽度、实线、黑色边框 CSS 代码如下border:1px solid #000; 完整 DIV CSS 实例实例内容设置 CSS 命名为 yangshi 的 css 选择器， 设置该属性选择器样式为边 框为 1px 宽度实线黑色边框、宽度为 200px,高度为 50px 的矩形。CSS 代码div,body{ border:0; margin:5 padding:0;}/* 初始化网页样式 */ .yangshi{ border:1px solid #000; width:200 height:50}/* 设置对象样 式 */ HTML 中对应 DIV 代码&div class=&yangshi&&divcss5 实例-CSS 边框实例&br /& www.divcss5.com CSS 实例 &/div&
上图为 CSS 边框（CSS border）实例主要片段代码截图 说明以上代码对应显示效果， 看到实线以外虚线是因 DW 软件特自动对 DIV box 区加虚线，实际浏览是没有此虚线，特此说明。
三边有边而一边没有设置技巧 如左右下有边框并且样式为黑色 1PX 宽度实线边框，而上边没有边框。CSS 代码border:1px solid #000; border-top: 注意 border:1px solid #000; 和 border-top:前后顺序不能调换。因为 CSS 读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明 顶部上边边框为“none”没有意思， 即实现该实例要的样式。从而无需分别设置下、 左、右，从而节约一定代码。总结 CSS 边框，常见对对象设置 CSS 样式使用属性代码：border:1px solid #000;
CSS 背景-CSS background CSS 背景基础知识 CSS 背景这里指通过 CSS 对对象设置背景属性，如通过 CSS 设置背景各种样 式。CSS 中背景单词background CSS 手册查询-background 手册 background-color 设置颜色作为对象背景颜色 background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。background-position 设置或检索对象的背景图像位置。Html 原始背景与 CSS 背景对照 Html 是指对应效果的 table 背景设置， Html 背景单词Bgcolor 设置背景颜色 与 CSS 背景颜色对应 background-color Background 设置图片作为背景与 CSS 背景图片对应 background-image 最原始 HTML 背景设置演示代码&table bgcolor=󳓸&& &tr& &td background=&/img/css-logo.gif& width=&130& height=&100&&&&/td& &/tr& &/table& 这里设置了 table 背景颜色为#996600，然后设置了 td 的背景图片为 /img/css-logo.gif 背景颜色 如果是给 table 设置背景颜色可以使用 bgcolor=&颜色值&即可设置对象背景颜 色。如果是 CSS 背景颜色，可使用 background-color:颜色值;或 background:颜色 值设置对象背景颜色。CSS 背景颜色设置 DIV+CSS 演示图：
以上截图分别使用 background-color 和 background 来设置对象背景颜色 CSS 图片背景 这里说的是以图片作为背景图片 - CSS 背景图片详细介绍/jiqiao/j80.html CSS 可以使用 background 或 background-image 直接引用图片地址来设置图片 作为对象背景。background:url(/img/logo.gif);设置 DIVCSS5 的 LOGO 图片作为背景 或 background-image:url(/img/logo.gif);具有相同效果。这 样设置图片作为背景有个缺陷就是图片会上下左右的重复， 接下来我们只需看以 下图例教程即可掌握 CSS background
图片背景样式（固定、滚动） 实现这个效果使用 CSS 单词是 background-attachment 当然通常情况下背景默 认是固定的如果是自己使用 CSS background 简写则如上图。background-attachment 使用解析background-attachment:fixed； 背景固定 background-attachment:scroll 背景图像是随对象内容滚动
DIV CSS 背景居中 CSS 背景分为左右居中和上下居中，具体左右居中方法见上图。背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为 500px，那就设置图片居顶部多少 PX 可以让图片实现上下居中。
CSS background（背景）总结使用图片作为背景在一个网页布局中常常会遇到， 希望大家能在实际中掌握其知 识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-（解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片 是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须， 一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片 位置） 1、设置图片作为背景如果图片设置图片在 X 坐标方向重复，如果再设置图片在 对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。2、设置图片作为背景如果图片设置图片在 Y 坐标方向重复，如果再设置图片在 对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无 线。希望大家好好理解有不懂的地方可以进入 CSS 研教室讨论区发表问题，我们将 尽力答复您。
div+css 中 float 认识及 css float 用法 float 是什么意思？ float 是浮动， 翻译成中文也是浮动意思。进入对应 css 手册中 float 手册了解 float 基本信息。float 的作用 通过 css 定义 float（浮动）让 div 样式层块，向左或向右（靠）浮动。float 语法float none | left |right 参数值none 对象不浮动 left 对象浮在左边 right 对象浮在右边 接下来我们来通过一个 div+css 实例讲解 float 使用技巧。DIV CSS 实验一 Css 样式实例内容，我们让文字和图片在一个固定宽度 div 层内，让蓝色背景文 字内容居右，小图片居左。www.divcss5.com CSS 案例演示最终效果图如下
1、首先我们设置一个最外层的宽度为 300px，高度为 200px 的 css 命名为 box 的 css 选择器代码如下（知识点 px 是什么意思） .box{width:300 height:200} 2、设置 box 内的文字内容部分 css 样式命名为 yangshi，并设置背景为蓝色， 宽度为 120px，居右浮动 .yangshi{ width:120 float: background:#0066FF;}
3、设置图片居左浮动 div+css 样式 img { float} 4、body 内的 div 布局，代码如下 &div class=&box&& &div class=&yangshi&&我是 www.divcss5.com 网站，测试内容&/div& &img src=&demo.gif& /& &/div& 说明：这里 img 标签是链接外部图片，图片名为 demo.gif 最终演示结果截图
CSS 实验二 接下来我们演示使用 div+css 让这里小图片居右（上个例子是居左），蓝色背景 文字内容区居左（上个例子是居右）(扩展 css 居中)。这里我们只需要改变 yangshi 的 float:为 float:left 和图片 css 样式 img { float}为 img { float} CSS 代码如下.box{width:300 height:200} .yangshi{ width:120 float: background:#0066FF;} img{ float:}
html 中的 css 代码和内容不变 最终演示结果截图如下：
希望通过以上两个 css 实例对你认识 float 有帮助。希望大家多少实际操作实践 试试！
css font _ css 文字 DIV+Css 开发中设置字体常用 css 属性单词英文 css font-可进入 CSS 手册查看 更详细 CSS 文字知识 font、font-family(字体)、font-size（字大小）、font-style（字样式）、 font-weight（加粗）、text-decoration（下划线）、font-variant（字母大小 写）、text-transform（英文大小写）、letter-spacing（间隔）
接下来，我们一一实例讲解通过 css 文字控制方法 1、字体大小使用到 font-size，实例如下 TOP
首先设置了 font-size 的值为 36px,则下面结果显示字体比较大。2、 文字的颜色使用 css 中 color 颜色属性通过 color 更样式值设置文字样式的颜 色为红色 TOP
TOP 3、Css 来控制文字的下划线方法 css font，用到 text-decoration 可以进 css 手册了解对应值，你还可能还希望了解 css 链接，css 超链接样式、css 下
TOP 4、文字的间隔-进入详细的 CSS 字间距了解 TOP 5、文字的字体-用到 css 样式属性 font-family，字体设置图例如下
一般 font-family 字体可以跟常见的“宋体”，“新宋体”，“黑体”，注意的是不能自 己设置不参加的字体样式， 虽然在自己电脑上可能自己设置字体能表现出了，但 是一般电脑用户都没有添加字体的，所以在这里字体只能设置常见，系统自带的 字体，而不能设置自己安装的字体。电脑自带字体，和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif 等 TOP 6、文字的上下行间距，使用到 css 文字设置单词 line-height，这里设置 line-height:50
可以看到演示 css font 文字段“我是被 css 控制文字样式演示。”离上下文字间隔 距离是通过 line-height 来实现。也许你需要了解 br 和 p 的区别。TOP 7、字体样式（斜体）使用到 css 样式中 font-style 标签设置如 font-styleitalic,当然可以使用&em&标签将文字变为斜体
TOP 8、字加粗方式-可以直接对需要加错文字前加&b&文字后加&/b&或 &strong&&/strong&来实现，对文字的加粗，这里你可以用 css 来控制对文字加 粗。这里用到 font-weight 来设置如 font-weight:
这里 font-weight 的值可以为 100-900 不等的方式为值，值越大字体越粗，如果 值为 bold 则为正常加粗，同使用 b 或 strong 一致效果。TOP 9、英文字、字母大小写 css font。使用 css 中 font-variant 字母全大小， 如 font-variant:small-，选择性大小写 text-transform 如 text-transform:开头第一个字母大写。
text-transform 语法 text-transform none | capitalize | uppercase | lowercase 参数none 无转换发生 capitalize 将每个单词的第一个字母转换成大写，其余无转换发生 uppercase 转换成大写 lowercase 转换成小写
font-variant 语法 font-variant normal | small-caps 参数normal 正常的字体 small-caps 小型的大写字母字体 提升与扩展思维 css font 代码：font:12px/1.5 Arial, Helvetica, sans- 一般常用以上代码定义一个网页的文字的 css 样式意思， 这段代码以上是字体的 大小是 12px， line-height 为 1.5 倍字体尺寸， 字体是 Arial, Helvetica, sans-serif。Css font 提升图例讲解
这样一定义可以节约很多代码，使用更简便以上即是 div css 网站为大家通俗的 介绍 css font，css 文字相关知识与实例图讲。CSS 加粗知识与 CSS 加粗实例 DIV+CSS 基础知识 CSS 加粗这里指的是通过 DIV CSS 控制对象的加粗。使用 CSS 属性单词 font-weight 对象值：从 100 到 900，最常用 font-weight 的值为 bold font-weight 参数normal 正常的字体。相当于 number 为 400。声明此值将取消之前任何设置 bold 粗体。相当于 number 为 700。也相当于 b 对象的作用 bolder IE5+ 特粗体 lighter IE5+ 细体 number IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 详细基础加粗知识请进 CSS 手册中的 font-weight 手册。Html 常规加粗标签 以前 html 直接对对象加粗的标签如下&b&&/b&或&strong&&/strong&两者效果相同。加粗实例，代码如下：
&strong&我被加粗&/strong&&br /& &b&我也被加粗了&/b&&br/& 我未被加粗 html 加粗实例截图：
CSS 加粗基础技巧实例 CSS 代码.yangshi1{ font-weight:bold} .yangshi2{ font-weight:800} Div html 代码&span class=&yangshi1&&我被加粗&/span&&br /& &span class=&yangshi2&&我也被加粗了&/span&&br /& 我未被加粗 CSS 加粗结果演示：
说明此图为 CSS 加粗实例片段代码和结果图。这里通过 CSS 来控制加粗文字 方式来加粗对象。所以一般对文字对象加粗标题加粗即可使用此方法对其加粗。总结与推荐1、在 html 对对象直接加粗可以用&b&或&strong&对其加粗 2、使用 CSS 加粗对象可以使用 font-weight:bold 即可实现加粗。
DIV+CSS 下划线基础 CSS 控制下划线出现用到地方 - TOP 在 DIV CSS 网页中常常使用 CSS 代码来人对象文字内容加上下划线。使用 CSS 属性单词text-decoration -CSS 手册了解/shouce/c_textdecoration.shtml text-decoration none || underline || blink || overline || line-through text-decoration 下划线 CSS 单词值参数none 无装饰 blink 闪烁 underline 下划线 line-through 贯穿线 overline 上划线 二、HTML 常规下划线标签 - TOP 在 HTML 直接使用下滑线标签“U”即可对对象文字加下划线。实例&u&我被 U 标签加下滑线&/u&
三、CSS 控制对象下划线属性样式
下面我们进行使用“U”标签和 text-decoration 进行设置下划线实例对比如下图
四、下划线高级运用 - TOP 我们接下来为大家讲解常见 CSS 超链接,当随便经过时候文字对象被加下划线。代码如下&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&divcss5&/a& &/span& &/p& &/body& &/html&
请将以上代码复制新建 HTML 即可查看该实例样式。更详细超链接讲解请进 DIV CSS 超链接。css 注释_css 注解 什么是 CSS 注解？什么是 CSS 注释？CSS 注释是什么？CSS 注解是什么？ css 注解（css 注解）又被称作 CSS 注释（css 注释）是有 css 文件代码间加 入注释，解释说明意思，就像我们学习语文一样在文言文、诗词、文章用不同颜 色进行批注说明一个道理， 通常情况下 css 注解是不会被浏览器解释或被浏览器 忽略的。CSS 注解作用,CSS 注释作用 css 注解（css 注释）可以帮助我们对自己写的 CSS 文件进行说明，如说明某 段 CSS 代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂 的方便性， 同时在团队开发网页是时候合理适当的注解有利于团队看懂 css 样式 是对应 html 哪里的，以便顺利快速开发 div css 网页。CSS 注解用法，css 注释用法 （css 注解）CSS 注解是以“/*”斜杠一个星号开始，以“*/”星号斜杠结束，注解说 明内容放到“/*”“*/”中间。css 注解――div+CSS 注释示例如下/* www.divcss5.com 的 css 注解实例 css 注释实例 */ /* body 定义 */ body{ text-align: margin:0} /* 头部 css 定义 */ #header{ width:960 height:120} 实例图如下：
css 注解，CSS 注释 注意说明：注解“/*”和“*/”必须以半角英文小写，并且“*”符号不要和注释内容紧挨 在一起，至少需要一个空格位置空着。padding_css padding 用法详解 padding 属性是 css 用于在一个声明中设置所有 padding 属性的简写属性。
Padding 属性包含了 padding left ：左补距离（设置距左内边距） ；padding top：头顶补距离（设置距顶部内边距）；padding right ：右补距离（设置距 右内边距） ；padding bottom ：底补距离（设置距低内边距）。其二维构建 图可见 CSS 属性二维图。
padding 的解剖图
padding left 用法：padding-left:10 这个意思距离左边补距 10 像素，可跟 百分比如（padding-left:10%; 距离左边补 10%的距离）； padding right 用法：padding-right:10 这个意思距离右边补距 10 像素，可 跟百分比如（padding-right:10%; 距离右边补 10%的距离）； padding top 用法padding-top:10 这个意思距离顶边补距 10 像素， 可跟百 分比如（padding-top:10%; 距离顶边补 10%的距离）； padding bottom 用法padding-bottom:10 这个意思距离低边补距 10 像素， 可跟百分比如（padding-bottom:10%; 距离底边补 10%的距离）； 注意 padding 中间的链接“ - ”号，设置距离值时用“ ”并赋予值，并以“ ； ”结 束，并且全部用小写半角字母。如果是左右上下都需要设置 padding 的值时可以简写来实现，以优化 css 。如简写方式有padding:10 意思就是上下左右补丁距离就是 10px（10 像素）等于 padding-top:10 padding-bottom:10 padding-left:10 padding-right:10 一样效果简写； padding:5px 10 意思上下补丁距离为 5px，左右的补丁距离为 10px，等于 padding-top:5 padding-bottom:5 padding-left:10 padding-right:10 一样效果简写； padding:5px 6px 7 意思上补丁距离 5px，下补丁距离为 7PX，左右补丁距离 为 6px，等于 padding-top:5 padding-bottom:7 padding-left:6 padding-right:6 一样效果简写； padding:5px 6px 7px 8 意思上补丁为 5px，右补丁距离为 6px ，下补丁距
离为 7px，左补丁距离 8px，等于等于 padding-top:5 padding-right:6 padding-bottom:7 padding-right:8 一样效果简写； 其中 padding:5px 6px 7px 8 的转法为顺时针即图：
padding 的属性转法图解
上面即是 div+css 网站总结的 padding 的属性与用法。其中 margin 的用与 padding 相同。CSS 外边距 基础知识 - TOP DIV CSS 外边距指 CSS 属性单词 margin， margin 是设置对象四边的外延边距， 没有背景颜色也无颜色。运用地方 - TOP 两个布局之间距离设置。
如上图中“CSS 手册”和“DIV CSS 研教室”黄颜色的背景之间空隙（背景土红）。margin 缺点 - TOP 在使用 CSS margin 的时候容易造成 CSS HACK。解释此属性的时候容易造 IE6 成双倍距离。您可能需要了解 CSS 兼容浏览器知识。使用技巧与 CSS 代码优化 - TOP margin:10 意思就是上下左右元素块距离就是 10px（10 像素）等于 margin-top:10 margin-bottom:10 margin-left:10 margin-right:10 一 样效果简写；
margin:5px 10 意思上下元素块距离为 5px，左右的元素块距离为 10px，等 于 margin-top:5 margin-bottom:5 margin-left:10 margin-right:10 一 样效果简写； margin:5px 6px 7 意思上元素块距离 5px，下元素块距离为 7PX，左右元素 块距离为 6px，等于 margin-top:5 margin-bottom:7 margin-left:6 margin-right:6 一样效果简写； margin:5px 6px 7px 8 意思上元素块为 5px，右元素块距离为 6px ，下元素 块距离为 7px，左元素块距离 8px，等于 margin-top:5 margin-right:6 margin-bottom:7 margin-right:8 一样效果简写； 其中 margin:5px 6px 7px 8 你可以再了解以前 divcss5 介绍 margin 知识/shili/s6.html。CSS 文本 这里讲解 CSS 文本，主要介绍文本字段换行、文本文字间间隔、文本缩进、文 本文字上下排间隔等 DIV CSS 文本样式 DIV CSS 文本知识整理 1、文本字段换行 - TOP html 中使用&br /&和&p& &br /&和&p& 2、文本上下排字间间隔 - TOP 使用 CSS 属性单词：line-height 作用：定义对象行高，后面跟具体的数值和单 位 line-height-DIV+CSS 示例div {line-height:22 } 即定义行高为 22px 3、CSS 文本缩进 - TOP 使用 CSS 单词：text-indent 作用：设置对象中的文本的缩进，后面也跟具体数 值和单位 text-indent DIV+CSS 示例div { text-indent 25 } 即定义对象内开头的文字往后缩进 25px 效果如下：
4、文本文字间间隔 - TOP 使用单词 letter-spacing 作用：设置对象内文本字与字之间间距距离，后跟具体 数值和单位 CSS 教程示例div {letter-spacing:5 } 即定义字与字之间距离为 5px
更多学习方法 - TOP 更多 CSS 单词可进入 CSS 手册查看-知识+CSS 实例。CSS 颜色 认识 CSS 颜色（CSS color） - TOP 这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色 2、颜色规范与颜色规定：网页使用 RGB 模式颜色 颜色基础知识 - TOP
网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动 感（特别是超链接中运用）、美观之用，同时颜色也是各种各样网页的样式表现 元素之一。传统的 html 颜色与 w3c 标准下的 css 颜色对比和 DIV CSS 运用颜色 1、文字颜色控制一样- TOP 传统 html 和 css 文字颜色相同使用“color：”+“RGB 颜色取值”即可，如颜色为 黑色字即对应设置 CSS 属性选择器内添加“color:#000;”即可。2、网页背景颜色设置区别- TOP 传统设置背景颜色使用“bgcolor=颜色取值”， CSS 中则“background:”+颜色取 而 值。例如：设置背景为黑色，传统 Html 设置，即在标签内加入“bgcolor=�&” 即可实现颜色为黑色背景，如果在 W3C 中即在对应 CSS 选择器中始终
“background:#000”实现。3、设置边框颜色区别- TOP 传统“bordercolor=取值”，CSS 中“border-color:”+颜色取值。例如：在传统 html 直接在 table 标签加入“bordercolor=�&”即可，在现在 CSS 中设置 “border-color:#000;”即可让边框颜色为黑色，同时记得对包括设置宽度和样式 （虚线、实现）。DIV+CSS 颜色值扩展知识颜色值是一个关键字或一个数字的 RGB 规范。16 个关键字是采取从 Windows 的 VGA 调色板水色 ， 黑色 ， 蓝色 ， 紫 红色 ， 灰 ， 绿 ， 灰 ， 褐红色 ，藏青色， 橄榄色 ， 紫色 ， 红色 ， 银 色 ， 青色 ， 白色 ， 黄色 。RGB 颜色给出了四种方法之一- TOP
1、#rrggbb（ 如 ，＃00cc00） （强烈推荐使用此表示颜色取值） 2、#的 RGB（ 如 ，＃0c0） 3、RGB（十中，x，x）的 x 是一个包容性的 0 和 255 之间的整数（ 如 的 RGB （0,204,0）） 4、 RGB （?％， ?％， ?％） 其中 y 是一个包容性的数量介于 0.0 和 100.0 如 ， （ 的 RGB（0％，80％，0％）） 以下是 RGB 颜色表- TOP
当然一般的网页开发软件都有颜色取值器：
网页开发软件 DW 软件中 CSS 取色器 用 CSS 控制超链接文字样式 本文将讲解通过 css 样式或通过 css 来控制超链接样式。这里主要讲文字类型的 超链接，超链接的样式包括通过 CSS 来控制设置超链接有无下划线、超链接文 字颜色等样式。
什么是超链接？ 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网 页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址， 一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一 段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显 示在浏览器上，并且根据目标的类型来打开或运行。超链接的代码 &a href=&/& target=&_blank& title=&关于 div css 的网站 &&DIV+CSS&/a& 解析如下href 后跟被链接地址目标网站地址这里是 / target _blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) title 后跟链接目标说明，也就是超链接被链接网址情况简要说明，或标题 CSS 可控制超链接样式-css 链接样式如下 a:active 是超级链接的初始状态 a:hover 是把鼠标放上去时的状况 a:link 是鼠标点击时 a:visited 是访问过后的情况 超链接样式案例 1、通常对全站超链接样式化方法 a{color:#333;text-decoration: } //对全站有链接的文字颜色样式为 color:#333;并立即无下划线 text-decoration: a:hover {color:#CC3300;text-decoration:}//对鼠标放到超链接上文字 颜色样式变为 color:#CC3300;并文字链接加下划线 text-decoration: 2、通过链接内设置类控制超链接样式 css 方法 案例超链接代码&a href=&/& class=&yangshi&&CSS&/a& 对应 CSS 代码 a.yangshi{color:#333;text-decoration: } a.yangshi:hover {color:#CC3300;text-decoration:} 通过这样的设置可以控制链接内的 css 类名为“yangshi”超链接的样式 3、通过对应超链接外的父级的 css 类的 css 样式来控制超链接的样式 案例超链接代码&div class=&yangshi&&&a href=&/&&CSS&/a&&/a& 对应 CSS 代码
.yangshi a{color:#333;text-decoration: } .yangshi a:hover {color:#CC3300;text-decoration:} 这里值得注意的是 a.yangshi 与.yangshi a 的样式 css 代码区别 这里就是常见的通过 div css 来对超链接样式设置案例及分析。DIV CSS 优化 一、CSS 代码优化地方1、border(CSS 边框)简写border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000; 可以简写为：border:1px solid #000; 2、padding（CSS padding）简写padding-top:1padding-right:2padding-bottom:3padding-left:4 可简写为：padding:1px 2px 3px 4 padding-top:1padding-right:1padding-bottom:1padding-left:1 可简写为：padding:1 3、margin 简写 margin-top:1margin-right:2margin-bottom:3margin-left:4 可简写为：margin:1px 2px 3px 4 margin-top:1margin-right:1margin-bottom:1margin-left:1 可简写为：margin:1 4、background 简写 background-color:#000;可以简写为 background:#000; background-image:url(图片地址) 可简写为：background:url(图片地址) 5、font 简写 font-size:12 line-height:12 font-family:Arial, Helvetica, sans- 可简写为：font:12px/12px Arial, Helvetica, sans-
二、CSS 重用优化 这里主要介绍是 CSS 代码的共用属性提取来达到节约代码、维护方便，CSS 实 例如下.yangshi_a{ width:100 height:20 text-align: float: font-size:24} .yangshi_b{ width:100 height:20 text-align: float: font-size:24} 他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能 需要了解 CSS 居中)，我们就可以提取他们相同属性
优化后.yangshi_a ,.yangshi_b{ width:100 height:20 text-align: float: font-size:24} .yangshi_b{text-align: } 注意观察以上代码，自己理解，不懂可到 CSS 论坛提出问题。CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别，接下来再简单介绍 CSS id 与 CSS class 区 别与用法。
CSS id 知识在一个网页里 ID 只能使用一次。当然即使一个 id 在一个网页内被使用多次，其 CSS 样式仍然可以实现生效，但是一般规定 W3C 标准是使用一次。因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作、表单传值等特性所以区 别于一个 class 可以使用多少的次， 而一个 CSS 命名的 id 只能使用一次避免一 些特定动作、传的表单值的兼容性特性错误即使没有其它 JS 脚本动作、表单传 值特性但是我们也一定执行一个页面只能使用一次。id 选择器以 &#& 来定义，命名 CSS 选择器。定义命名 css id 选择器例子#yangshi1{color:#F00;}定义红色 www.divcss5.com 实例 #yangshi2{color:#0F0;}定义绿色 对应 html 中 div 引用 &div id=&yangshi1&&我颜色为红色&/div& &div id=&yangshi2&&我颜色为绿色&/div& 一个 div 标签的定义只能使用一个 id 如&div id=&yangshi1& id=&yangshi2&&www.divcss5 测试内容&/div& 或 &div id=&yangshi1 yangshi2&&www.divcss5 测试内容&/div& 两个都是不正确的，并且 CSS 样式属性也不能生效- 成为 CSS 失效之一。
CSS class 知识与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用。Class 选择器定义以“.”来定义。定义 css class 选择器例 子.yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28}定义文字 大小为 18px 对应 html 中 div+css 引用&div class=&yangshi1&&我颜色为红色&/div& &div class=&yangshi2&&www.divcss5.com 我字体大小为 28px&/div& &div class=&yangshi1 yangshi2&&我颜色为红色文字大小为 28px&/div& 以上即是“yangshi1”“yangshi2”类的正确使用方法 扩展知识：能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法&div class=&yangshi1& class=& yangshi2&&我将无效&/div& 这样的引用方法即是错误的引用方法，同样可以得出一个只能出现一个&class=& 如果出现多个 css 类要应用到一个 div 标签内， 即可以使用&div class=&yangshi1 yangshi2&&来应用。一个 div 标签内运用 id 和 class 是可以的.yangshi1{... ...} #yangshi2{... ...} .yangshi3{... ...} &div class=&yangshi1& id=&yangshi2&&这样是可以的也是正确的. &div class=&yangshi1 yangshi3& id=&yangshi2&&同样是正确的可取的。总结本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用、需要注意地方、 正确运用引用方法。通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点。CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别，接下来再简单介绍 CSS id 与 CSS class 区 别与用法。
CSS id 知识在一个网页里 ID 只能使用一次。当然即使一个 id 在一个网页内被使用多次，其 CSS 样式仍然可以实现生效，但是一般规定 W3C 标准是使用一次。因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作、表单传值等特性所以区 别于一个 class 可以使用多少的次， 而一个 CSS 命名的 id 只能使用一次避免一 些特定动作、传的表单值的兼容性特性错误即使没有其它 JS 脚本动作、表单传 值特性但是我们也一定执行一个页面只能使用一次。id 选择器以 &#& 来定义，命名 CSS 选择器。定义命名 css id 选择器例子#yangshi1{color:#F00;}定义红色 www.divcss5.com 实例 #yangshi2{color:#0F0;}定义绿色 对应 html 中 div 引用 &div id=&yangshi1&&我颜色为红色&/div& &div id=&yangshi2&&我颜色为绿色&/div& 一个 div 标签的定义只能使用一个 id 如&div id=&yangshi1& id=&yangshi2&&www.divcss5 测试内容&/div& 或 &div id=&yangshi1 yangshi2&&www.divcss5 测试内容&/div& 两个都是不正确的，并且 CSS 样式属性也不能生效- 成为 CSS 失效之一。CSS class 知识与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用。Class 选择器定义以“.”来定义。定义 css class 选择器例 子.yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28}定义文字 大小为 18px 对应 html 中 div+css 引用&div class=&yangshi1&&我颜色为红色&/div& &div class=&yangshi2&&www.divcss5.com 我字体大小为 28px&/div& &div class=&yangshi1 yangshi2&&我颜色为红色文字大小为 28px&/div& 以上即是“yangshi1”“yangshi2”类的正确使用方法
扩展知识：能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法&div class=&yangshi1& class=& yangshi2&&我将无效&/div& 这样的引用方法即是错误的引用方法，同样可以得出一个只能出现一个&class=& 如果出现多个 css 类要应用到一个 div 标签内， 即可以使用&div class=&yangshi1 yangshi2&&来应用。一个 div 标签内运用 id 和 class 是可以的.yangshi1{... ...} #yangshi2{... ...} .yangshi3{... ...} &div class=&yangshi1& id=&yangshi2&&这样是可以的也是正确的. &div class=&yangshi1 yangshi3& id=&yangshi2&&同样是正确的可取的。总结本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用、需要注意地方、 正确运用引用方法。通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点。css li 讲解 Css li 是使用 css 来控制 li 的样式-css 列表，如 li 列表的以点为开头，或图片 开头的列表形式。Li 的基础知识 Li 是 html 的基本元素标签。&li& 标签是用于定义列表项目。&li& 标签可用在有序列表 (&ol&) 和无序列表 (&ul&) 中。在 W3C 标准下 li 不能单独使用，需要与&ol&或&ul&配合使用，使用范例&ol& &li&div+css 范例&/li& &li&div+css 范例之 li&/li& &/ol& &ul& &li&div+css 范例&/li& &li&div+css 范例之 li&/li& &/ul& 以上代码效果如下图：
Css li 实例,li，ol li，ul li 的用法 经过实例演示知道了 li 的默认有序和无序的 css 样式，有序 ol 的样式是以阿拉 伯数字 1、2、3 为递增列表，而无序的 ul 的 CSS 样式是以一个圆黑点的列表形 式。&li&兼容：所有的浏览器都支持兼容。Css li 的样式引导 无论是有序还是无序的 li 列表，在 div+css 开发的时候都需要对 li 进行设置 css 样式。一般对其设置代码如：设置 li 的 list-style 样式。CSS 父级子级 认识了解 - TOP 简单讲 CSS 父级 CSS 子级是相对而言，如一个 DIV “A”被另外一个 DIV “B”包 裹着，这样我们就可以让我 B 是 A 父级，同样一个道理 举例说明- TOP DIV CSS 父级子级说明例子CSS 代码 .yangshi{...} .yangshi .yangshi_a{ ...} .yangshi .yangshi_b{ ...}
Div 代码 &div class=&yangshi&& &div class=&yangshi_a&&内容 a&/div&
&div class=&yangshi_b&&内容 b&/div& &/div& 以上 div+css 代码这里我们就可以认为 yangshi_a 父级（上一级）是 yangshi。这样我们就可以利用 CSS 指针属性在 div css 中,最终 CSS 样式可以有相同命名 的属性选择器的，但是赋予不同的值。这样我们通过.yangshi .yangshi_a 一看即可知道 yangshi_a 的父级是 yangshi 认识 CSS 父级子级目的- TOP
我们搞清 div css 之间父级自己关系，目的也是为我们维护和查找。CSS 指针 什么是 CSS 指针？这里指针是指属于与被属于的关系 如.yangshi .yangshi_a{...} 对于 yangshi_a 是 yangshi 指向的样式 我们可以作 1 个实验来理解此 CSS 指针 是什么 原 CSS div 样式 .yangshi{ width:300 height:50 border:1px solid #F00; margin:0 text-align:} .yangshi .yangshi_a{ float: width:30 border:1px dashed #333;} .yangshi .yangshi_b{ float: width:50 border:1px dashed #333;}
&div class=&yangshi&& &div class=&yangshi_a&&内容 a&/div& &div class=&yangshi_b&&内容 b&/div& &/div& &div class=&clear&&&img src=&images/s.gif& /&&/div& 浏览器显示结果：
就我们以上实例来做 我们将.yangshi .yangshi_b{...} 改为.yangshic .yangshi_b{...} 得到 .yangshic .yangshi_b{ float: width:50 border:1px dashed #333;} 然后你浏览下结果
CSS 指针效果 是的 是不是感觉 yangshi_b 虽然我们 在 DIV 使用 class 调用了但是失效了 怎么多中间的虚线了 那就是因为 DIV 独占一行的特性出来了 而&div class=&yangshi_b&&内容 b&/div& 失效了 当然你会看到
是的 是因为 CSS 指针属性，看到改后 yangshi_b 可以理解父级（yangshic）不存 在 （或 html 中改后 yangshi_b 父级是 yangshi 而不是 yangshic 所以为导致 yangshic 指针到 yangshi_b 的样式失败） 这个 CSS 指针我们可以很好利用 比如以后我们统一命名 比如在一个网页中很多栏目标题我们就以.titles 命名 我 们可以利用 CSS 指针给他赋予不同父级 在不同地方使用并赋予不同 CSS 样 式，利用这一特点 让我们维护更加容易，一看此命名就知道此处是某栏目标题 意思 DIV CSS 图片_CSS img css 图片_DIV CSS 图片_CSS img 这里为大家介绍的是 DIV CSS 对 img 图片控制。我们常常会遇到以下情况1、img 图片多了边框，特别是链接后的图片带边框 2、图片超出撑破 DIV 下面我们通过 CSS 来解决这 2 个问题。1、img 图片多了边框，特别是链接后的图片带边框
有边框的图片 根据以上图，我们对图片加链接，结果图片出现了边框， 解决方法我们只需在初始化 IMG 标签 CSS 即可 img{ padding:0; border:0;} 加入此 CSS 即可消除边框
CSS 去掉图片边框效果 2、图片超出撑破 DIV 我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。解决办法 使用 CSS 控制改对象 IMG 标签宽度即可，假如该对象为.yangshi 设置宽度为
500px，那我们就只需设置.yangshi img{max-width:500}但是在 IE6 中 max-width 是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度， 让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站 都是这样解决， 一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打 开网页。总结1、一个网页中难免有图片，这时我们需要初始化 img 标签即：img{ padding:0; border:0;} 2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度 小， 同时还可以对该对象加入 overflow:hidden 属性，即隐藏超出内容包括图片。px em pt 单位区别 PX\EM\PT 单位介绍 - TOP px 单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而 言的国内推荐； em 单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比 较多； pt 单位名称为点（Point），绝对长度单位一般老版本的 table 使用长度大小单 位但是现在基本上没有使用。1. 以前 IE 无法调整那些使用 px 作为单位的字体大小,但现在几乎 IE 都支持 在 这里也推荐使用 PX 作为单位; 2. 国外的大部分网站能够调整的原因在于其使用了 em 作为字体单位; 3. Firefox 能够调整 px 和 em， 但是 96%以上的中国网民使用 IE 浏览器(或内核)。px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的， QQ 截图也是使用 PX 作为长度宽度单位。em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的 字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em 与 px 换算 - TOP 任意浏览器的默认字体高度 16px（16 像素）。所有未经调整的浏览器都符合1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算， 需要在 css 中的 body 选择器中声明 font-size=62.5%，这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来 的 px 数值除以 10，然后换上 em 作为单位就行了。em 单位有如下特点- TOP
1. em 的值并不是固定的;
2. em 会继承父级元素的字体大小。我们在写 CSS 的时候如果要用 em 为单位，需要注意两点1. body 选择器中声明 Font-size=62.5%; 2. 将你的原来的 px 数值除以 10，然后换上 em 作为单位; 3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。也就是避免 1.2 * 1.2= 1.44 的现象。比如说你在#content 中声明了字体大 小为 1.2em，那么在声明的字体大小时就只能是 1em，而不是 1.2em, 因为此 em 非彼 em，它因继承#content 的字体高而变为了 1em=12px。但是 12px 汉字例外，就是由以上方法得到的 12px(1.2em)大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小，而是稍大一点。这个问题 Jorux 已经 解决， 只需在 body 选择器中把 62.5%换成 63%就能正常显示了。原因可能是 IE 处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。推荐网页单位 - TOP 所以为了单位换算错误推荐使用 PX（像素）作为网页制作单位。以上为大家介绍了 px em pt 单位，及换算方式，一般现在我们使用长度单位都 以 px 为长度单位。这里我们也推荐使用以 px（像素）为网页的尺寸长度单位， 符合浏览器的像素单位，同时也为了方便计算长度尺寸。DIV CSS display (block none inline)属性的用法教程 在一般的 CSS 布局制作时候，我们常常会用到 display 对应值有 block、none、 inline 这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过 CSS display 知识加实例、图演示讲解方法来学习和了解 DIV CSS display。1、CSS display 使用 TOP 以下为 DIV CSS 运用 dispaly，说明这里 dispaly 值任意 CSS 代码.divcss5{display:none} Html 对应运用&div class=&divcss5&&我是测试内容&/div& 根据以上可以自己 DIV+CSS 下，看看使用结果 2、display 的值有哪些 TOP Css display 值与解释-（详细可见 CSS 手册的 CSS display 手册） 参数block :块对象的默认值。用该值为对象之后添加新行
none :隐藏对象。与 visibility 属性的 hidden 值不同，其不为被隐藏的对象保留 其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after 及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示 3、css display block TOP Display:block 是我们常用的，block 也是 Display 默认的值。解释：该对象随后的内容自动换行。css display block 实例 CSS 代码.divcss5{display:block} Html 对应运用代码&span class=&divcss5&&我的后面文字会换行&/span&我是被前面的 divcss5对应 CSS 属性换行。&span&不会被换行,因为我没有被设置 display:block&/span& 对应结果截图:
说明这里使用 span 作实例，一个被设置 CSS 样式，一个未设置，自己可以对 比被设置 DIV display:block 样式的对象随后的内容被换行。4、css display none TOP 此 display 的 none 值，我们也常常使用，用于隐藏对象内容，被隐藏的对象也 不会占用自身固有宽度高度空间。详情可见 CSS 隐藏讲解：/jiqiao/j55.html 5、css display inline TOP Display:inline,我们常常在 li 中使用它。功能是让 li 排成一排（称：删除行） 。接下来我们以一个未设置 li 列表与一个设置 css Display inline 样式对比实例演 示演示。Css 代码 ul.divcss5 li{display:inline} 解释：ul.divcss5对应 li css 样式属性为 display:inline Html 对应代码&ul& &li&我父级 ul 没有 divcss5样式&/li& &li&我是独行&/li& &li&我是独行&/li& &/ul& &ul class=&divcss5&& &li&我父级 ul 有 divcss5样式&/li& &li&我站成一排&/li& &li&我在 divcss5下 li 站成一排&/li& &/ul& 演示结果图：
说明：设置 css 为 display:inline 的 li 对象，li 被排成一排，而未设置的 li 列表对 象仍然继承原来自身独占一行的 CSS 样式。以上是 DIVCSS5为大家整理和展示的关于 CSS display 常用的属性对应 display none、display inline、display block 值的详细讲解与实例，希望对你有帮助。同 时有什么问题或疑问请到 DIVCSS5的 CSS 论坛发贴讨论、求助。
css 图片_DIV CSS 图片_CSS img 这里为大家介绍的是 DIV CSS 对 img 图片控制。我们常常会遇到以下情况1、img 图片多了边框，特别是链接后的图片带边框 2、图片超出撑破 DIV 下面我们通过 CSS 来解决这2个问题。1、img 图片多了边框，特别是链接后的图片带边框
根据以上图，我们对图片加链接，结果图片出现了边框， 解决方法我们只需在初始化 IMG 标签 CSS 即可 img{ padding:0; border:0;} 加入此 CSS 即可消除边框
2、图片超出撑破 DIV 我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。解决办法 使用 CSS 控制改对象 IMG 标签宽度即可，假如该对象为.yangshi 设置宽度为 500px，那我们就只需设置.yangshi img{max-width:500}但是在 IE6中 max-width 是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度， 让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站
都是这样解决， 一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打 开网页。总结1、一个网页中难免有图片，这时我们需要初始化 img 标签即：img{ padding:0; border:0;} 2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度 小， 同时还可以对该对象加入 overflow:hidden 属性，即隐藏超出内容包括图片。3、使用 css 让大图片不超过网页宽度 让大图片不超过网页宽度，让图片不撑破通过 CSS 样式设置的 DIV 宽度！ 接下来，我们来介绍下网站在开发 DIV+CSS 的时候会遇到一个问题，在发布一 个大图片的时候因为图片过宽会撑破自己设置的 div 宽度的问题。图片撑破布局原因 1、由于浏览器版本低（微软 IE6） 2、没有设置 div 布局的宽度 解决图片超出宽度或撑破 div css 布局方法 1、在文章中发布图片的时候将图片编辑缩小 2、通过对对应 div 的 css 来设置显示的图片最宽宽度 推荐 3、通过 css 对图片设定宽度。通过 css 来解决图片撑破 div 布局案例 通过 css 来控制代码如下(cmcss 是对应父级类名).cmcss {marginwidth600} .cmcss img{max-width100% ! heightauto! width:expression(this.width & 600 ? &600px& this.width)!}这种图片第 一次加载时候图片不能显示 直接通过对对应的 div 内的内容图片宽度设置代码如下.cmcss img{ width:500} 宽度自定，但是不推荐此方法，因为设置后此 div 布 局内的图片将全部宽度为500px，那样将造成图片小的，被放大显示模糊。可以通过对图片设置最宽 css 可以使用 max-width 来设置，但是 IE6不支持，但 是可以使用浏览器的 css hack 来设置代码如下 .cmcss img{max-width:500_width:500} 说明：通过其他浏览器不支持带“_”的 css，但是 IE6支持。刚好可以通过此 css hack 来实现对图片宽度的现在。这里只能克服 IE6显示固定的宽度来符合其它 版本的兼容性。扩展与提高 我们看区别不同浏览器 CSS HACK 的代码区别 FF，IE7，IE6background:*background:green !*background:
你可能要问了，为什么不用“*”来代替“_”来区别 IE6浏览器，这里值得注意的是 ie6和 IE7都会解释和识别“*”的，但是 IE7对 important 的识别具有优先全，所以 IE7在 CSS 代码中有 important 将有优先识别并成为唯一性， 所以在有 important 时候 IE7和 IE6前面都可以用“*”号，但是无论带 important 在前或在后 IE7将识 别为唯一区别 css hack。所以这里没有 important 的时候需要用另外 IE6的 css hack 中“_”小写半角下划线。案例如下（Blue hills.jpg 图片为800像素宽的图片） 代码&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& & 案例-图片不超过设置宽度&/title& &style type=&text/css&& &!-.cmcss img{ max-width:150_width:150} --& &/style& &/head& &body& 原始图片宽度为800PX，设置后如下图为150px &div class=&cmcss&&&img src=&Blue hills.jpg& /&&/div& &/body& &/html&
截图如下：
通过此方法对图片的宽度设置最大宽度为多少，css 代码少方便，推荐此方法来 解决图片撑破 div css 布局的宽度。
二、DIV+CSS 网页布局常用基础知识
CSS 命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 二．常用类/ID 命名规范 页 眉：header 内 容：content 容 器：container 页 脚：footer 版 权：copyright 导 航：menu 主导航：mainMenu 子导航：subMenu 标 志：logo 标 语：banner 标 题：title 侧边栏：sidebar 图 标：Icon 注 释：note 搜 索：search 按 钮：btn 登 录：login 链 接：link 信息框：manage ?? 常 用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对 于二级类/ID 命名，则采用组合书写的模式，后一个单词的首字母应大写诸如“搜索框” 则应命名为 “searchInput” 搜索图标” 、 “ 命名这 “searchIcon” 搜索按钮” 、 “ 命名为 “searchBtn CSS 书写规范及方法 一. 常规书写规范及方法 1. 选择 DOCTYPE：
XHTML 1.0 提供了三种 DTD 声明可供选择过渡的(Transitional):要求非常宽松的 DTD，它允许你继续使用 HTML4.01 的标识(但是要 符合 xhtml 的写法)。完整代码如下严格的(Strict):要求严格的 DTD，你不能使用任何表现层的标识和属性，例如 。完整代码如下框架的(Frameset):专门针对框架页面设计使用的 DTD，如果你的页面中包含有框架，需要 采用这种 DTD。完整代码如下理 想情况当然是严格的 DTD，但对于我们大多数刚接触 web 标准的设计师来说，过渡的 DTD(XHTML 1.0 Transitional)是目前理想选 择(包括本站，使用的也是过渡型 DTD)。因为 这种 DTD 还允许我们使用表现层的标识、元素和属性，也比较容易通过 W3C 的代码校验。2. 指定语言及字符集为文档指定语言为了被浏览器正确解释和通过 W3C 代码校验， 所有的 XHTML 文档都必须声明它们所使用的编 码语言；如常用的语言定义标准的 XML 文档语言定义针对老版本的浏览器的语言定义为提高字符集，建议采用“utf-8” 。3. 调用样式表外部样式表调用页面内嵌法：就是将样式表直接写在页面代码的 head 区。如&style type=”text/css”&&!C body { background
} C& &/style& 外部调用法：将样式表写在一个独立的.css 文件中，然后在页面 head 区用类似以下代码调 用。&link rel=” stylesheet” rev=” stylesheet” href=” css/style.css” type=” text/css” media=”all” /& 在符合 web 标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css 文件而改变 页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所 有文件的样式。4、选用恰当的元素：
根据文档的结构来选择 HTML 元素，而不是根据 HTML 元素的样式来选择。例如，使用 P 元素 来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用 通用的 div 或者是 span； 避免过渡使用 div 和 span。少量、适当的使用 div 和 span 元素可以使文档的结构更加清晰 合理并且易于使用样式； 尽可能少地使用标签和结构嵌套， 这样不但可以使文档结构清晰， 同时也可以保持文件的小 巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视； 5、派生选择器可以使用派生选择器给一个元素里的子元素定义样式， 在简化命名的同时也使结构更加的清 晰化，如.mainMenu ul li {background:url(images/bg.)} 6、辅助图片用背影图处理这里的” 辅助图片” 是指那些不是作为页面要表达的内容的一部分， 而仅仅用于修饰、 间隔、 提醒的图片。将其做背影图处理， 可以在不改动页面的情况下通过 CSS 样式来进行改动， 如#logo {background:url(images/logo.jpg) #FEFEFE no-} 7、结构与样式分离在页面里只写入文档的结构， 而将样式写于 css 文件中， 通过外部调用 CSS 样式表来实现结 构与样式的分离。8、文档的结构化书写页面 CSS 文档都应采用结构化的书写方式，逻辑清晰易于阅读。如&div id=”mainMenu”& &ul& &li&&a href=”#” &首页&/a&&/li& &li&&a href=”#” &介绍&/a&&/li& &li&&a href=”#” &服务&/a&&/li& &/ul& &/div& /*=====主导航=====*/ #mainMenu { width:100%;
height:30 background:url(images/mainMenu_bg.jpg) repeat-x; } #mainMenu ul li { float: line-height:30 margin-right:1 cursor: } /*=====主导航结束=====*/ 9、鼠标手势在 XHTML 标准中，hand 只被 IE 识别，当需要将鼠标手势转换为“手形”时，则将“hand” 换为“pointer” ，即“cursor:” 二．注释书写规范 1、行间注释直接写于属性值后面，如.search{ border:1px solid #/*定义搜索输入框边框*/ background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/ } 2、整段注释分别在开始及结束地方加入注释，如/*=====搜索条=====*/ .search { border:1px solid # background:url(../images/icon.gif) no-repeat #333; } /*=====搜索条结束=====*/ 三．样式属性代码缩写 1、不同类有相同属性及属性值的缩写对于两个不同的类， 但是其中有部分相同甚至是全部相同的属性及属性值时， 应对其加以合 并缩写， 特别是当有多个不同的类而有相同的属性及属性值时， 合并缩写可以减少代码量并
易于控制。如#mainMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:30 overflow: } #subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:20 overflow: } 两个不同类的属性值有重复之处，刚可以缩写为#mainMenu,#subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; overflow: } #mainMenu {height:30} #subMenu {height:20} 2、同一属性的缩写同一属性根据它的属性值也可以进行简写，如.search { background-color:#333; background-image:url(../images/icon.gif); background-repeatno- background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; } 3、内外侧边框的缩写：
在 CSS 中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不 同时也可直接缩写，如.btn { margin-top:10 margin-right:8 margin-bottom:12 margin-left:5 padding-top:10 padding-right:8 padding-bottom:12 padding-left:8 } 则可缩写为.btn { Margin:10px 8px 12px 5 Padding:10px 8px 12px 5 } 而如果当上边与下边、 左边与右边的边框属性值相同时， 则属性值可以直接缩写为两个， 如.btn { margin-top:10 margin-right:5 margin-bottom:10 margin-left:5 } 缩写为.btn {margin:10px 5} 而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如.btn { margin-top:10 margin-right:10 margin-bottom:10 margin-left:10 } 缩写为：
.btn{margin:10} 4、颜色值的缩写当 RGB 三个颜色值数值相同时，可缩写颜色值代码。如.menu { color:#ff3333;} 可缩写为.menu {color:#f33;} 四．hack 书写规范 因为不同浏览器对 W3C 标准的支持不一样， 各个浏览器对于页面的解释呈视也不尽相同， 比 如 IE 在很多情况下就与 FF 存在 3px 的差距，对于这些差异性，就需要利用 css 的 hack 来 进行调整，当然在没有必要的情况下，最好不要写 hack 来进行调整，避免因为 hack 而导致 页面出现问题。1、 IE6、I}
上传时间： 来源：
第一篇:div,css第一天
XHTML CSS 基础知识
欢迎大家学习《十天学会 web 标准》，也就是我们常说的 DIV+CSS。不过这里的 D IV+CSS 是一种错误的叫法，建议大家还是称之为 web 标准。学习本系列教程需有一定 html 和 css 基础， 也就是指您之前做过网页， 会用表格布局。如果您刚开始学习网页制作，不知道什么是表格布局及 html 和 css，建议您先去充电，否 则学习本教程会非常吃力或者根本就听不懂。由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到 web 标准 （div+css）布局，会使用 web 标准制作出常见的页面，这也达到了本教程的目的。本教程多以实例形式循序渐进讲解， 实例涉及到哪些关键点或难点就讲解什么， 较少讲解概 念。因为概念这些东西很难说明白， 或者说明白你也不一定能听懂， 听懂了也不一定能理解。所以把概念留给大家以后再深入研究。由于章节关系，没有把 css 和 css hack 单独分出，只是在用到的时候穿插入讲解了。html 基础和 css 基础只在第一节中介绍了几点重要的。下面我们开始第一天的学习
一、xhtml css 基础知识
首先说一下我们这节课的知识点 1. 文档类型 2. 语言编码 3. html 标签 4. css 样式 5. css 优先级 6. css 盒模型组成 1）文档类型 当我们用 dreamweaver 新建一下 html 格式文档时，查看源代码，会发现代码最上 部有如下这句话：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &/pub/shockwave/cabs/flash/swflash.cab#version=6, 0,0,0& width=&'+ swf_width +'& height=&'+ swf_height +'&&'); document.write('¶m name=&movie& value=&/go/getflashplayer& /&'); document.write('&/object&'); &/script& &div id=&login&&&span&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/btn_login1.gif& alt=& 个 人 用 户 登 录 & width=&131& height=&39& /&&/a&&/span&&a href=&#&&&img
src=&http://www.aa25.cn/upload//images/btn_login.gif& alt=& 经 销 商 登 录 & width=&131& height=&39& /&&/a&&/div& &/div& &div id=&hot_news&& &div id=&news_top&& &h1&苹果 iphone 4 手机将于 9 月 25 日在中国上市&/h1& &p&日前中国联通正式宣布将于 9 月 25 日 9 时在中国大陆市场全面推出 iPhone4，并为 iPhone4 用户量身定制了合约计划。&/p& &/div& &div id=&news_list&& &ul& &li&&span&9-22&/span&&a href=&#&&纯 CSS 实现三列 DIV 等高布局&/a&&/li& &li&&span&9-22&/span&&a href=&#&&HTML 元素的 ID 和 Name 属性的区别 &/a&&/li& &li&&span&9-22&/span&&a href=&#&&完美兼容 ie6,ie7,ie8 以及 firefox 的 css 透 明滤镜&/a&&/li& &li&&span&9-22&/span&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式 &/a&&/li& &li&&span&9-22&/span&&a href=&#&&javascript 为 FF 设置首页&/a&&/li& &li&&span&9-22&/span&&a href=&#&& 复 制 到 系 统 剪 贴 板 之 IE,ff 兼 容 版 &/a&&/li& &/ul& &/div& &/div& &/div& &div id=&index_pic&& &h2&&span&&/span&&/h2& &ul& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li&
&li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &li&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic4.gif& alt=&产品名称& width=&107& height=&87& /&产品名称&/a&&/li& &/ul& &/div& &div id=&index_box&& &div class=&box&& &h2&&a class=&more& href=&#&&更多..&/a&&span&企业历史&/span&&/h2& &div class=&box_con&& &dl& &dt&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic5.gif& alt=&多角度对比 苹果 iPod 系列真 机& width=&91& height=&70& /&&/a&&/dt& &dd&&a href=&#&&&strong&多角度对比 苹果 iPod 系列真机&/strong&&/a& 导言北京时间 9 月 2 日凌晨 1 点苹果在旧金山举行新品发布会， 数码特派 记者在美国现场直播&&/dd& &/dl& &ul& &li&&a href=&#&&纯 CSS 实现三列 DIV 等高布局&/a&&/li& &li&&a href=&#&&HTML 元素的 ID 和 Name 属性的区别&/a&&/li& &li&&a href=&#&&完美兼容 ie6,ie7,ie8 以及 firefox 的 css 透明滤镜&/a&&/li& &li&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式&/a&&/li& &li&&a href=&#&&javascript 为 FF 设置首页&/a&&/li& &li&&a href=&#&&复制到系统剪贴板之 IE,ff 兼容版&/a&&/li& &li&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式&/a&&/li& &/ul& &/div& &/div& &div class=&box box1&& &h2&&a class=&more& href=&#&&更多..&/a&&span&企业历史&/span&&/h2& &div class=&box_con&& &dl& &dt&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/pic5.gif& alt=&多角度对比 苹果 iPod 系列真 机& width=&91& height=&70& /&&/a&&/dt& &dd&&a href=&#&&&strong&多角度对比 苹果 iPod 系列真机&/strong&&/a& 导言北京时间 9 月 2 日凌晨 1 点苹果在旧金山举行新品发布会， 数码特派 记者在美国现场直播&&/dd& &/dl& &ul& &li&&a href=&#&&纯 CSS 实现三列 DIV 等高布局&/a&&/li& &li&&a href=&#&&HTML 元素的 ID 和 Name 属性的区别&/a&&/li& &li&&a href=&#&&完美兼容 ie6,ie7,ie8 以及 firefox 的 css 透明滤镜&/a&&/li&
&li&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式&/a&&/li& &li&&a href=&#&&javascript 为 FF 设置首页&/a&&/li& &li&&a href=&#&&复制到系统剪贴板之 IE,ff 兼容版&/a&&/li& &li&&a href=&#&&DIV+CSS 实现放大镜效果的分页样式&/a&&/li& &/ul& &/div& &/div& &/div& &/div& &div id=&side&& &div class=&side_box&& &h2&&strong&产品&/strong&导购&/h2& &div class=&side_con product&& &ul& &li&&strong&语音业务：&/strong&&a href=&#&&普通电话&/a& | &a href=&#&&语音 数字中继&/a&&/li& &li&&strong&语音业务：&/strong&&a href=&#&&普通电话&/a& | &a href=&#&&语音 数字中继&/a&&/li& &li class=&product3&&&strong&语音业务：&/strong&&a href=&#&&普通电话&/a& | &a href=&#&&语音数字中继&/a&&/li& &/ul& &/div& &/div& &div class=&side_box&& &h2&&strong&使用&/strong&问答&/h2& &div class=&side_con ask&& &dl& &dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多， 使用方法更加简便...&/dd& &/dl& &dl& &dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一...&/dd& &/dl& &dl& &dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...&/dd& &/dl& &dl& &dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...&/dd& &/dl& &dl&
&dt&&a href=&#&&最新出的这个产品如何使用？&/a&&/dt& &dd&该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多， 使用方法更加简便...&/dd& &/dl& &/div& &/div& &div class=&side_box&& &h2&&strong&联系&/strong&我们&/h2& &div class=&side_con contact&&&a href=&#&&&img src=&http://www.aa25.cn/upload//images/tel.gif& alt=& 联 系 我 们 & width=&222& height=&112& /&&/a&&/div& &/div& &/div& &/div& &div class=&clearfloat&&&/div& &div id=&footer&& &dl& &dt&&a href=&#&&关于我们&/a& || &a href=&#&&产品目录&/a& || &a href=&#&&联系我 们&/a& || &a href=&#&&友情链接&/a& || &a href=&#&&反馈问题&/a& || &a href=&#&&广 告合作&/a&&/dt& &dd&Copyright & 2007 - 2010 aa25.cn All Rights Reserved&br /& 标准之路 版权所有 京 ICP 备
号&/dd& &/dl& &/div& &/div& &/body& &/html&
提示：可以先修改部分代码后再运行
点击此处下载实例源代码及 psd 源文件 九、相对路径和相对于根目录路径 上边的例子学完后，你会发现在 html 中插入的图片路径是 images/pic4.gif，而在 c ss 中插入的图片路径是这样的../images/nav_bg.gif， 后者比前者多出了../， 这是什么意 思呢？ 这就是相对路径和绝对路径，../表示返回上一级，因为 css 文件在 css 文件夹里，图 片在 images 文件夹下，那么 layout.css 就需要返回上一级找到 images 文件夹才能找到 相应的图片。直接文件夹名或是./开头表示和当前平级，因为 index.html 和 images 文件 夹平级。不管是带../还是不带，这种写法都叫相对路径；另一种叫相对于根目录路径，它 的写法必须以/开始，意思是从根目录开始一级一级向下查找，不管在哪里，要使用 pic4. gif 这个图片，路径都必须是/images/pic4.gif；还有一种写法叫绝对路径，是以 http://
加域名开始的，这个不多多说了。使用相对路径时，当根目录放到一个二级目录下时，文件仍然可以正常访问，而使用 相对于根目录路径时， 其中一个页面放到其它位置时， 照样能关联么相关的图片和其它文件， 比如：本例如果用相对于根目录路径的话，把 index.html 放到一个文件夹下后，还是可以 正常访问的。总之两种方法各有优劣，根据你的需要采用一种合适的方法。相对路径和相对 于根目录路径是可以相互更改的， 在站点管理――编辑――高级设置的本地信息里有链接相 对于，如下图，默认为文档（就是所说的相对路径） ，也可以改为站点根目录，相对路径一 般为直接目录名，需要返回上级时用../，向上返回两级时用../../；相对于根目录路径始终 以/开头，不管该文件现在在哪一级，它都是以根目录开始向下找。
div+css 网页标准布局实例教程（三）
文章出处：标准之路(http://www.aa25.cn/div_css/913.shtml) 编辑：杨雨晨思 前边两节学完后，前台工作基本上完成了，下边的任务该程序员添加程序了。为什么 说是基本完成呢？因为要做的工作还很多， 不但要把首页做出来， 其它的列表页详细页等页 面也得做。还要配合程序员把整个网站完成，这样才能呈现给用户。应部分同学的要求，讲
解一下程序怎么添加的，这样和程序员配合起来也更默契，还有怎么连接 FTP 上传下载， 后期出现问题怎么调试等等。添加程序部分只需要了解就行了，连接 ftp 上传下载，页面调 试查找问题这部分一定要掌握哟。
创建服务器环境 建立数据库 本地和远程服务器连接 php 读取数据 页面调试及浏览器兼容
一、创建服务器环境 程序语言有多种，常用的有 asp、php、jsp 等，之前做的 html 页面，可以直接在浏 览器上运行，因为 html 是客户端语言，而这些是服务器端语言，也就说你所看到的页面是 经过服务器加工之后传输过来的， 不管使用哪种语言环境， 最终目的就是把数据库的数据读 取出来展示到网页上。不同的语言有不同的运行环境，要想运行这些语言，首先要创建一个 适应他们的环境，下边以 php 为例，讲解一下 php 环境的搭建。
点击下载：WampServer 5 集成环境 下载 wamp 安装完成后，php 运行所需的 Apache、 MySQL、PHP 5 等都具备了， 安装完成后需要启动 WampSeaver，启动后会在托盘区显示一图标（如上图） ，当它正常 运行后，说明服务器环境已经创建成功了。接下来打开如上图中的 php.ini 文件，找到 sh ort_open_tag，把值改为 On，作用是开启短标签支持，以免后边教程中使用短标签时报 错。有关软件的安装，及服务器环境问题本站不做过多介绍，如想详细了解，请百度相关文 章，asp 环境的搭建更简单了，如想知道，也请百度。
二、建立数据库 php 的作用是从数据库读取数据，下面我们就先创建一个数据库，并录入部分数据。点击如上图的 phpMyAdmin，然后会在浏览器中打开数据库。创建一个名为：jiaocheng 的数据库和 news 的表
设置表结构如下：
注意将 ID 字段设置为主键并在额外中选择 auto_increment 选项。表结构创建完后， 选择插入，插入一条数据：
依次插入更多条数据，为后面程序调用做准备，选择性将某些数据插入形象图片，以 便在幻灯处调用。
三、本地和远程服务器连接 只有本地和远程服务器连接后，才能把我们做的页面上传到服务器上来运行。连接的 前提是你知道服务器的地址及网管给你分配的用户名和密码， 有了这些后， dw 的站点― 在 ―管理站点中，选中 jiaocheng，然后编辑，在弹出的对话框中选择服务器选项，然后填 写 ftp 地址，用户名和密码，如果一切正常应该可以顺利连接了，点击测试按钮一下吧，如 果无法连接，就需要查找问题了（下面的截图是 dw cs5 的界面，其它版本略有不同） 。
刚才我们在自己电脑上创建了服务器环境，那么这里的连接就用本地网络了。
设置完后，在文件面板站点上点击右键，选择上传，将文件上传到服务器文件夹中。
完了之后打开浏览器，在地址栏中输入 http://localhost/index.html，就可以访问，或者 直接在 dw 中点击地球图标，也可以直接打开浏览器预览。如果能正常打开页面，说明本地 和服务器连接成功，修改完文件后，把文件上传到服务器上就可以了。如果是协同办公，修
改文件之前一定要先下载，这样才能保证本地的文件为最新，如果你上次修改完之后，别人 又修改了，你没下载，直接修改本地的文件又上传了，那么别人的修改将被覆盖掉，所以一 定要养成好习惯，修改前先下载。
四、php 读取数据 以上的工作都完成后，下面就该用程序读取数据了。首先需要创建一个数据库连接文 件，让 php 程序可以访问数据库，这样才能读取里边的数据，在根目录下创建一个 inc 文 件夹，并创建一个 conn.php 文件，然后打开文件，在源代码里插入如下代码：
&? $conn = mysql_connect (&localhost&,&root&,&&) or die (&数据库连接出错& . mysql_error()); mysql_select_db (&jiaocheng&,$conn); mysql_query(&set names 'gbk'&); ?&
之所以单独创建一下文件，是因为后边很多页面都要用，这样只需包含这个页面即可， 不用每个页面再写这段代码了。数据库连接文件创建好后， 下面就该在 index.html 调用了。注意：这里要将后缀改为 php 才行，如果还是 html 的话，那么它将直接输出，不会经过 服务器加工。接下来打开 index.php，在源代码的最顶部插入如下代码，把 conn.php 文 件包含进来：
&? include(&inc/conn.php&);
记得要把 inc 文件夹上传到服务器上哟。下面就先做“热门新闻”列表吧， 把原来做的# news_list 下的 ul 列表改为如下形式：
&ul& &? $sql=&select * from news order by id desc limit 0,6&; $query=mysql_query($sql); while($row=mysql_fetch_array($query)){ ?& &li&&span&&?=$row['add_time']?&&/span&&a href=&#&&&?=$row['title']?&&/a&&/li& &? }?& &/ul&
第一句是创建一个 sql 查询语句， 表示查询 news 表以 id 的倒序排列且只查询前 6 条， 接下来循环读取出来。上传预览一下吧，是不是变形了，一方面标题太长了，另一方面日期 应该只显示月和日， 日期通过程序只取月日两位， 处理标题有两种方法， 一种是用程序截取， 一种是 css 超出隐藏。下面先把日期给改了，把&?=$row['add_time']?&替换为：&?= date('m-d',strtotime($row['add_time']))?&
把日期改短后，显示正常了，但为了防止以后出现长标题把页面撑乱，让程序员注意 截取一下标题或者你用 css 来实现，css 超出隐藏的话可以给 li 定义高度和 overflow:hid den 属性。得了，从数据库中读取数据出来，就这么简单，下面说一下幻灯部分的实现吧。
和上边的读取方法一样，只不过用 if 判断一下$pic 是否为空，来解决开头没有|的问 题。上传上再预览一下吧，看看是不是显示出来了呢？是吧，已经显示出来了，打开源代码 看看，刚才我们添加的程序部分并没有显示出来，取而代之的是数据库中的数据，这就是程 序的奇妙之处。
好了，有关程序部分就讲这么多了，相信你也该明白是怎么回事了，剩下的你可以自 己对照着制作个试试，如果你想学习程序的话，给大家推荐以前我学过的教程，asp 的话可 以学习 fif 小组的 asp 视频教程，在百度里搜索：fif asp，就出来了，第一个结果便是网易 学院的 fif 视频教程；如果你对 php 感兴趣的话，建议去 php100 中文网，听听张恩民老 师讲解的 php 系列教程，相信很快你也会成为一个程序高手的。五、页面调试及浏览器兼容 在和程序员配合完成网站的过程中或网站上线后，常常会出现一些小问题，比如页面 撑开，显示错乱等，这时候就需要查找问题出在哪里了。查找这些问题，希望大家装上火狐 浏览器（因为它是相对标准的浏览器，这样显得你更专业一些，嘿嘿，最主要是有调试用的 插件） ，装上之后还需要装两个插件：web developer，firebug
插件的下载请点击上图中的获取附加组件，然后输入关键字搜索到后下载安装即可。web developer 作用很强大，如下图所示可以查看当前页面所用到的图片，包括 cs s 中的背景图片，具体使用教程请参看：http://www.aa25.cn/div_css/255.shtml
firebug 这是个更好的一个插件，使用时点击浏览器右下角的萤火虫图标或者按 F12， 会启用这个插件，如需查看某一部分代码，点击插件上的查看页面元素按钮后，鼠标移到网 页上，会出现一个相应的框，当框选中需要查看源代码的元素后点击，在插件区域就显示出 当前区域的代码及样式了，可以禁用某些样式，还可以添加新的样式来查找问题所在。
如上图，先点 1 中的查看页面元素按钮，然后鼠标移动到 2 的地方，将会出现图中所 示的蓝色线框，然后点击鼠标，会在插件中选中 3 位置的代码并在 4 位置出现对该区域生 效的所有样式，即是上边框选部分的代码和样式，当鼠标移动到圈 4 位置时，会出现一个 禁止图标，点击后禁用当前样式，这样便于查找问题所在，另外还可以在后边双击插入新的 样式。另外，如果你装的是 IE8 浏览器，同样具备类似的功能，打开浏览器后，按 F12 键， 即可打开该功能，使用方法和火狐的 firebug 类似。希望大家多多研究，对查找问题能起到事半功倍的效果。不过这些修改只停留在浏览 器层面，不会对你本地和服务器上的文件做任何改动，查找到哪里出问题后，及时在 dw 里 将出错的地方改过来。学会了怎么调试页面后，兼容问题也是一个不容忽视的问题，现在浏览器市场鱼龙混
杂，别的不说，IE 的 6/7/8 版本兼容就够让人头疼了，现在又出了个 IE9，还有火狐、ch ome、opera、Safari 等等，而且标准不统一，一片混乱的状况。从下图中标准之路网站 的访问情况来看，目前 IE6 仍然占最大比重，而 IE6 恰恰也是让设计者最为头疼的浏览器， bug 太多了。鉴于这种混乱情况，目前只用考虑兼容最常用的 IE6/7/8 和 firefox 就可以 了，其它使用人数很少的浏览器可以暂不考虑。只要我们掌握了各个浏览器的特性，避免一 些使它解析错误的写法， 还是不用太多的 css hack 就可以使页面在各个浏览器下显示基本 一致，所以这个需要大家的多观察，多实践，多总结。
因 IE 浏览器的特殊性，一台电脑同时只能装一个版本的 IE 浏览器，不过呢有高人提 供了 IE Tester，把 IE 的几个版本集成到一块，专门供测试兼容使用。大家可以下载安装 一下，测试下页面在各个浏览器下的显示效果。
第一篇:div,cssdiv＋css 教程(入门到精通）
一、div＋css 教程(入门到精通）详细讲解 二、DIV+CSS 网页布局常用基础知识 三、div＋css 常用布局入门 四、div＋css 网站首页布局实例教程
一、div＋css 教程(入门到精通）详细讲解
CSS 高度_css height DIV CSS 高度基础知识 这里的 CSS 高度是指通过 CSS 来控制设置对象的高度。使用 CSS 属性单词 height。单位可以使用 PX，em 等常用使用 PX（像素）为单位。实例.yangshi{height:300}即设置了 yangshi 选择器对象高度为300px。CSS 高度单词：height CSS 最大高度：max-height (IE7及以上版本浏览器支持) CSS 最小高度：min-height (IE7及以上版本浏览器支持) CSS 上下居中：line-height 以上可跟值为数字加单位。Html 初始高度与 DIV+CSS 高度对照 以前 html 直接设置高度 width=&300&这种方式嵌入表格标签内，而且无需带单 位，默认以 px（像素）为单位。实例&table& &tr& &td height=&100&&我的高度为100px&/td& &/tr& &tr& &td height=&50&&我高度为50px&/td& &/tr& &/table& 分别设置了高度为100px 和50px 的两行表格
接下来我们讲解 CSS 高度使用方法及技巧 1、CSS 自适应高度 一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即 可实现此效果。同时也无需使用 height:auto 来实现高度自适应。通常默认情况 下不设置高度，对象高度即是自适应高度。2、固定高度及隐藏超出固定高度的内容 很多时候我需要设置对象固定高度同时让多余的内容不显示出来。解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容） 如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效 果同时设置对象为1px 黑色边框演示， CSS 代码.yangshi{ height:50 width:50 overflow: border:1px solid #666;} Html body 内代码&div class=&yangshi&&www.divcss5.com 演示，内容 测试内容高度超出演示实例，divcss5实例 &/div& CSS 固定高度效果截图3、
说明观看此上图，看出设置固定高度宽度并设置1px 的黑色边框，并且实现内容 未超出设置高度宽度。
禁止溢出设置 CSS 高度、CSS 宽度的 CSS 属性单词及值 overflow: 。3、设置最小高度 使用 CSS 单词：min-height 为什么要设置最小高度？ 有时特别是在文章页面里因为文章内容多少参差不齐， 所以我们可以使用最小高 度设置让左右结构的布局对齐，感觉饱和一点，但是我们又不能设置固定高度， 因为内容可能多可能少，当多的时候自然设置固定高度就不会显示完整内容。这里有个问题就是 IE6不支持最小高度设置（min-height） ，解决办法使用 css hack 方法来解决，大家知道区别不同浏览器时候用的 css hack 中 IE6可以使用 “_”来区别其它浏览器。最小高度运用.yangshi{min-height:50 _height:50}这样就可以解决此问题，说明这里 就不能再使用 overflow:-CSS overflow 设置隐藏超出内容溢出。完整 CSS html 最小高度实例代码&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& & 演示，内容 测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实 例，divcss5实例 &/div& &/body& &/html&
以上是超出内容自动适应高
这里是内容够少，未能充满设置最小高度。无论在 IE6还是 IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设 置。关于 CSS height 高度总结说明这里讲解 CSS height 与 html height 区别及用法，同时讲解了最小高度、自适 应高度、固定高度的设置及运用。
二、CSS 宽度――CSS width 一、宽度基础知识 CSS 宽度是指通过 CSS 样式设置对应 div 宽度，以下我们了解传统 html 宽度、 宽度自适应、固定宽度等宽度知识。传统 Html 宽度属性单词：width 如 width=&300&; CSS 宽度属性单词：width 如 width:300 最大宽度单词：max-width 如 max-width:300 css 手册中了解 max-width/shouce/c_maxwidth.shtml。最小宽度单词：min-width 如：min-width:300px css 手册中了解 min-width/shouce/c_minwidth.shtml 同时你可以进入 CSS 在线手册中 width 手册了解详细基础知识/shouce/c_width.shtml 二、Html 初始宽度与 DIV+CSS 宽度对照 1、传统 html 中宽度 width=&300&，即设置对应元素宽度为300px（像素） 。而宽 度值后无需跟单位，默认情况下以像素（px）为单位。如：&td width=&300&&我的宽度为300px&/td& 即：设置了对应表格 td 的宽度为300px. 2、div css 中宽度设置 width:300，即设置对应 CSS 样式为300px，这里需要 跟单位。
如：#header{ width:300} 即：定义 header CSS 选择器样式为300px 宽度。而在标签运用：&div id=&header&&我的宽度为300px 宽度&/div& 三、css 宽度演示与讲解 1、CSS 宽度自适应 常常我们看见一个网页宽度随浏览器宽度改变而自动改变，如 www.divcss5.com 一样，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。如果网页总宽度为80%即 width:80%;，将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。DIV CSS 自适应宽度例子CSS 样式代码&style type=&text/css&& body{ margin:0 text-align:} .yangshi{ width:80%; border:1px solid #003; margin:0} &/style&
Html 中 body div 代码&div class=&yangshi&&我是80%自适应宽度&/div& 这样即设置内容居中，为了方便测试加上1px 黑色边框。大家可以测试观察其内 容是随浏览器拉大而宽度变宽而自适应宽度80%，而左右两边始终有10%宽度留 着，因为设置此 box 宽度为80%。
以上为 CSS 宽度（width）演示图解。2、CSS 宽度固定 固定即设置宽度为固定值即可如 很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度 width:300px，即设置对应固定宽度为300像素。3、最小固定宽度 CSS 样式属性单词：min-width 兼容支持：min-width 除 IE6不支持为，IE7以上浏览器、火狐、谷歌都支持 常常用于设置宽度最小值，如设置对应 DIV 的样式最小宽度值限制。例.yangshi{border:1px solid #003; min-width:300} 即设置最小宽度为300px， 当然一般很少设置最小宽度。如果要使用最小宽度即， 使用浮动（float）可使用最小宽度限制。最大固定宽度 CSS 属性单词：max-width 兼容支持：max-width 除 IE6不支持为，IE7以上浏览器、火狐、谷歌都支持 最大固定宽度是对对应的样式 div 设置最大宽度限制， 即内容不超过此设置最大
宽度。最大宽度限制例子.yangshi{border:1px solid #003;max-width:300} 即设置了最大宽度限制为300px，以下为设置最大宽度限制演示图：
通过图例和基础知识 DIVCSS5给大家讲解了关于 css 宽度知识，希望大家能掌握 其宽度运用。
CSS 边框即 CSS border CSS 边框基础知识 CSS 边框即 CSS border 是控制对象的边框边线宽度、颜色、虚线、实线等样 式 CSS 属性。Html 原始边框与 DIV+CSS 边框对照 Html 表格控制边框border=&1& bordercolor=�& 说明：控制表格边框宽度为 1px，颜色为黑色，默认为实线样式边框。DIV CSS 边框：border-color:#000; border-style: border-width:1 说明：以上代码为设置对象边框颜色为黑色、边框为实线、宽度为 1px 边框 边框样式包括 设置上边框：border-top 设置下边框：border-bottom 设置左边框：border-left 设置右边框：border-right 边框显示样式border-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 参数值解释none 无边框。与任何指定的 border-width 值无关
hidden 隐藏边框。IE 不支持 dotted 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为点线。否则为实线 dashed 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为虚线。否则为实线 solid 实线边框 double 双线边框。两条单线与其间隔的和等于指定的 border-width 值 groove 根据 border-color 的值画 3D 凹槽 ridge 根据 border-color 的值画菱形边框 inset 根据 border-color 的值画 3D 凹边 outset 根据 border-color 的值画 3D 凸边 例子设置上边框为 1px 实线黑色边框。border-top-color:#000; border-top-style: border-top-width:1 或简写 border-top:#000 solid 1 可以根据以上实例举一反三，可以设置左、右、下的边框 CSS 样式。DIV CSS 边框技巧 如果设置对象上、下、左、右边框相同样式，可以简写无需分别写出上下左右的 属性及对应值。例，设置上下左右边框为 1px 宽度、实线、黑色边框 CSS 代码如下border:1px solid #000; 完整 DIV CSS 实例实例内容设置 CSS 命名为 yangshi 的 css 选择器， 设置该属性选择器样式为边 框为 1px 宽度实线黑色边框、宽度为 200px,高度为 50px 的矩形。CSS 代码div,body{ border:0; margin:5 padding:0;}/* 初始化网页样式 */ .yangshi{ border:1px solid #000; width:200 height:50}/* 设置对象样 式 */ HTML 中对应 DIV 代码&div class=&yangshi&&divcss5 实例-CSS 边框实例&br /& www.divcss5.com CSS 实例 &/div&
上图为 CSS 边框（CSS border）实例主要片段代码截图 说明以上代码对应显示效果， 看到实线以外虚线是因 DW 软件特自动对 DIV box 区加虚线，实际浏览是没有此虚线，特此说明。
三边有边而一边没有设置技巧 如左右下有边框并且样式为黑色 1PX 宽度实线边框，而上边没有边框。CSS 代码border:1px solid #000; border-top: 注意 border:1px solid #000; 和 border-top:前后顺序不能调换。因为 CSS 读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明 顶部上边边框为“none”没有意思， 即实现该实例要的样式。从而无需分别设置下、 左、右，从而节约一定代码。总结 CSS 边框，常见对对象设置 CSS 样式使用属性代码：border:1px solid #000;
CSS 背景-CSS background CSS 背景基础知识 CSS 背景这里指通过 CSS 对对象设置背景属性，如通过 CSS 设置背景各种样 式。CSS 中背景单词background CSS 手册查询-background 手册 background-color 设置颜色作为对象背景颜色 background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。background-position 设置或检索对象的背景图像位置。Html 原始背景与 CSS 背景对照 Html 是指对应效果的 table 背景设置， Html 背景单词Bgcolor 设置背景颜色 与 CSS 背景颜色对应 background-color Background 设置图片作为背景与 CSS 背景图片对应 background-image 最原始 HTML 背景设置演示代码&table bgcolor=󳓸&& &tr& &td background=&/img/css-logo.gif& width=&130& height=&100&&&&/td& &/tr& &/table& 这里设置了 table 背景颜色为#996600，然后设置了 td 的背景图片为 /img/css-logo.gif 背景颜色 如果是给 table 设置背景颜色可以使用 bgcolor=&颜色值&即可设置对象背景颜 色。如果是 CSS 背景颜色，可使用 background-color:颜色值;或 background:颜色 值设置对象背景颜色。CSS 背景颜色设置 DIV+CSS 演示图：
以上截图分别使用 background-color 和 background 来设置对象背景颜色 CSS 图片背景 这里说的是以图片作为背景图片 - CSS 背景图片详细介绍/jiqiao/j80.html CSS 可以使用 background 或 background-image 直接引用图片地址来设置图片 作为对象背景。background:url(/img/logo.gif);设置 DIVCSS5 的 LOGO 图片作为背景 或 background-image:url(/img/logo.gif);具有相同效果。这 样设置图片作为背景有个缺陷就是图片会上下左右的重复， 接下来我们只需看以 下图例教程即可掌握 CSS background
图片背景样式（固定、滚动） 实现这个效果使用 CSS 单词是 background-attachment 当然通常情况下背景默 认是固定的如果是自己使用 CSS background 简写则如上图。background-attachment 使用解析background-attachment:fixed； 背景固定 background-attachment:scroll 背景图像是随对象内容滚动
DIV CSS 背景居中 CSS 背景分为左右居中和上下居中，具体左右居中方法见上图。背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为 500px，那就设置图片居顶部多少 PX 可以让图片实现上下居中。
CSS background（背景）总结使用图片作为背景在一个网页布局中常常会遇到， 希望大家能在实际中掌握其知 识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-（解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片 是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须， 一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片 位置） 1、设置图片作为背景如果图片设置图片在 X 坐标方向重复，如果再设置图片在 对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。2、设置图片作为背景如果图片设置图片在 Y 坐标方向重复，如果再设置图片在 对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无 线。希望大家好好理解有不懂的地方可以进入 CSS 研教室讨论区发表问题，我们将 尽力答复您。
div+css 中 float 认识及 css float 用法 float 是什么意思？ float 是浮动， 翻译成中文也是浮动意思。进入对应 css 手册中 float 手册了解 float 基本信息。float 的作用 通过 css 定义 float（浮动）让 div 样式层块，向左或向右（靠）浮动。float 语法float none | left |right 参数值none 对象不浮动 left 对象浮在左边 right 对象浮在右边 接下来我们来通过一个 div+css 实例讲解 float 使用技巧。DIV CSS 实验一 Css 样式实例内容，我们让文字和图片在一个固定宽度 div 层内，让蓝色背景文 字内容居右，小图片居左。www.divcss5.com CSS 案例演示最终效果图如下
1、首先我们设置一个最外层的宽度为 300px，高度为 200px 的 css 命名为 box 的 css 选择器代码如下（知识点 px 是什么意思） .box{width:300 height:200} 2、设置 box 内的文字内容部分 css 样式命名为 yangshi，并设置背景为蓝色， 宽度为 120px，居右浮动 .yangshi{ width:120 float: background:#0066FF;}
3、设置图片居左浮动 div+css 样式 img { float} 4、body 内的 div 布局，代码如下 &div class=&box&& &div class=&yangshi&&我是 www.divcss5.com 网站，测试内容&/div& &img src=&demo.gif& /& &/div& 说明：这里 img 标签是链接外部图片，图片名为 demo.gif 最终演示结果截图
CSS 实验二 接下来我们演示使用 div+css 让这里小图片居右（上个例子是居左），蓝色背景 文字内容区居左（上个例子是居右）(扩展 css 居中)。这里我们只需要改变 yangshi 的 float:为 float:left 和图片 css 样式 img { float}为 img { float} CSS 代码如下.box{width:300 height:200} .yangshi{ width:120 float: background:#0066FF;} img{ float:}
html 中的 css 代码和内容不变 最终演示结果截图如下：
希望通过以上两个 css 实例对你认识 float 有帮助。希望大家多少实际操作实践 试试！
css font _ css 文字 DIV+Css 开发中设置字体常用 css 属性单词英文 css font-可进入 CSS 手册查看 更详细 CSS 文字知识 font、font-family(字体)、font-size（字大小）、font-style（字样式）、 font-weight（加粗）、text-decoration（下划线）、font-variant（字母大小 写）、text-transform（英文大小写）、letter-spacing（间隔）
接下来，我们一一实例讲解通过 css 文字控制方法 1、字体大小使用到 font-size，实例如下 TOP
首先设置了 font-size 的值为 36px,则下面结果显示字体比较大。2、 文字的颜色使用 css 中 color 颜色属性通过 color 更样式值设置文字样式的颜 色为红色 TOP
TOP 3、Css 来控制文字的下划线方法 css font，用到 text-decoration 可以进 css 手册了解对应值，你还可能还希望了解 css 链接，css 超链接样式、css 下
TOP 4、文字的间隔-进入详细的 CSS 字间距了解 TOP 5、文字的字体-用到 css 样式属性 font-family，字体设置图例如下
一般 font-family 字体可以跟常见的“宋体”，“新宋体”，“黑体”，注意的是不能自 己设置不参加的字体样式， 虽然在自己电脑上可能自己设置字体能表现出了，但 是一般电脑用户都没有添加字体的，所以在这里字体只能设置常见，系统自带的 字体，而不能设置自己安装的字体。电脑自带字体，和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif 等 TOP 6、文字的上下行间距，使用到 css 文字设置单词 line-height，这里设置 line-height:50
可以看到演示 css font 文字段“我是被 css 控制文字样式演示。”离上下文字间隔 距离是通过 line-height 来实现。也许你需要了解 br 和 p 的区别。TOP 7、字体样式（斜体）使用到 css 样式中 font-style 标签设置如 font-styleitalic,当然可以使用&em&标签将文字变为斜体
TOP 8、字加粗方式-可以直接对需要加错文字前加&b&文字后加&/b&或 &strong&&/strong&来实现，对文字的加粗，这里你可以用 css 来控制对文字加 粗。这里用到 font-weight 来设置如 font-weight:
这里 font-weight 的值可以为 100-900 不等的方式为值，值越大字体越粗，如果 值为 bold 则为正常加粗，同使用 b 或 strong 一致效果。TOP 9、英文字、字母大小写 css font。使用 css 中 font-variant 字母全大小， 如 font-variant:small-，选择性大小写 text-transform 如 text-transform:开头第一个字母大写。
text-transform 语法 text-transform none | capitalize | uppercase | lowercase 参数none 无转换发生 capitalize 将每个单词的第一个字母转换成大写，其余无转换发生 uppercase 转换成大写 lowercase 转换成小写
font-variant 语法 font-variant normal | small-caps 参数normal 正常的字体 small-caps 小型的大写字母字体 提升与扩展思维 css font 代码：font:12px/1.5 Arial, Helvetica, sans- 一般常用以上代码定义一个网页的文字的 css 样式意思， 这段代码以上是字体的 大小是 12px， line-height 为 1.5 倍字体尺寸， 字体是 Arial, Helvetica, sans-serif。Css font 提升图例讲解
这样一定义可以节约很多代码，使用更简便以上即是 div css 网站为大家通俗的 介绍 css font，css 文字相关知识与实例图讲。CSS 加粗知识与 CSS 加粗实例 DIV+CSS 基础知识 CSS 加粗这里指的是通过 DIV CSS 控制对象的加粗。使用 CSS 属性单词 font-weight 对象值：从 100 到 900，最常用 font-weight 的值为 bold font-weight 参数normal 正常的字体。相当于 number 为 400。声明此值将取消之前任何设置 bold 粗体。相当于 number 为 700。也相当于 b 对象的作用 bolder IE5+ 特粗体 lighter IE5+ 细体 number IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 详细基础加粗知识请进 CSS 手册中的 font-weight 手册。Html 常规加粗标签 以前 html 直接对对象加粗的标签如下&b&&/b&或&strong&&/strong&两者效果相同。加粗实例，代码如下：
&strong&我被加粗&/strong&&br /& &b&我也被加粗了&/b&&br/& 我未被加粗 html 加粗实例截图：
CSS 加粗基础技巧实例 CSS 代码.yangshi1{ font-weight:bold} .yangshi2{ font-weight:800} Div html 代码&span class=&yangshi1&&我被加粗&/span&&br /& &span class=&yangshi2&&我也被加粗了&/span&&br /& 我未被加粗 CSS 加粗结果演示：
说明此图为 CSS 加粗实例片段代码和结果图。这里通过 CSS 来控制加粗文字 方式来加粗对象。所以一般对文字对象加粗标题加粗即可使用此方法对其加粗。总结与推荐1、在 html 对对象直接加粗可以用&b&或&strong&对其加粗 2、使用 CSS 加粗对象可以使用 font-weight:bold 即可实现加粗。
DIV+CSS 下划线基础 CSS 控制下划线出现用到地方 - TOP 在 DIV CSS 网页中常常使用 CSS 代码来人对象文字内容加上下划线。使用 CSS 属性单词text-decoration -CSS 手册了解/shouce/c_textdecoration.shtml text-decoration none || underline || blink || overline || line-through text-decoration 下划线 CSS 单词值参数none 无装饰 blink 闪烁 underline 下划线 line-through 贯穿线 overline 上划线 二、HTML 常规下划线标签 - TOP 在 HTML 直接使用下滑线标签“U”即可对对象文字加下划线。实例&u&我被 U 标签加下滑线&/u&
三、CSS 控制对象下划线属性样式
下面我们进行使用“U”标签和 text-decoration 进行设置下划线实例对比如下图
四、下划线高级运用 - TOP 我们接下来为大家讲解常见 CSS 超链接,当随便经过时候文字对象被加下划线。代码如下&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&divcss5&/a& &/span& &/p& &/body& &/html&
请将以上代码复制新建 HTML 即可查看该实例样式。更详细超链接讲解请进 DIV CSS 超链接。css 注释_css 注解 什么是 CSS 注解？什么是 CSS 注释？CSS 注释是什么？CSS 注解是什么？ css 注解（css 注解）又被称作 CSS 注释（css 注释）是有 css 文件代码间加 入注释，解释说明意思，就像我们学习语文一样在文言文、诗词、文章用不同颜 色进行批注说明一个道理， 通常情况下 css 注解是不会被浏览器解释或被浏览器 忽略的。CSS 注解作用,CSS 注释作用 css 注解（css 注释）可以帮助我们对自己写的 CSS 文件进行说明，如说明某 段 CSS 代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂 的方便性， 同时在团队开发网页是时候合理适当的注解有利于团队看懂 css 样式 是对应 html 哪里的，以便顺利快速开发 div css 网页。CSS 注解用法，css 注释用法 （css 注解）CSS 注解是以“/*”斜杠一个星号开始，以“*/”星号斜杠结束，注解说 明内容放到“/*”“*/”中间。css 注解――div+CSS 注释示例如下/* www.divcss5.com 的 css 注解实例 css 注释实例 */ /* body 定义 */ body{ text-align: margin:0} /* 头部 css 定义 */ #header{ width:960 height:120} 实例图如下：
css 注解，CSS 注释 注意说明：注解“/*”和“*/”必须以半角英文小写，并且“*”符号不要和注释内容紧挨 在一起，至少需要一个空格位置空着。padding_css padding 用法详解 padding 属性是 css 用于在一个声明中设置所有 padding 属性的简写属性。
Padding 属性包含了 padding left ：左补距离（设置距左内边距） ；padding top：头顶补距离（设置距顶部内边距）；padding right ：右补距离（设置距 右内边距） ；padding bottom ：底补距离（设置距低内边距）。其二维构建 图可见 CSS 属性二维图。
padding 的解剖图
padding left 用法：padding-left:10 这个意思距离左边补距 10 像素，可跟 百分比如（padding-left:10%; 距离左边补 10%的距离）； padding right 用法：padding-right:10 这个意思距离右边补距 10 像素，可 跟百分比如（padding-right:10%; 距离右边补 10%的距离）； padding top 用法padding-top:10 这个意思距离顶边补距 10 像素， 可跟百 分比如（padding-top:10%; 距离顶边补 10%的距离）； padding bottom 用法padding-bottom:10 这个意思距离低边补距 10 像素， 可跟百分比如（padding-bottom:10%; 距离底边补 10%的距离）； 注意 padding 中间的链接“ - ”号，设置距离值时用“ ”并赋予值，并以“ ； ”结 束，并且全部用小写半角字母。如果是左右上下都需要设置 padding 的值时可以简写来实现，以优化 css 。如简写方式有padding:10 意思就是上下左右补丁距离就是 10px（10 像素）等于 padding-top:10 padding-bottom:10 padding-left:10 padding-right:10 一样效果简写； padding:5px 10 意思上下补丁距离为 5px，左右的补丁距离为 10px，等于 padding-top:5 padding-bottom:5 padding-left:10 padding-right:10 一样效果简写； padding:5px 6px 7 意思上补丁距离 5px，下补丁距离为 7PX，左右补丁距离 为 6px，等于 padding-top:5 padding-bottom:7 padding-left:6 padding-right:6 一样效果简写； padding:5px 6px 7px 8 意思上补丁为 5px，右补丁距离为 6px ，下补丁距
离为 7px，左补丁距离 8px，等于等于 padding-top:5 padding-right:6 padding-bottom:7 padding-right:8 一样效果简写； 其中 padding:5px 6px 7px 8 的转法为顺时针即图：
padding 的属性转法图解
上面即是 div+css 网站总结的 padding 的属性与用法。其中 margin 的用与 padding 相同。CSS 外边距 基础知识 - TOP DIV CSS 外边距指 CSS 属性单词 margin， margin 是设置对象四边的外延边距， 没有背景颜色也无颜色。运用地方 - TOP 两个布局之间距离设置。
如上图中“CSS 手册”和“DIV CSS 研教室”黄颜色的背景之间空隙（背景土红）。margin 缺点 - TOP 在使用 CSS margin 的时候容易造成 CSS HACK。解释此属性的时候容易造 IE6 成双倍距离。您可能需要了解 CSS 兼容浏览器知识。使用技巧与 CSS 代码优化 - TOP margin:10 意思就是上下左右元素块距离就是 10px（10 像素）等于 margin-top:10 margin-bottom:10 margin-left:10 margin-right:10 一 样效果简写；
margin:5px 10 意思上下元素块距离为 5px，左右的元素块距离为 10px，等 于 margin-top:5 margin-bottom:5 margin-left:10 margin-right:10 一 样效果简写； margin:5px 6px 7 意思上元素块距离 5px，下元素块距离为 7PX，左右元素 块距离为 6px，等于 margin-top:5 margin-bottom:7 margin-left:6 margin-right:6 一样效果简写； margin:5px 6px 7px 8 意思上元素块为 5px，右元素块距离为 6px ，下元素 块距离为 7px，左元素块距离 8px，等于 margin-top:5 margin-right:6 margin-bottom:7 margin-right:8 一样效果简写； 其中 margin:5px 6px 7px 8 你可以再了解以前 divcss5 介绍 margin 知识/shili/s6.html。CSS 文本 这里讲解 CSS 文本，主要介绍文本字段换行、文本文字间间隔、文本缩进、文 本文字上下排间隔等 DIV CSS 文本样式 DIV CSS 文本知识整理 1、文本字段换行 - TOP html 中使用&br /&和&p& &br /&和&p& 2、文本上下排字间间隔 - TOP 使用 CSS 属性单词：line-height 作用：定义对象行高，后面跟具体的数值和单 位 line-height-DIV+CSS 示例div {line-height:22 } 即定义行高为 22px 3、CSS 文本缩进 - TOP 使用 CSS 单词：text-indent 作用：设置对象中的文本的缩进，后面也跟具体数 值和单位 text-indent DIV+CSS 示例div { text-indent 25 } 即定义对象内开头的文字往后缩进 25px 效果如下：
4、文本文字间间隔 - TOP 使用单词 letter-spacing 作用：设置对象内文本字与字之间间距距离，后跟具体 数值和单位 CSS 教程示例div {letter-spacing:5 } 即定义字与字之间距离为 5px
更多学习方法 - TOP 更多 CSS 单词可进入 CSS 手册查看-知识+CSS 实例。CSS 颜色 认识 CSS 颜色（CSS color） - TOP 这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色 2、颜色规范与颜色规定：网页使用 RGB 模式颜色 颜色基础知识 - TOP
网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动 感（特别是超链接中运用）、美观之用，同时颜色也是各种各样网页的样式表现 元素之一。传统的 html 颜色与 w3c 标准下的 css 颜色对比和 DIV CSS 运用颜色 1、文字颜色控制一样- TOP 传统 html 和 css 文字颜色相同使用“color：”+“RGB 颜色取值”即可，如颜色为 黑色字即对应设置 CSS 属性选择器内添加“color:#000;”即可。2、网页背景颜色设置区别- TOP 传统设置背景颜色使用“bgcolor=颜色取值”， CSS 中则“background:”+颜色取 而 值。例如：设置背景为黑色，传统 Html 设置，即在标签内加入“bgcolor=�&” 即可实现颜色为黑色背景，如果在 W3C 中即在对应 CSS 选择器中始终
“background:#000”实现。3、设置边框颜色区别- TOP 传统“bordercolor=取值”，CSS 中“border-color:”+颜色取值。例如：在传统 html 直接在 table 标签加入“bordercolor=�&”即可，在现在 CSS 中设置 “border-color:#000;”即可让边框颜色为黑色，同时记得对包括设置宽度和样式 （虚线、实现）。DIV+CSS 颜色值扩展知识颜色值是一个关键字或一个数字的 RGB 规范。16 个关键字是采取从 Windows 的 VGA 调色板水色 ， 黑色 ， 蓝色 ， 紫 红色 ， 灰 ， 绿 ， 灰 ， 褐红色 ，藏青色， 橄榄色 ， 紫色 ， 红色 ， 银 色 ， 青色 ， 白色 ， 黄色 。RGB 颜色给出了四种方法之一- TOP
1、#rrggbb（ 如 ，＃00cc00） （强烈推荐使用此表示颜色取值） 2、#的 RGB（ 如 ，＃0c0） 3、RGB（十中，x，x）的 x 是一个包容性的 0 和 255 之间的整数（ 如 的 RGB （0,204,0）） 4、 RGB （?％， ?％， ?％） 其中 y 是一个包容性的数量介于 0.0 和 100.0 如 ， （ 的 RGB（0％，80％，0％）） 以下是 RGB 颜色表- TOP
当然一般的网页开发软件都有颜色取值器：
网页开发软件 DW 软件中 CSS 取色器 用 CSS 控制超链接文字样式 本文将讲解通过 css 样式或通过 css 来控制超链接样式。这里主要讲文字类型的 超链接，超链接的样式包括通过 CSS 来控制设置超链接有无下划线、超链接文 字颜色等样式。
什么是超链接？ 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网 页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址， 一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一 段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显 示在浏览器上，并且根据目标的类型来打开或运行。超链接的代码 &a href=&/& target=&_blank& title=&关于 div css 的网站 &&DIV+CSS&/a& 解析如下href 后跟被链接地址目标网站地址这里是 / target _blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) title 后跟链接目标说明，也就是超链接被链接网址情况简要说明，或标题 CSS 可控制超链接样式-css 链接样式如下 a:active 是超级链接的初始状态 a:hover 是把鼠标放上去时的状况 a:link 是鼠标点击时 a:visited 是访问过后的情况 超链接样式案例 1、通常对全站超链接样式化方法 a{color:#333;text-decoration: } //对全站有链接的文字颜色样式为 color:#333;并立即无下划线 text-decoration: a:hover {color:#CC3300;text-decoration:}//对鼠标放到超链接上文字 颜色样式变为 color:#CC3300;并文字链接加下划线 text-decoration: 2、通过链接内设置类控制超链接样式 css 方法 案例超链接代码&a href=&/& class=&yangshi&&CSS&/a& 对应 CSS 代码 a.yangshi{color:#333;text-decoration: } a.yangshi:hover {color:#CC3300;text-decoration:} 通过这样的设置可以控制链接内的 css 类名为“yangshi”超链接的样式 3、通过对应超链接外的父级的 css 类的 css 样式来控制超链接的样式 案例超链接代码&div class=&yangshi&&&a href=&/&&CSS&/a&&/a& 对应 CSS 代码
.yangshi a{color:#333;text-decoration: } .yangshi a:hover {color:#CC3300;text-decoration:} 这里值得注意的是 a.yangshi 与.yangshi a 的样式 css 代码区别 这里就是常见的通过 div css 来对超链接样式设置案例及分析。DIV CSS 优化 一、CSS 代码优化地方1、border(CSS 边框)简写border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000; 可以简写为：border:1px solid #000; 2、padding（CSS padding）简写padding-top:1padding-right:2padding-bottom:3padding-left:4 可简写为：padding:1px 2px 3px 4 padding-top:1padding-right:1padding-bottom:1padding-left:1 可简写为：padding:1 3、margin 简写 margin-top:1margin-right:2margin-bottom:3margin-left:4 可简写为：margin:1px 2px 3px 4 margin-top:1margin-right:1margin-bottom:1margin-left:1 可简写为：margin:1 4、background 简写 background-color:#000;可以简写为 background:#000; background-image:url(图片地址) 可简写为：background:url(图片地址) 5、font 简写 font-size:12 line-height:12 font-family:Arial, Helvetica, sans- 可简写为：font:12px/12px Arial, Helvetica, sans-
二、CSS 重用优化 这里主要介绍是 CSS 代码的共用属性提取来达到节约代码、维护方便，CSS 实 例如下.yangshi_a{ width:100 height:20 text-align: float: font-size:24} .yangshi_b{ width:100 height:20 text-align: float: font-size:24} 他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能 需要了解 CSS 居中)，我们就可以提取他们相同属性
优化后.yangshi_a ,.yangshi_b{ width:100 height:20 text-align: float: font-size:24} .yangshi_b{text-align: } 注意观察以上代码，自己理解，不懂可到 CSS 论坛提出问题。CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别，接下来再简单介绍 CSS id 与 CSS class 区 别与用法。
CSS id 知识在一个网页里 ID 只能使用一次。当然即使一个 id 在一个网页内被使用多次，其 CSS 样式仍然可以实现生效，但是一般规定 W3C 标准是使用一次。因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作、表单传值等特性所以区 别于一个 class 可以使用多少的次， 而一个 CSS 命名的 id 只能使用一次避免一 些特定动作、传的表单值的兼容性特性错误即使没有其它 JS 脚本动作、表单传 值特性但是我们也一定执行一个页面只能使用一次。id 选择器以 &#& 来定义，命名 CSS 选择器。定义命名 css id 选择器例子#yangshi1{color:#F00;}定义红色 www.divcss5.com 实例 #yangshi2{color:#0F0;}定义绿色 对应 html 中 div 引用 &div id=&yangshi1&&我颜色为红色&/div& &div id=&yangshi2&&我颜色为绿色&/div& 一个 div 标签的定义只能使用一个 id 如&div id=&yangshi1& id=&yangshi2&&www.divcss5 测试内容&/div& 或 &div id=&yangshi1 yangshi2&&www.divcss5 测试内容&/div& 两个都是不正确的，并且 CSS 样式属性也不能生效- 成为 CSS 失效之一。
CSS class 知识与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用。Class 选择器定义以“.”来定义。定义 css class 选择器例 子.yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28}定义文字 大小为 18px 对应 html 中 div+css 引用&div class=&yangshi1&&我颜色为红色&/div& &div class=&yangshi2&&www.divcss5.com 我字体大小为 28px&/div& &div class=&yangshi1 yangshi2&&我颜色为红色文字大小为 28px&/div& 以上即是“yangshi1”“yangshi2”类的正确使用方法 扩展知识：能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法&div class=&yangshi1& class=& yangshi2&&我将无效&/div& 这样的引用方法即是错误的引用方法，同样可以得出一个只能出现一个&class=& 如果出现多个 css 类要应用到一个 div 标签内， 即可以使用&div class=&yangshi1 yangshi2&&来应用。一个 div 标签内运用 id 和 class 是可以的.yangshi1{... ...} #yangshi2{... ...} .yangshi3{... ...} &div class=&yangshi1& id=&yangshi2&&这样是可以的也是正确的. &div class=&yangshi1 yangshi3& id=&yangshi2&&同样是正确的可取的。总结本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用、需要注意地方、 正确运用引用方法。通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点。CSS id 与 CSS class 前面我们介绍过了 id 与 class 区别，接下来再简单介绍 CSS id 与 CSS class 区 别与用法。
CSS id 知识在一个网页里 ID 只能使用一次。当然即使一个 id 在一个网页内被使用多次，其 CSS 样式仍然可以实现生效，但是一般规定 W3C 标准是使用一次。因为 ID 在 html 里可以赋予 html 标签特殊的属性如一下 JS 动作、表单传值等特性所以区 别于一个 class 可以使用多少的次， 而一个 CSS 命名的 id 只能使用一次避免一 些特定动作、传的表单值的兼容性特性错误即使没有其它 JS 脚本动作、表单传 值特性但是我们也一定执行一个页面只能使用一次。id 选择器以 &#& 来定义，命名 CSS 选择器。定义命名 css id 选择器例子#yangshi1{color:#F00;}定义红色 www.divcss5.com 实例 #yangshi2{color:#0F0;}定义绿色 对应 html 中 div 引用 &div id=&yangshi1&&我颜色为红色&/div& &div id=&yangshi2&&我颜色为绿色&/div& 一个 div 标签的定义只能使用一个 id 如&div id=&yangshi1& id=&yangshi2&&www.divcss5 测试内容&/div& 或 &div id=&yangshi1 yangshi2&&www.divcss5 测试内容&/div& 两个都是不正确的，并且 CSS 样式属性也不能生效- 成为 CSS 失效之一。CSS class 知识与 CSS ID 不同特性是 clsss 类可以在一个网页内无限次引用。Class 选择器定义以“.”来定义。定义 css class 选择器例 子.yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28}定义文字 大小为 18px 对应 html 中 div+css 引用&div class=&yangshi1&&我颜色为红色&/div& &div class=&yangshi2&&www.divcss5.com 我字体大小为 28px&/div& &div class=&yangshi1 yangshi2&&我颜色为红色文字大小为 28px&/div& 以上即是“yangshi1”“yangshi2”类的正确使用方法
扩展知识：能否使用数字命名 CSS 属性选择器 css 命名规范 以下为错误的 css 类使用方法&div class=&yangshi1& class=& yangshi2&&我将无效&/div& 这样的引用方法即是错误的引用方法，同样可以得出一个只能出现一个&class=& 如果出现多个 css 类要应用到一个 div 标签内， 即可以使用&div class=&yangshi1 yangshi2&&来应用。一个 div 标签内运用 id 和 class 是可以的.yangshi1{... ...} #yangshi2{... ...} .yangshi3{... ...} &div class=&yangshi1& id=&yangshi2&&这样是可以的也是正确的. &div class=&yangshi1 yangshi3& id=&yangshi2&&同样是正确的可取的。总结本文分别从知识点到实例讲解了 div css 中 id 和 class 的运用、需要注意地方、 正确运用引用方法。通过 divcss5 中 css 实例方式正确与错误运用 css id 和 css class 让大家能掌握 css 基础知识点。css li 讲解 Css li 是使用 css 来控制 li 的样式-css 列表，如 li 列表的以点为开头，或图片 开头的列表形式。Li 的基础知识 Li 是 html 的基本元素标签。&li& 标签是用于定义列表项目。&li& 标签可用在有序列表 (&ol&) 和无序列表 (&ul&) 中。在 W3C 标准下 li 不能单独使用，需要与&ol&或&ul&配合使用，使用范例&ol& &li&div+css 范例&/li& &li&div+css 范例之 li&/li& &/ol& &ul& &li&div+css 范例&/li& &li&div+css 范例之 li&/li& &/ul& 以上代码效果如下图：
Css li 实例,li，ol li，ul li 的用法 经过实例演示知道了 li 的默认有序和无序的 css 样式，有序 ol 的样式是以阿拉 伯数字 1、2、3 为递增列表，而无序的 ul 的 CSS 样式是以一个圆黑点的列表形 式。&li&兼容：所有的浏览器都支持兼容。Css li 的样式引导 无论是有序还是无序的 li 列表，在 div+css 开发的时候都需要对 li 进行设置 css 样式。一般对其设置代码如：设置 li 的 list-style 样式。CSS 父级子级 认识了解 - TOP 简单讲 CSS 父级 CSS 子级是相对而言，如一个 DIV “A”被另外一个 DIV “B”包 裹着，这样我们就可以让我 B 是 A 父级，同样一个道理 举例说明- TOP DIV CSS 父级子级说明例子CSS 代码 .yangshi{...} .yangshi .yangshi_a{ ...} .yangshi .yangshi_b{ ...}
Div 代码 &div class=&yangshi&& &div class=&yangshi_a&&内容 a&/div&
&div class=&yangshi_b&&内容 b&/div& &/div& 以上 div+css 代码这里我们就可以认为 yangshi_a 父级（上一级）是 yangshi。这样我们就可以利用 CSS 指针属性在 div css 中,最终 CSS 样式可以有相同命名 的属性选择器的，但是赋予不同的值。这样我们通过.yangshi .yangshi_a 一看即可知道 yangshi_a 的父级是 yangshi 认识 CSS 父级子级目的- TOP
我们搞清 div css 之间父级自己关系，目的也是为我们维护和查找。CSS 指针 什么是 CSS 指针？这里指针是指属于与被属于的关系 如.yangshi .yangshi_a{...} 对于 yangshi_a 是 yangshi 指向的样式 我们可以作 1 个实验来理解此 CSS 指针 是什么 原 CSS div 样式 .yangshi{ width:300 height:50 border:1px solid #F00; margin:0 text-align:} .yangshi .yangshi_a{ float: width:30 border:1px dashed #333;} .yangshi .yangshi_b{ float: width:50 border:1px dashed #333;}
&div class=&yangshi&& &div class=&yangshi_a&&内容 a&/div& &div class=&yangshi_b&&内容 b&/div& &/div& &div class=&clear&&&img src=&images/s.gif& /&&/div& 浏览器显示结果：
就我们以上实例来做 我们将.yangshi .yangshi_b{...} 改为.yangshic .yangshi_b{...} 得到 .yangshic .yangshi_b{ float: width:50 border:1px dashed #333;} 然后你浏览下结果
CSS 指针效果 是的 是不是感觉 yangshi_b 虽然我们 在 DIV 使用 class 调用了但是失效了 怎么多中间的虚线了 那就是因为 DIV 独占一行的特性出来了 而&div class=&yangshi_b&&内容 b&/div& 失效了 当然你会看到
是的 是因为 CSS 指针属性，看到改后 yangshi_b 可以理解父级（yangshic）不存 在 （或 html 中改后 yangshi_b 父级是 yangshi 而不是 yangshic 所以为导致 yangshic 指针到 yangshi_b 的样式失败） 这个 CSS 指针我们可以很好利用 比如以后我们统一命名 比如在一个网页中很多栏目标题我们就以.titles 命名 我 们可以利用 CSS 指针给他赋予不同父级 在不同地方使用并赋予不同 CSS 样 式，利用这一特点 让我们维护更加容易，一看此命名就知道此处是某栏目标题 意思 DIV CSS 图片_CSS img css 图片_DIV CSS 图片_CSS img 这里为大家介绍的是 DIV CSS 对 img 图片控制。我们常常会遇到以下情况1、img 图片多了边框，特别是链接后的图片带边框 2、图片超出撑破 DIV 下面我们通过 CSS 来解决这 2 个问题。1、img 图片多了边框，特别是链接后的图片带边框
有边框的图片 根据以上图，我们对图片加链接，结果图片出现了边框， 解决方法我们只需在初始化 IMG 标签 CSS 即可 img{ padding:0; border:0;} 加入此 CSS 即可消除边框
CSS 去掉图片边框效果 2、图片超出撑破 DIV 我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。解决办法 使用 CSS 控制改对象 IMG 标签宽度即可，假如该对象为.yangshi 设置宽度为
500px，那我们就只需设置.yangshi img{max-width:500}但是在 IE6 中 max-width 是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度， 让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站 都是这样解决， 一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打 开网页。总结1、一个网页中难免有图片，这时我们需要初始化 img 标签即：img{ padding:0; border:0;} 2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度 小， 同时还可以对该对象加入 overflow:hidden 属性，即隐藏超出内容包括图片。px em pt 单位区别 PX\EM\PT 单位介绍 - TOP px 单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而 言的国内推荐； em 单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比 较多； pt 单位名称为点（Point），绝对长度单位一般老版本的 table 使用长度大小单 位但是现在基本上没有使用。1. 以前 IE 无法调整那些使用 px 作为单位的字体大小,但现在几乎 IE 都支持 在 这里也推荐使用 PX 作为单位; 2. 国外的大部分网站能够调整的原因在于其使用了 em 作为字体单位; 3. Firefox 能够调整 px 和 em， 但是 96%以上的中国网民使用 IE 浏览器(或内核)。px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的， QQ 截图也是使用 PX 作为长度宽度单位。em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的 字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em 与 px 换算 - TOP 任意浏览器的默认字体高度 16px（16 像素）。所有未经调整的浏览器都符合1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算， 需要在 css 中的 body 选择器中声明 font-size=62.5%，这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来 的 px 数值除以 10，然后换上 em 作为单位就行了。em 单位有如下特点- TOP
1. em 的值并不是固定的;
2. em 会继承父级元素的字体大小。我们在写 CSS 的时候如果要用 em 为单位，需要注意两点1. body 选择器中声明 Font-size=62.5%; 2. 将你的原来的 px 数值除以 10，然后换上 em 作为单位; 3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。也就是避免 1.2 * 1.2= 1.44 的现象。比如说你在#content 中声明了字体大 小为 1.2em，那么在声明的字体大小时就只能是 1em，而不是 1.2em, 因为此 em 非彼 em，它因继承#content 的字体高而变为了 1em=12px。但是 12px 汉字例外，就是由以上方法得到的 12px(1.2em)大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小，而是稍大一点。这个问题 Jorux 已经 解决， 只需在 body 选择器中把 62.5%换成 63%就能正常显示了。原因可能是 IE 处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。推荐网页单位 - TOP 所以为了单位换算错误推荐使用 PX（像素）作为网页制作单位。以上为大家介绍了 px em pt 单位，及换算方式，一般现在我们使用长度单位都 以 px 为长度单位。这里我们也推荐使用以 px（像素）为网页的尺寸长度单位， 符合浏览器的像素单位，同时也为了方便计算长度尺寸。DIV CSS display (block none inline)属性的用法教程 在一般的 CSS 布局制作时候，我们常常会用到 display 对应值有 block、none、 inline 这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过 CSS display 知识加实例、图演示讲解方法来学习和了解 DIV CSS display。1、CSS display 使用 TOP 以下为 DIV CSS 运用 dispaly，说明这里 dispaly 值任意 CSS 代码.divcss5{display:none} Html 对应运用&div class=&divcss5&&我是测试内容&/div& 根据以上可以自己 DIV+CSS 下，看看使用结果 2、display 的值有哪些 TOP Css display 值与解释-（详细可见 CSS 手册的 CSS display 手册） 参数block :块对象的默认值。用该值为对象之后添加新行
none :隐藏对象。与 visibility 属性的 hidden 值不同，其不为被隐藏的对象保留 其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after 及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示 3、css display block TOP Display:block 是我们常用的，block 也是 Display 默认的值。解释：该对象随后的内容自动换行。css display block 实例 CSS 代码.divcss5{display:block} Html 对应运用代码&span class=&divcss5&&我的后面文字会换行&/span&我是被前面的 divcss5对应 CSS 属性换行。&span&不会被换行,因为我没有被设置 display:block&/span& 对应结果截图:
说明这里使用 span 作实例，一个被设置 CSS 样式，一个未设置，自己可以对 比被设置 DIV display:block 样式的对象随后的内容被换行。4、css display none TOP 此 display 的 none 值，我们也常常使用，用于隐藏对象内容，被隐藏的对象也 不会占用自身固有宽度高度空间。详情可见 CSS 隐藏讲解：/jiqiao/j55.html 5、css display inline TOP Display:inline,我们常常在 li 中使用它。功能是让 li 排成一排（称：删除行） 。接下来我们以一个未设置 li 列表与一个设置 css Display inline 样式对比实例演 示演示。Css 代码 ul.divcss5 li{display:inline} 解释：ul.divcss5对应 li css 样式属性为 display:inline Html 对应代码&ul& &li&我父级 ul 没有 divcss5样式&/li& &li&我是独行&/li& &li&我是独行&/li& &/ul& &ul class=&divcss5&& &li&我父级 ul 有 divcss5样式&/li& &li&我站成一排&/li& &li&我在 divcss5下 li 站成一排&/li& &/ul& 演示结果图：
说明：设置 css 为 display:inline 的 li 对象，li 被排成一排，而未设置的 li 列表对 象仍然继承原来自身独占一行的 CSS 样式。以上是 DIVCSS5为大家整理和展示的关于 CSS display 常用的属性对应 display none、display inline、display block 值的详细讲解与实例，希望对你有帮助。同 时有什么问题或疑问请到 DIVCSS5的 CSS 论坛发贴讨论、求助。
css 图片_DIV CSS 图片_CSS img 这里为大家介绍的是 DIV CSS 对 img 图片控制。我们常常会遇到以下情况1、img 图片多了边框，特别是链接后的图片带边框 2、图片超出撑破 DIV 下面我们通过 CSS 来解决这2个问题。1、img 图片多了边框，特别是链接后的图片带边框
根据以上图，我们对图片加链接，结果图片出现了边框， 解决方法我们只需在初始化 IMG 标签 CSS 即可 img{ padding:0; border:0;} 加入此 CSS 即可消除边框
2、图片超出撑破 DIV 我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。解决办法 使用 CSS 控制改对象 IMG 标签宽度即可，假如该对象为.yangshi 设置宽度为 500px，那我们就只需设置.yangshi img{max-width:500}但是在 IE6中 max-width 是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度， 让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站
都是这样解决， 一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打 开网页。总结1、一个网页中难免有图片，这时我们需要初始化 img 标签即：img{ padding:0; border:0;} 2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度 小， 同时还可以对该对象加入 overflow:hidden 属性，即隐藏超出内容包括图片。3、使用 css 让大图片不超过网页宽度 让大图片不超过网页宽度，让图片不撑破通过 CSS 样式设置的 DIV 宽度！ 接下来，我们来介绍下网站在开发 DIV+CSS 的时候会遇到一个问题，在发布一 个大图片的时候因为图片过宽会撑破自己设置的 div 宽度的问题。图片撑破布局原因 1、由于浏览器版本低（微软 IE6） 2、没有设置 div 布局的宽度 解决图片超出宽度或撑破 div css 布局方法 1、在文章中发布图片的时候将图片编辑缩小 2、通过对对应 div 的 css 来设置显示的图片最宽宽度 推荐 3、通过 css 对图片设定宽度。通过 css 来解决图片撑破 div 布局案例 通过 css 来控制代码如下(cmcss 是对应父级类名).cmcss {marginwidth600} .cmcss img{max-width100% ! heightauto! width:expression(this.width & 600 ? &600px& this.width)!}这种图片第 一次加载时候图片不能显示 直接通过对对应的 div 内的内容图片宽度设置代码如下.cmcss img{ width:500} 宽度自定，但是不推荐此方法，因为设置后此 div 布 局内的图片将全部宽度为500px，那样将造成图片小的，被放大显示模糊。可以通过对图片设置最宽 css 可以使用 max-width 来设置，但是 IE6不支持，但 是可以使用浏览器的 css hack 来设置代码如下 .cmcss img{max-width:500_width:500} 说明：通过其他浏览器不支持带“_”的 css，但是 IE6支持。刚好可以通过此 css hack 来实现对图片宽度的现在。这里只能克服 IE6显示固定的宽度来符合其它 版本的兼容性。扩展与提高 我们看区别不同浏览器 CSS HACK 的代码区别 FF，IE7，IE6background:*background:green !*background:
你可能要问了，为什么不用“*”来代替“_”来区别 IE6浏览器，这里值得注意的是 ie6和 IE7都会解释和识别“*”的，但是 IE7对 important 的识别具有优先全，所以 IE7在 CSS 代码中有 important 将有优先识别并成为唯一性， 所以在有 important 时候 IE7和 IE6前面都可以用“*”号，但是无论带 important 在前或在后 IE7将识 别为唯一区别 css hack。所以这里没有 important 的时候需要用另外 IE6的 css hack 中“_”小写半角下划线。案例如下（Blue hills.jpg 图片为800像素宽的图片） 代码&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& & 案例-图片不超过设置宽度&/title& &style type=&text/css&& &!-.cmcss img{ max-width:150_width:150} --& &/style& &/head& &body& 原始图片宽度为800PX，设置后如下图为150px &div class=&cmcss&&&img src=&Blue hills.jpg& /&&/div& &/body& &/html&
截图如下：
通过此方法对图片的宽度设置最大宽度为多少，css 代码少方便，推荐此方法来 解决图片撑破 div css 布局的宽度。
二、DIV+CSS 网页布局常用基础知识
CSS 命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 二．常用类/ID 命名规范 页 眉：header 内 容：content 容 器：container 页 脚：footer 版 权：copyright 导 航：menu 主导航：mainMenu 子导航：subMenu 标 志：logo 标 语：banner 标 题：title 侧边栏：sidebar 图 标：Icon 注 释：note 搜 索：search 按 钮：btn 登 录：login 链 接：link 信息框：manage ?? 常 用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对 于二级类/ID 命名，则采用组合书写的模式，后一个单词的首字母应大写诸如“搜索框” 则应命名为 “searchInput” 搜索图标” 、 “ 命名这 “searchIcon” 搜索按钮” 、 “ 命名为 “searchBtn CSS 书写规范及方法 一. 常规书写规范及方法 1. 选择 DOCTYPE：
XHTML 1.0 提供了三种 DTD 声明可供选择过渡的(Transitional):要求非常宽松的 DTD，它允许你继续使用 HTML4.01 的标识(但是要 符合 xhtml 的写法)。完整代码如下严格的(Strict):要求严格的 DTD，你不能使用任何表现层的标识和属性，例如 。完整代码如下框架的(Frameset):专门针对框架页面设计使用的 DTD，如果你的页面中包含有框架，需要 采用这种 DTD。完整代码如下理 想情况当然是严格的 DTD，但对于我们大多数刚接触 web 标准的设计师来说，过渡的 DTD(XHTML 1.0 Transitional)是目前理想选 择(包括本站，使用的也是过渡型 DTD)。因为 这种 DTD 还允许我们使用表现层的标识、元素和属性，也比较容易通过 W3C 的代码校验。2. 指定语言及字符集为文档指定语言为了被浏览器正确解释和通过 W3C 代码校验， 所有的 XHTML 文档都必须声明它们所使用的编 码语言；如常用的语言定义标准的 XML 文档语言定义针对老版本的浏览器的语言定义为提高字符集，建议采用“utf-8” 。3. 调用样式表外部样式表调用页面内嵌法：就是将样式表直接写在页面代码的 head 区。如&style type=”text/css”&&!C body { background
} C& &/style& 外部调用法：将样式表写在一个独立的.css 文件中，然后在页面 head 区用类似以下代码调 用。&link rel=” stylesheet” rev=” stylesheet” href=” css/style.css” type=” text/css” media=”all” /& 在符合 web 标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css 文件而改变 页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所 有文件的样式。4、选用恰当的元素：
根据文档的结构来选择 HTML 元素，而不是根据 HTML 元素的样式来选择。例如，使用 P 元素 来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用 通用的 div 或者是 span； 避免过渡使用 div 和 span。少量、适当的使用 div 和 span 元素可以使文档的结构更加清晰 合理并且易于使用样式； 尽可能少地使用标签和结构嵌套， 这样不但可以使文档结构清晰， 同时也可以保持文件的小 巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视； 5、派生选择器可以使用派生选择器给一个元素里的子元素定义样式， 在简化命名的同时也使结构更加的清 晰化，如.mainMenu ul li {background:url(images/bg.)} 6、辅助图片用背影图处理这里的” 辅助图片” 是指那些不是作为页面要表达的内容的一部分， 而仅仅用于修饰、 间隔、 提醒的图片。将其做背影图处理， 可以在不改动页面的情况下通过 CSS 样式来进行改动， 如#logo {background:url(images/logo.jpg) #FEFEFE no-} 7、结构与样式分离在页面里只写入文档的结构， 而将样式写于 css 文件中， 通过外部调用 CSS 样式表来实现结 构与样式的分离。8、文档的结构化书写页面 CSS 文档都应采用结构化的书写方式，逻辑清晰易于阅读。如&div id=”mainMenu”& &ul& &li&&a href=”#” &首页&/a&&/li& &li&&a href=”#” &介绍&/a&&/li& &li&&a href=”#” &服务&/a&&/li& &/ul& &/div& /*=====主导航=====*/ #mainMenu { width:100%;
height:30 background:url(images/mainMenu_bg.jpg) repeat-x; } #mainMenu ul li { float: line-height:30 margin-right:1 cursor: } /*=====主导航结束=====*/ 9、鼠标手势在 XHTML 标准中，hand 只被 IE 识别，当需要将鼠标手势转换为“手形”时，则将“hand” 换为“pointer” ，即“cursor:” 二．注释书写规范 1、行间注释直接写于属性值后面，如.search{ border:1px solid #/*定义搜索输入框边框*/ background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/ } 2、整段注释分别在开始及结束地方加入注释，如/*=====搜索条=====*/ .search { border:1px solid # background:url(../images/icon.gif) no-repeat #333; } /*=====搜索条结束=====*/ 三．样式属性代码缩写 1、不同类有相同属性及属性值的缩写对于两个不同的类， 但是其中有部分相同甚至是全部相同的属性及属性值时， 应对其加以合 并缩写， 特别是当有多个不同的类而有相同的属性及属性值时， 合并缩写可以减少代码量并
易于控制。如#mainMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:30 overflow: } #subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:20 overflow: } 两个不同类的属性值有重复之处，刚可以缩写为#mainMenu,#subMenu { background:url(../images/bg.gif); border:1px solid #333; width:100%; overflow: } #mainMenu {height:30} #subMenu {height:20} 2、同一属性的缩写同一属性根据它的属性值也可以进行简写，如.search { background-color:#333; background-image:url(../images/icon.gif); background-repeatno- background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; } 3、内外侧边框的缩写：
在 CSS 中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不 同时也可直接缩写，如.btn { margin-top:10 margin-right:8 margin-bottom:12 margin-left:5 padding-top:10 padding-right:8 padding-bottom:12 padding-left:8 } 则可缩写为.btn { Margin:10px 8px 12px 5 Padding:10px 8px 12px 5 } 而如果当上边与下边、 左边与右边的边框属性值相同时， 则属性值可以直接缩写为两个， 如.btn { margin-top:10 margin-right:5 margin-bottom:10 margin-left:5 } 缩写为.btn {margin:10px 5} 而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如.btn { margin-top:10 margin-right:10 margin-bottom:10 margin-left:10 } 缩写为：
.btn{margin:10} 4、颜色值的缩写当 RGB 三个颜色值数值相同时，可缩写颜色值代码。如.menu { color:#ff3333;} 可缩写为.menu {color:#f33;} 四．hack 书写规范 因为不同浏览器对 W3C 标准的支持不一样， 各个浏览器对于页面的解释呈视也不尽相同， 比 如 IE 在很多情况下就与 FF 存在 3px 的差距，对于这些差异性，就需要利用 css 的 hack 来 进行调整，当然在没有必要的情况下，最好不要写 hack 来进行调整，避免因为 hack 而导致 页面出现问题。1、 IE6、I}
我要回帖
更多推荐
- ·深夜为何容易emoemo文案,句句戳心窝
- ·朋友圈很火的一段话文案｜很旺自己的高级感金句
- ·她你叫什么名字 翻译？
- ·百度百发理财在线咨询怎么样
- ·新疆羊脂玉的价格值钱吗知乎
- ·支付宝到底是怎么了，网友问马云：马云也十分不解
- ·Win10完整版是怎么实现w
- ·APP七派娱乐下架了嘛
- ·每小时10几公里的风算大风吗？
- ·红米pro良值pro手柄怎么链接接手柄
- ·腾讯视频买了vip后，有些电影还付费是什么鬼
- ·1999年7月10日出生到2018年多少岁了？
- ·怎么解除苹果手机下载限制
- ·什么手机可以多重曝光
- ·华为P20的指纹键是多功能的吗
- ·淘宝客服旺旺转接到另一旺旺是怎么做到的
- ·穆天阳舔宛情塞东西轮滑怎么样，好不好的默认点评
- ·苹果6p摔弯了，有什么办法不
- ·185海尔净水机机958元值得入手吗
- ·为什么我家30m网速多少10M每秒 能不能电脑设置到100M每秒
- ·我想把div（用js遍历相同class的div的class）板块进行放到ul，li里进行横向排列
- ·didnapper文件？
- ·如何评价三星笔记本三星星曜penn
- ·图文详解手机淘宝怎么投诉卖家的流程以及投诉卖家有
- ·网上来这看球吧有什么网站和软件啊??⑨买-球在哪？
- ·如何看待B站相关质疑问题下反驳就是B小将的言论
- ·怎么在微信小程序开店
- ·2015年在巴西6号球员开的足球联赛4号是谁
- ·真不懂球赛和人缺少运动会怎么样有什么好看的。该运动的人不运动，该休息的人却在赛场上挥洒汗水。。
- ·阿根廷红虾和什么相克
- ·看了这轮德甲球队全败，我只想说财政健康没
- ·象棋残局22关怎么过
- ·肩膀受伤是肩袖损伤还是slap损伤，求医
- ·詹姆斯在NBA地位如何 看看杜兰特是怎么说的
- ·舒适堡健身房私教课过期怎么退费
- ·怎么练出强壮宽厚的背部肌肉
