DIV+CSS开发技巧.doc

div+css 欢迎访问DIVCSS5-DIV+CSS网!本站以通俗易懂讲解和案例分析让您了解和轻松学习到DIV CSS(CSS技术)、轻松实现xhtml标准网页重构制作。说明：大家可以通过DIVCSS5主站上的所有免费CSS教程足可学会DIV CSS技术 - 如果需要深入系统、较短时间达到理想效果可进入CSS培训班学习提升自己，学习我们思维与创业精神;如需DIV CSS制作可以进入CSS5。 DIVCSS5-DIV+CSS网站使用指南-CSS学习指南：1、网页制作新手可以试着进入html基础栏目了解 /html/ 必备的HTML基础2、CSS新手可以从CSS基础开始学习 /rumen/ 必备的DIV CSS基础3、有了一定CSS基础和html基础，有兴趣可以进入其它栏目逐步了解CSS加深DIV+CSS技术，寻找自己疑问和答案! 4、有什么问题可进入CSS论坛(/bbs/)交流、提交疑,问我们将全力为您解答疑问！ 什么是CSS，CSS是什么？CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。在以后网页重构用到css的时候自然会对CSS样式更加深层次的认识CSS,知道CSS作用。什么是DIV+CSS，DIV CSS是什么？简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构（框架）标签，像、等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。CSS基本 css 高度(height) css 宽度(width) css 边框(border) css 背景(background) css float css font css 加粗 css 下划线 css 注解 css padding css margin css 文本 css 颜色 css 超链接 css 优化 css id css class css 列表 css 圆边 css 父级子级 css 指针 css 单位 css 定位 css 图片CSS入门基本教程 css 10分钟入门 css样式是什么？ 什么是css文件？ CSS 代码是什么？ 什么是CSS选择器？ DIV+CSS布局 CSS3_CSS 3.0技术介绍 引用CSS文件_css引入到html网页里方法 认识CSS,了解CSS作用？ 学习DIV+CSS有什么用？ 引用CSS文件到html网页里方法 DIV+CSS重构技术适合什么人学习？ 我不会程序也不懂程序，能学会DIV+CSS技术吗？ DIV+CSS规范命名集合 学习DIV+CSS网页制作的流程及如何学习CSS？ DIV+CSS中的class与id区别和用法Html入门基本教程 HTML是什么？ HTML页面结构 什么是源代码？什么是源文件？ htm、html、shtml区别 什么是伪静态？ 认识head标签 head之meta标签 head之link标签 UTF-8 GBK UTF8 GB2312之间的区别和关系制作CSS工具 DIV+CSS开发工具结合 DIV+CSS开发环境与CSS调试环境 DIV+CSS W3C验证 FlashFXP网页上传工具详细介绍-psd在线版 DIV+CSS辅助软件Dreamweaver介绍 IETester-必备浏览器集合安装包 开发DIV+CSS需要验证的浏览器原文网址: /DIV间距设置 DIV间距设置DIV间距设置专题-DIVCSS5 一、消除上下结构DIV之间距离让两个上下结构DIV块距离为零，通常新手在制作DIV CSS页面的时候，不会考虑到初始化CSS属性，这样各标签属性默认的CSS属性将会造成错位、兼容等问题。如上下结构的2个box DIV块，中间有一定间距无法消除 解决方法：在CSS里设置DIV标签各属性参数为0divmargin:0;border:0;padding:0;这里就设置了DIV标签CSS属性相当于初始化了DIV标签CSS属性，这里设置margin外边距为0；边框border属性为0和内补白也为0；这样相当于就初始化了DIV之间距各属性距离为0，这样就不会造成DIV直接有一定的距离。 当然推荐在制作开发DIV CSS的时候最好将网页CSS属性、常用网页标签初始化一下。CSS初始化技巧地址：/template/m17.html 二、让左右结构内容之间有一定距离如上图，左右结构内容之间一定距离设置技巧 解决方法与技巧：一般我们使用float 浮动属性（float:left（局左）、float:right（居右）来解决此问题。这样的布局一般总的宽度一定，只需左、右内容DIV宽度设置小于总宽度即可实现，注意的是宽度计算一定是包括自己设置宽度+边框宽度+padding宽度+margin宽度组成。提示：在DIV CSS制作中很多时候需要计算的如这样的布局。 copyright divcss5实例图： copyright divcss5实现以上效果，提示总宽度为200px,而左右布局都有边框并中间间隔一定距离，这里为了样式所以距离设置比较大。 CSS代码：.div-cwidth:200px;.div-a float:left; width:50px; border:1px solid #999; height:60px;.div-b float:right; width:120px; border:1px solid #999; height:60px; copyright divcss5 Html代码： 完整DIV+CSS代码： DIVCSS5案例.div-cwidth:200px;.div-a float:left; width:50px; border:1px solid #999; height:60px;.div-b float:right; width:120px; border:1px solid #999; height:60px; 说明：1、实现设置总宽度为200px的(div-c)，左右DIV使用了float:left左浮动（局左）和float:right右浮动（局右），分别设置边框和宽度2、这里设置左右DIV块(即div-a和div-b)总宽度+边框小于总宽度(即div-c对象宽度) 总结：设置DIV之间距离无论对象之间有一定距离还是没有距离，我们都需要CSS初始化，并且有距离地方还需要计算宽度，遵循这条死定律 设置宽度之和+边框(border)+margin+padding小于等于总宽度，不然会造成左右结构布局错位、其他比较的错误或有差异。 如有疑问请到DIVCSS5的DIVCSS5研教室讨论区发表您的问题我们将第一时间为你解答。 copyright divcss5 相关阅读：CSS文字间距设置 copyright divcss5 CSS教程基础 css 高度(height) css 宽度(width) css 边框(border) css 背景(background) css float css font css 加粗 css 下划线 css 注解 css padding css margin css 文本 css 颜色 css 超链接 css 优化 css id css class css 列表 css 圆边 css 父级子级 css 指针 css 单位 css 定位 原文网址: /jiqiao/j231.htmldiv+css网页的内容显示不完整的诊断 div+css网页的内容显示不完整的诊断我们常常在IE6版本的浏览器查看一个网页显示完整，而在IE7及以上版本浏览器、火狐等浏览器上内容显示不完整-DIV+CSS网页内容显示不完整诊断教程。 样式截图如下：说明：最后一排的内容文字只显示了一半。 分析造成原因：1、css中设置了高度2、设置了css样式表属性overflow:hidden，隐藏超出指定宽度、高度的对象-css隐藏。 解决方法：1、css中设置了高度取消其对象的高度（height）css样式，即可兼容各浏览器，内容也会显示完整。如果取消了高度让网页布局左右内容板块边框不对齐，你可以不取消高度，但是你需要减少内容，将显示不完整的内容去掉。 copyright divcss5 2、设置了css样式表属性overflow:hidden，隐藏超出指定宽度、高度的对象。一般设置高度同时设overflow:hidden样式，会造成在IE6中也让内容显示不完整。解决办法如第一点，如果你不取消高度宽度限制条件下，你可以减少内容。 为什么在IE6中设置了高度也能显示完整，而在其它浏览器中却显示不完整？答：因为IE6内核的原因，你设置了高度，但你内容超出设置高度，他将自然的撑破你设置的高度宽度，而在IE7、IE8、火狐等浏览器中将不能撑破设置的高度。 当然如果你想你设置的内容再多也不撑破你设置的高度宽度（包括IE6中），你可以在设置高度和宽度同时再设置overflow:hidden属性样式，这样在IE6中也不会撑破你设置高度和宽度。你可以了解更详细隐藏内容方法。div+css隐藏内容方法 copyright divcss5 原文网址: /jiqiao/j106.html设计网页效果图与DIV+CSS关系 设计网页效果图与DIV+CSS关系接下来就设计好网页美工图才DIV+CSS制作，还是直接进行div+css重构，不设计网页美工图片展开回答与介绍，让大家心里有底，让大家不再困惑！ 这里肯定地说在网页制作特别是DIV CSS重构前是需要制作好网页美工图片的。 copyright divcss5 需要先设计网页美工理由：1、一般网络公司给客户做网页前都是需要写方案及文档，自然也需要制作出效果图给客户确定。2、仿制别人网站。这种情况大部分技术都不需要制作网页美工图，但是却相当于制作了网页美工图，如网页制作时候的网页图片素材都是从被仿网页下载扣来的，而制作网页样式也是跟着被仿网页样式制作，一定程度上说相当于也是先制作了网页美工图，区别是在这种情况下无需你再切图。3、项目开发。特别对于一般像样的网站项目，都是必须要求出效果美工图的。 copyright divcss5什么情况下无需先出美工图1、仿制别人网页2、没什么网页美工要求（很少），只技术自己给自己制作一个网页。 先设计好网页美工图好处1、网站整体风格及美工可控制2、在制作的时候节约时间。相信试过直接制作DIV+CSS的朋友，知道自己在制作网页的时候很浪费时间，因为每做一点就会思考接下来怎么设计美观，从而一个小部分可能会浪费你很多时间。3、网页素材因素。因为在制作一个网页是需要图片和图标素材的，如果是先做美工图可以不愁素材。 总结：通过以上介绍希望大家能认识到一般的网站项目和网络公司都是要求对自己要制作的网站进行先出网页美工图的。如果不会美工设计怎么办？大家可以进入淘宝、百度有啊等网站寻到技术、或自己找能设计网页美工的美工技术制作设计等方法解决美工问题。 原文网址: /jiqiao/j103.htmlDIV+CSS网页错位诊断 DIV+CSS网页错位诊断DIV+CSS网页错位诊断常见DIV+CSS网页错位问题1、网页在某版本的浏览器中显示正常，不同其它版本浏览器显示错位不正常2、本来是左右结构网页布局，但是左右成上下结构错位3、文字列表型字行在不同浏览器中高度不一等等. 解决CSS网页错位总体思路1、遇到在不同版本浏览器中显示高矮不一可以使用CSS hack来解决2、如果左右结构网页布局成了上下结构布局。解决方法是检查float浮动是否设置好；检查左右宽度是否计算正确，是否设置左右宽度大于总宽度；div开始与div结束包含是否正确，可以使用设置border边框来验证，是否少了div标签结束或多了div。3、字体高度不一致，有没有设置line-height或height属性来控制字行间距、CSS 字间距。4、可能是你CSS 注释有问题。 如果有什么疑问请进DIV+CSS研教室-提问解决！ 原文网址: /jiqiao/j102.htmlheight使用技巧 CSS中min-height使用技巧DIV+CSS中最小高度设定min-height设定 最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定，超出就自动向下延伸，但到目前为止，只有Opera 和 Mozilla 支持，IE7以上版本支持，如何在现有基础上（IE6 80-90%），合理、妙用最小高度了？ 假定有二个BOX（box1和box2），我们都设置最小高度为150PX。 以下是引用CSS片段：div.box1,div.box2width: 300px; min-height: 150px;background: #EEE;float: left;margin-right: 20px; 以下是引用HTML源代码片段：IE6中没保持最小高度为150px所有IE支持保持最小高度为150px 现在的效果，IE6及部分IE7版本中没保持最小高度为150px。 解决的方法提供css hack来设定IE6高度 以下是引用CSS片段：div.box1,div.box2width: 300px; min-height: 150px;background: #EEE;float: left; margin-right: 20px;div.box2*height:auto !important;*height:150px; min-height: 150px; 以上是通过对box2设置说明如下：*height:auto !important;*height:150px;来区别IE6,IE7,及其它浏览器来实现兼容最小高度-你可能需要了解CSS hack之区别不同浏览器的写法。 通过以上div+css实例希望你能了解各浏览器支持最小高度（min-height:）方法，这里用了css hack方法来区别ie6和部分ie7中不支持min-height方法。查看min-height在线演示 原文网址: /jiqiao/j100.htmlCSS代码优化方案 CSS代码优化方案div+css代码优化方案介绍-css代码优化篇 css代码优化作用与意义1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度2、便于维护。简化和标准化css代码让css代码减少，便于日后维护3、让自己写的css代码更加专业。 css优化方法-需要优化css代码地方1、缩写css代码。2、排列css代码。3、同属性提取共用css选择器。4、分离网页颜色和背景设置样式（较大站点需要注意）。5、条理化css代码。 实例讲解以上几点div css优化方法1、缩写css代码常用需要缩写css属性代码如下：background(背景属性-CSS手册详细了解background手册)未优化前background-color:#FFF;对应属性为背景颜色为白色background-image:url(divcss5.gif);对应属性是设置divcss5.gif图片为背景background-position:bottom;背景图片是居底部background-repeat:repeat-x;背景按X坐标（横坐标）重复延伸以上CSS代码可以简写为background:#FFF url(divcss5.gif) repeat-x bottom; copyright divcss5 解释：背景颜色为白色，并以X坐标重复divcss5.gif图片，并且图标居下。未优化css background属性相同 margin(外补白属性-CSS手册详细了解margin手册)未优化前margin-left:5px; 意思为靠左5pxmargin-right:6px; 靠右6pxmargin-bottom:7px; 底部延伸7pxmargin-top:8px; 顶部延伸8px优化简写为margin:8px 6px 7px 5px; 意思和属性效果同上，可详细了解css margin介绍 padding(内补白属性-CSS手册详细了解padding手册)未优化前padding-left:5px; 意思为左补白5pxpadding-right:6px; 右补白6pxpadding-bottom:7px; 底（下）补白7pxpadding-top:8px; 顶（上）补白8px优化简写为padding:8px 6px 7px 5px; 意思和属性效果同上，可详细了解css padding介绍 border(边框属性-CSS手册详细了解border手册)未优化前border-color:#000000;边框颜色为黑色border-style:solid;边框样式为实线border-width:1px;边框宽度为1px copyright divcss5 可以简写为border:1px solid #000000;意思同上未优化前如果是只设置左边边框为1px，颜色为黑色的实线css代码如下border-left:1px solid #000000; font(字体属性-CSS手册详细了解fonts手册)字体的属性如下：font-style:italic; 字体样式font-variant:small-caps; 字体异体font-weight:bold; 字体加粗font-size:12px; 字大小为12pxline-height:22px;字行高为22px font-family:黑体 字体为黑体字可以缩写为一句：font:italic small-caps bold 12px/22px 黑体; 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值了解css font技巧。了解px是什么 2、排列css代码。通常我们代码如下排列 这样将占css文件很多的空格和回车位空间，这里还占用了12行css文件空间建议你改写为 /* CSS 实例演示图 */-这里是css 注释.yangshi font-size:12px;border:1px solid #000000;padding:5px;.yangshi2 font-size:12px;border:1px solid #000000;padding:5px; 这样将节约空格和回车位，及css文件行数，从而节约代码文件字节。 3、同属性提取共用css选择器。这个要了解的是如果有两个部分的css属性如宽度高度字体颜色都相同，而有很小一点不同，这个时候我们就需要提取大家相同的css样式出来，单独命名一个css属性选择器，从而节约css代码。如：/* CSS div+css实例演示图 */.yangshi font-size:12px;border:1px solid #000000;padding:5px; width:25px; .yangshi2 font-size:12px;border:1px solid #000000;padding:5px; width:50px; 这里的yangshi和yanshi2两个样式有相同的字体大小为12px，边框相同,内补白相同，只有宽度不同，这个时候我们就可以提取他们相同部分并重新新建个css选择器和重用 新建css属性选择器演示如下.gongyongfont-size:12px;border:1px solid #000000;padding:5px;.yangshi width:25px;.yangshi2width:50px; copyright divcss5这样在调用css时候-了解css 引入div css样式div css样式2这样就可以让通过调用相同css样式，再分别调用不同css属性类即可，以上实例还不能展示他的优点，但是如果代码多而且有很多地方如以上特点，这样将显示其功能特点。 4、分离网页颜色和背景设置样式（较大站点需要注意）。这点有以上第三点同属性提取共用css选择器特点，但是区别地方，如果站比较大，需要改一个地方即可改变整个站点网页的字体颜色样式，背景图案颜色，边框颜色样式。这个时候我们将需要在div+css开发的时候特别将的基本字体样式、背景图案颜色、边框等颜色提取到一起或放到一个css文件里，这样一来便于我们维护管理整个站点基本样式。 5、条理化css代码。条理化css代码意思是将css代码整理归类，如控制头部、局部、底部的css代码选择器样式区别开来分别放到一起并与其他地方css代码互相隔开。如头部的css代码与内容区css代码回车各行隔开如以上“toubu”与“dibu”以行隔开得以区分，好处是以后维护方便，便于辨认更改维护。 divcss5通过以上实例讲解的css 优化方法及css优化方案希望对大家有帮助。 原文网址: /jiqiao/j97.html分辨率不同，调用不同的css文件方法 =1) var IE1024=; var IE800=; var IE1152=; var IEother=; ScreenWidth(IE1024,IE800,IE1152,IEother) else if (window.navigator.userAgent.indexOf(Firefox)=1) file:/如果浏览器为Firefox var Firefox1024=; var Firefox800=; var Firefox1152=; var Firefoxother=; ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) else file:/如果浏览器为其他 var Other1024=; var Other800=; var Other1152=; var Otherother=; ScreenWidth(Other1024,Other800,Other1152,Otherother) function ScreenWidth(CSS1,CSS2,CSS3,CSS4) if (screen.width = 1024) & (screen.height = 768) setActiveStyleSheet(CSS1); else if (screen.width = 800) & (screen.height = 600) setActiveStyleSheet(CSS2); else if (screen.width = 1152) & (screen.height = 864) setActiveStyleSheet(CSS3); else setActiveStyleSheet(CSS4); function setActiveStyleSheet(title) document.getElementsByTagName(link)0.href=style/+title; file:/- copyright divcss5 解释：var IE1024=;var IE800=;var IE1152=;var IEother=; 引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. var Firefox1024=;var Firefox800=;var Firefox1152=;var Firefoxother=; 引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 var Other1024=;var Other800=;var Other1152=;var Otherother=; 引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 不判断分辨率，只判断浏览器 应E.Qiang提议，编如下代码。实现根据浏览器类型自动调用不同CSS。 调用不同CSS文件JS代码： =1) file:/如果浏览器为IE setActiveStyleSheet(default.css); else if (window.navigator.userAgent.indexOf(Firefox)=1) file:/如果浏览器为Firefox setActiveStyleSheet(default2.css); else copyright divcss5 file:/如果浏览器为其他 setActiveStyleSheet(newsky.css); function setActiveStyleSheet(title) document.getElementsByTagName(link)0.href=style/+title; file:/- 解释： copyright divcss5 如果浏览器为IE，则调用default.css如果浏览器为Firefox，则调用default2.css如果浏览器为其他，则调用newsky.css用法：放在中即可。 copyright divcss5原文网址: /jiqiao/j92.htmlcss background之设置图片为背景技巧 css background之设置图片为背景技巧css background之设置图片为背景技巧-css 背景 Background是什么意思，翻译过来有背景意思。同意在css里面作为css属性一成员同样是有背景意思，并且设置背景图片、背景颜色、背景图片截取等样式。 首先先来看看background有那些值（可进入CSS手册的background详细了解） 可以按顺序设置如下属性（可点击进入相应的css手册查看使用）：background-color 背景颜色background-image 背景图片background-repeat 背景重复background-attachment 背景图片是固定还是滚动background-position 背景图片的定位 接下来我们重点来讲解css background通常的使用方法首先我们来看下面一段代码background:url(bgimg.gif) no-repeat 5px 5px;如下图解释 从图上的CSS background解析图我们可以详细了解到background的css属性使用方法。 background:url(bgimg.gif) no-repeat 5px 5px;这样的css背景表达可以节约和优化css文件代码。学习者可以使用和测试更改background各个属性来了解和掌握关于css background 原文网址: /jiqiao/j80.htmldiv css 下划线 div css 下划线CSS 下划线，div css下划线 接下来，我们来介绍通过css样式对文字、区域设置下划线样式css下划线 常见和常用的下划线样式1、文字带下划线的方式显示使用html中标签即可对加u标签的文字加下划线，实例样式如下图 copyright divcss5但是注意的时候u标签是以开始结束的一对标签，我是被加下划线的 2、超链接文字下划线-css 超链接详细介绍我们常常需要让带超链接的文字，以有下划线方式显示，而鼠标放上去下划线不显示方式显示带链接的文字，接下来我们通过css对超链接下划线设置使用代码text-decoration，可进css手册查看text-decoration详细介绍语法： text-decoration : none | underline | blink | overline | line-through text-decoration参数： none : 无装饰 blink : 闪烁underline : 下划线line-through : 贯穿线overline : 上划线实例 根据图例看出“div css”被加入css链接，同时在css样式也设置了css属性a被加下划线（a text-decoration:underline;），但鼠标放上去（a:hover text-decoration:none;）下划线则被去掉的 3、对超链接文字鼠标放上去出现下划线 根据第二点（2、超链接文字下划线）中通过css来让超链接文字带下划线，鼠标放上去则去掉下划线来说，第三点则是刚好与第二点向反，超链接自然不显示下划线a text-decoration:none;，而鼠标放上去出现下划线a:hover text-decoration:underline;。 copyright divcss5 4、对某区域鼠标放上去出现下划线 这个在我们普遍使用，我们可以对其div设置一个class样式(id与class区别)如：.ys:hover text-decoration:underline; cursor:pointer;， 解释cursor这个是鼠标标签（cursor介绍），pointer这个是手指形式显示。 html源代码,页面源文件通过这样对“ys”设置了css样式，则在浏览器中当鼠标放到文字上时就会出现下划线，而这里不是因为有超链接才有下划线，同超链接原理相同。 原文网址: /jiqiao/j77.htmlCSS不换行与CSS换行 CSS不换行与CSS换行DIV CSS换行_DIV CSS不换行_CSS文字换行_css换行,css不换行案例讲解 通过css可以使对应div标签内的文字换行或不换行设置操作，通过不同CSS样式对文字样式设置-css文字。 需要换行及方法1、可以使用强制换行符号换行。如果在一个文章里可以在文章需要换行的地方加入即可实现自动换行-常说的小换行，与换行前没有间隔。实例如下图 换行说明图无间隔小换行样式-br使用 2、可以使用标签来实现大换行。如果在一个文章里需要分段换行形式，可以使用标签来实现换行，但是需要注意的是p标签的用法。 大换行有间隔样式 3、可以使用CSS设置宽度自动换行。我们可以在一个div里，添加一个div并加入css样式，对加入的div设置对应的css宽度即可实现自行换行。 4、连续英文字母及数字换行使用CSS换行。用到的css 属性word-wrap中word-wrap: break-word属性及值。大家可能会遇到这种问题，但我们按照第三种方法设置宽度来使内容换行，对于连续的数字和英文则无效，这时候就需要div css中对对应的div的css样式设置强制换行断行元素，word-wrap : break-word ;或者word-break:break-all;实现强制断行-可进入对应css手册查询更详细用法。如实例，在一个div设置了宽度为300PX的样式，中文可以自动转行、换行，但是连续英文和数字则会撑破设置的300px宽度，这个也算是css hack吧如下图 设置宽度未自动换行 copyright divcss5这时我们只需要在对应的div中加入css样式word-wrap:break-word ; 使用word-wrap:break-word 强制换行实例图 换行与不换行知识补充 copyright divcss5CSS设置不转行CSS属性标签:overflow:hidden 隐藏css 隐藏white-space：normal 默认 pre 换行和其他空白字符都将受到保护nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 设置强行换行CSS属性标签word-break: normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本 不换行及不换行方法-CSS不换行方法文章标题列表样式，希望不换行。如果我们对一个li的文章列表设置宽度，因文章标题过长文章标题而自动换行，这时候我们希望文章标题在一排显示不要它换行，而多余的也不希望它显示出来。这时候我们需要设置css li对应的li的css样式。未设置对应css样式如下图 通过上图可见为设置li样式，文章标题列表在固定宽度自动换行 解决方法，需要使用css设置对应的li css样式，需要加入高度和设置隐藏超出宽度文字如设置height:22px; overflow:hidden即可高度22px是一个li的高度。设置后效果图如下 添加overflow:hidden和高度后即可不显示超出文字-css 隐藏超出内容 2、两行带超链接栏目标题导航样式，不需要同一个超链接文字标题被换行扩展css 链接，css超链接。 以上的栏目3即是被上下分割，这样呈现样式不好看，这时候我们需要在对应的超链接CSS添加white-space:nowrap;即可实现同一个超链接不被自动分割成两排显示着这里，设置.yans a margin:0 5px;里面改成.yans a margin:0 5px;white-space:nowrap;即可，注意的是是对超链接的a设置css样式设置后的超链接样式如下图补充：对DIV对象强行换行可以使用display:block;-CSS手册了解 display属性 copyright divcss5以上即是div+css介绍通过css控制不同的换行即css 换行与css 不换行的实例与图例讲解，及解决方法。 原文网址: /jiqiao/j71.html不能以数字开头命名CSS伪类名 不能以数字开头命名CSS伪类名不能以数字开头命名CSS类 请不要以阿拉伯1、2、3、4开头来命名css伪类，不然将造成浏览器无法解释解析以数字开头命名的css类，最后造成类似css hack样不兼容，或直接以数字开头css名称的类无效（浏览器无法解释）。但是可以用字母命名加数字方式命名，切记不能用数字加字母或纯数字方式来命名css选择器。 copyright divcss5新手在div+css开发的时候，需要命名css伪类名称，如.abc，#bcd，这样的格式，很多人在命名css名称的时候都不知道怎么命名。甚至使用1、2、3、4等数字与英文字母的混合使用来命名。本身使用英文字母与数字混合使用是可以的，但是新手在命名的时候想到简便便直接用数字命名，或以数字开头命名css选择伪类名。 以下为案例截图及说明以下为正确的css选择伪类命名方式（纯英文字母命名选择伪类名、英文字母与数字混合正确方式） 以这种方法英文字母开头或纯英文字母开头的css命名规则才是正确，不会造成css属性无效方法规则。 以下为错误的css选择伪类命名方式（纯数字命名选择伪类名、数字开头与英文字母混合错误方式） 以这种方式命名的css选择属性类将使得浏览器不会解释，造成css无效。 通过div css介绍以上两个截图案例说明相信你对css命名规则有一定了解。 c