css+div代码讲解

divcss入门教程讲解

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。我们为大家收集整理了关于divcss入门教程，以方便大家参考。

做前端开发的朋友都知道css，但是好多人还不知道css怎样命名才算是规范的，其实css命名规范有很多版本，看自己对哪种比较适合或者说习惯。

在DIV+CSS网页中时常使用html注释与css注释，而各种注释大多作用是在重要代码处加上注释说明注明意思。比如写了一段代码是比较特殊的时常需要改动的CSS代码，为了以后一下即可找到此段代码，这个时候加入CSS注释加以说明，即可起到说明提示作用。

有时候，我们需要对网页某个区域的文字竖排，竖向排列，横向的当然大家都见惯了，对于竖排，一时间找不到思路了。

在XHTML中定义ID、CLASSS都用得上，主要是方面CSS定义样式时能一眼看穿。

俗话说，细节决定成败，我们只要在web前端开发学习中不断总结不断改变，才会有所成绩的。

标准之路首页CSS版式布局DIV+CSS教程DIV+CSS实例常用代码站长杂谈技术文档资

源

下

载

图片素材

今天我们开始学习《十天学会web标准(div+css)》的html列表，包含以下内容和知识点：

横向列表菜单

用图片美化的横向导航

css Sprites

一、横向列表菜单 

前边学习过纵向导航菜单，又学习了float属性，那么要实现横向导航菜单是不是很简单了，只需要

列就可实现了。把第四节的代码拿过来直接用，修改后的代码如下：

提示：可以先修改部分代码后再运行

第七天󰀃横向导航菜单

html1-transitional.dtd">

运行代码复制代码页码，1/6第七天 横向导航菜单

2012-3-10mk:@MSITStore:D:\我的文档\桌面\十天学会DIV+CSS(WEB标准).chm::/7.html

最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。以前许多朋友提问怎么让它

中，其实很简单，首先导航的宽度是固定的，然后设置margin:0 auto;即可实现了

为了用户体验更加友好，还是把a转换成块级元素，也可以给a设置背景色或背景图片来更加美观了

设置鼠标放上时的样式。

页码，2/6第七天 横向导航菜单

2012-3-10mk:@MSITStore:D:\我的文档\桌面\十天学会DIV+CSS(WEB标准).chm::/7.html

#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left;}

#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}

CSS教程基础

一、CSS 高度_css height

DIV CSS高度基础知识

这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为单位。

实例：

.yangshi{height:300px;}即设置了yangshi选择器对象高度为300px。

CSS高度单词：height

CSS 最大高度：max-height (IE7及以上版本浏览器支持)

CSS 最小高度：min-height (IE7及以上版本浏览器支持)

CSS上下居中：line-height

以上可跟值为数字加单位。

Html初始高度与DIV+CSS高度对照

以前html直接设置高度 width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。

实例：

我的高度为100px

我高度为50px

分别设置了高度为100px和50px的两行表格

接下来我们讲解CSS 高度使用方法及技巧

1、CSS自适应高度

一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即可实现此效果。同时也无需使用height:auto来实现高度自适应。通常默认情况下不设置高度，对象高度即是自适应高度。

2、固定高度及隐藏超出固定高度的内容

很多时候我需要设置对象固定高度同时让多余的内容不显示出来。

解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容）

如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效果同时设置对象为1px黑色边框演示，

CSS 代码：

.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}

Html body内代码：

测试内容高度超出演示实例，divcss5实例

CSS 固定高度效果截图：

divcss实用教程讲解

DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为

了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方

式实现各种定位。 我们怎幺学习divcss呢？没有关系，我们给大家整理了divcss实用教程，分享给大家！

 （一）如何解决邮箱css加载失败

 造成css加载失败的原因有很多，我也遇到过，这可能跟你代码出错，浏

览器、路径、编码等等都是有关联的。

 （二）CSSoverflow属性

 CSS之overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样

有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。让

我们分别看一下这几个值，并讨论一写共同用法和技巧。

 （三）CSS常用缩写方式

 我们使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。我们为大

家收集整理了关于CSS常用缩写方式

 （四）divcss的ExtGrid控件

 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的

字体字号样式，拥有对网页对象和模型样式编辑的能力。