body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
这会把网页内容都居中，所以在Content中又加入了
text-align: left 。
8、用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
9、CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container { position: relative }
这样容器内所有的元素都会相对定位，可以这样用：
如果想定位到距左30点，距上5点，可以这样：
#navigation { position: absolute; left: 30px; top: 5px }
当然，你还可以这样：
margin: 5px 0 0 30px
注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
10、直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
#navigation { background: blue; width: 150px }
较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？
不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。
HTML的SPAN和DIV的区别
SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。
SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。还有一个标识符具有类似的功能， SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML 代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。还有一个标识符具有类似的功能， DIV也被用来在HTML文件中建立逻辑部分。但与 SPAN不同，工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。 div布局时不能居中、居中失灵的解决 一般情况下，div不能居中，div居中失灵是因为页面没有声明引起的：加上 即可 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。如 .style{margin-left:auto;margin-right:auto;} 缩写形式为： .style{margin:0 auto;} 数字0 表示上下边距是0。可以按照需要设置成不同的值。 查看下面的例子： 以下为引用的内容： 注意，需要加上上面的那句 才能生效，要是不想要这句的话，也可以给body加一个属性： body{text-align:center;} 另外，让div内的内容（包括文字及图片）居中的代码是： text-align:center; 解决Flash 在Div中无法居中 以下为引用的内容： #banner{margin:0 auto;} -----用这个动画是距中了 #head{margin:0 auto;} ------用这个整个页面都距中啦~~ CSS学习知识点 1、css是什么？ CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML元素，用于控制网页的外观。 2、为什么使用css，优点是什么？ 1：【内容】和【表现】相分离 HTML文件中只存放文本信息，将样式部分放在一个独立样式文件中。页面对搜索引擎更加友好。 2：提高页面浏览速度 采用CSS布局的页面容量要比TABLE布局的页面文件容量小得多，前者一般只有后者的1/2大小。 3：易于维护和改版 只要简单的修改对应CSS文件，就可以重新设计整个网站的页面。 4: 使用CSS布局更符合现在的W3C标准 W3C组织是对网络标准制定的一个非赢利组织，像HTML、CSS、XML的标准就是由它来定制。 3、CSS样式表的调用方式哪几种？ 1、内部样式：把CSS样式表放到 蓝色14号文字 3、外部样式：把编辑好的CSS文档保存成“.CSS”文件，然后在 DIV+CSS网页布局技巧实例1：设置网页整体居中的代码 DIV+CSS网页布局技巧实例4：使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1； ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em; 边框(border) 边框的属性如下： ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下： ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：?color: transparent ?image: none DIV+CSS很实用的20个技巧 【导读】1. CSS字体属性简写规则一般用CSS 设定字体属性是这样做的：font-weight: bold; font-style: italic; font-varient: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif 但也可以把... 1. CSS字体属性简写规则 一般用CSS设定字体属性是这样做的： font-weight: bold; font-style: italic; font-varient: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif 但也可以把它们全部写到一行上去： font: bold italic small-caps 1em/1.5em verdana,sans-serif 真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及font-varient ，他们会使用缺省值，这点要记上。 2. 同时使用两个类 一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样： 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#H eader {} /*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 《网页设计》练习题集 一、单项选择题 1. 在HTML中，标记 《》试卷 得分 一、单选题（每题0分，共计0分） 得分 二、多选题（每题0分，共计0分） 得分 三、判断题（对的打“√”，错的打“×”；每题0分，共0分）得分 四、填空题（每题0分，共计0分） 得分 五、简答题（每题10分，共计100分） 1．3中的属性有三种取值，分别为哪三种？代表何意义？2．分析以下代码，并回答问题： <><>我们正在学习标记的嵌套。<><> 请简述上述代码的作用，并且描述每个标记及其属性的意义和作用。 3．创建一个用请求连接到的表单，表单名称为。 4．在5中，元素包含哪些属性？ 5．请阅读下面的代码，并按照要求作答。中的代码如下： 8．运用所学的复合选择器相关知识，为页面中的标题和段落文本设置样式，具体要求如下：1、所有标题颜色为红色，字号为14。2、为段落文本1和3添加下划线效果。 1 < > 2 <> 3 <> 4 < "8"> 5 <>无标题文档<> 6 <>并集选择器<> 7 < ""> 8 /*设置所有标题颜色为红色，14字体*/ 9 /*为段落文本1和3添加下划线效果*/ 10 <> 11 <> 12 <> 13 段落文本1，加下划线。<> 16 段落文本2，普通文本。<> 17 段落文本3，加下划线。<> 18 <> 19 <> 9．请阅读下面的代码，根据注释中的要求填写代码。< ""> { :200; :100; ;宋体; ; ; /*设置字号大小为12*/ ; ; /*设置字体行高为16*/ } <> 10．创建一个用请求连接到的表单，表单名称为。 一、选择题（每题2分） 1.以下关于HTML的基本标签说法正确的是（）。(选择一项) A:HTML共提供了６级标题， 2008-09-23 11:53 1、善用css缩写可以减少页面檔大小，提高下载速度，同时使代码简洁可读。 如：div{ border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px soli #cccccc; border-bottom:1px solid #cccccc; } 可以写为 p{border:1px solid #cccccc} 再如： div{ margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; } 可以改写为： /*注意上、右、下、左的书写顺序*/ div{margin:10px 20px 30px 40px} /*注意，数值与单位不能有空格，每个值之间用空格隔开*/ (详细请参考：css2参考手册、常用css缩写总结) 2、可以同时为一个html元素的class属性设定多个规则(多重class定义)。 通常我们写法为： 实际上我们可以为p元素指定多个规则，如： CSS： .a{…} .b{….} HTML： 该元素同时包括a和b中设定的样式 注意：多个规则之间用空格分开。 3、明确定义单位，除非值为0 忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”，但在css 中应该给出一个准确的单位。如：width:100px;height:50px;font-size:9pt ，0值除外，因为不论对于任何单位。0值的大小都是相等的。 微博微信营销及SEO优化技巧 CSS入门教程 这个文章只是为您介绍 CSS 的基础应用，指引您的一个入门的基础教程，主要目的是为推进 web 标准贡献自己的微薄之力。 说点我自己的体会，现在有好多人都在推广WEB 标准，其实对初学者来说，不需要刚学的时候就学标准，学点简单的还是容易入门的，因为现在 HTML 还在照样用啊，所以我希望初学者学习时不要非遵循标准，当你入门之后，你做网页的时候，发现使用表格特麻烦的时候你就该去寻求简单方法了，到时再学也不晚啊，如果你喜欢新技术那么你初学时就学标准吧，按个人的实际来行动吧。下面开始学习了 一、如何在 HTML 中应用 CSS。 您可以利用下列 3 种方式将 CSS 指定的格式加入到 HTML 中： 1. 在 HTML 文件里加一个超级连结，连接到外部的 CSS 文档。(外部连结 CSS) 这个方法最方便管理整个网站的网页风格，它让网页的文字内容与版面设计分开。您只要在一个 CSS 文档内（扩展名为 .CSS）定义好网页的风格，然后在网页中加一个超级连接连接到该文档，那么你的网页会按在 CSS 文档内定义好的风格显示出来了。 具体的使用防范是： 微博微信营销及SEO优化技巧 css知识点汇总
DIV+CSS网页布局技巧实例
DIV+CSS很实用的20个技巧
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的： 
Buy widgets
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS： h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px } 注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。 6. CSS box模型的另一种调整技巧 这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如： #box { width: 100px; border: 5px; padding: 20px } 这样调用它： DivCSS布局入门教程相当经典
HTML+CSS+Div测试习题
的作用是(B )。 A.标题标记 B．预排版标记 C.转行标记 D．文字效果标记 2．在CSS中使用背景图片需要使用参数（ B ） A．image B．url C．style D．embed 3．在CSS的文本属性中，文本修饰的取值text-decoration：overline表示（C ）; A．不用修饰B．下划线 C．上划线D．横线从字中间穿过 4．在CSS的文本属性中，文本修饰的取值text-decoration：underline表示（ B）A．不用修饰B．下划线 C．上划线D．横线从字中间穿过 5.下面哪一个属性不是文本的标签属性（ A ） A．nbsp; B．align C．color D．face 6．在CSS的文本属性中，文本修饰的取值text-decoration：line-through表示（D）： A．不用修饰B．下划线 C．上划线D．横线从字中间穿过 7．外部式样式单文件的扩展名为（ D ） A．.js B．.dom C．.htm D．.css 8. 超级链接是一种( A )的关系。 A. 一对一 B. 一对多 C. 多对一 D. 多对多 9. 关于文本对齐，源代码设置不正确的一项是：（ A ） A．居中对齐：
12.下面哪一项是换行符标签（ C ） A． B． C．
D． … 13.下列哪一项是在新窗口中打开网页文档。（ B ） A．_self B．_blank C．_top D．_parent 14.下面不属于CSS插入形式的是( A ) A.索引式 B.内联式 C.嵌入式 D.外部式 15．网页的特征是（A） A．HTML文档的基本特征——超文本 B．标识语言，网页中不能没有标记（Tag） …HTML+CSS+JS(容易)
传智播客<3><> <>北京传智播客<><>上海传智播客<> <>广州传智播客<><>使用内嵌式样式，对应代码如下：< ""> (2){;} <>认真分析以上代码，写出哪些文字的颜色会变为红色？ 6．请阅读下面的代码，并按照要求作答。中的代码如下：
传智播客<3><> <>北京传智播客<><>上海传智播客<> <>广州传智播客<><><> <>武汉传智播客<><>使用内嵌式样式，对应代码如下：< ""> {;} <>认真分析以上代码，写出哪些文字的颜色会变为红色？ 7．简要介绍5中视频和音频的一些常见格式。 总分题号一二三四五题分 得分
二级标题文本。<2> 14
三级标题文本,加下划线。<2> 15
HTML+CSS测试
字号最小，
字号最大 B:段落标签中可以包含多行文字，文字内容将随浏览器窗口大小自动换行C:水平线标签
的作用是为了让版面更加清晰直观 D:标签……的作用是使字体加粗并斜体显示 2.在CSS中，可用于设置文本的行高的属性是（）。(选择一项) A:text-indent B:letter-spacing C:text-align D:line-height 3.在制作网页时，以下关于overflow属性说法正确的是（）。(选择一项) A:overflow属性的常见值有visible、hidden、scrolling、auto B:当属性值为hidden时，如果内容被修剪，则浏览器会显示滚动条以便查看其余内容 C:visible为overflow属性的默认值，内容会被修剪，并且其余内容是不可见的D:可以使用overflow属性与盒子宽度配合使用，清除浮动来扩展盒子的高度4.在HTML中，以下关于CSS样式中文本及字体属性的说法，错误的是（）。(选择一项) A:font-size用来设置文本的字体大小 B:text-align用来设置文本对齐方式 C:font-type用来定义字体类型 D:font-weight用来定义字体的粗细 5.以下关于复合选择器说法错误的是（）。(选择一项) A:复合选择器分为后代选择器、交集选择器和并集选择器 B:后代选择器的写法就是把外层的标签写在前面，内层的标签写在后面，之间用空格分隔 C:交集选择器是由两个选择器直接连接构成，两个选择器可以是类选择器或者ID选择器DIV+css 代码简写技巧
CSS入门教程