css技巧及命名规范.doc

CSS控制一行文字到一定长度以省略号代替我们用DIV+css布局的时候。往往会遇到一行一行的列表行。那么列表的长度我们可以以DIv的长度来控制，但是超出的部分我们想用省略号来代替的话，代码应该怎么写呢？下面我们来一起写一下.tjspcpmcwidth:135px; height:14px; text-overflow:ellipsis ; overflow:hidden; white-space:nowrap; color:#FF5300; font-size:13px; text-align:center;以上代码分析.tjspcpmc 类名称text-overflow:ellipsis ; overflow:hidden; white-space:nowrap; 这三个属性即可实现超出的文字以省略号代替，并且不换行显示这行文字。最终的效果如下图text-overflow 的另一个属性 text-overflow:clip 请恰当应用初学DIV+css网页布局，利于SEO和记忆的命名规则！页头:header登录条:loginBar标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 友情链接:friendLink 页脚:footer 加入:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 投票:vote 合作伙伴:partner 版权:copyRight1.CSSID的命名外套:wrap主导航:mainNav 子导航:subnav 页脚:footer 整个页面:content 页眉:header 页脚:footer 商标:label 标题:title 主导航:mainNav(globalNav) 顶导航:topnav 边导航:sidebar 左导航:leftsideBar 右导航:rightsideBar 旗志:logo 标语:banner 菜单内容1:menu1Content 菜单容量:menuContainer 子菜单:submenu 边导航图标:sidebarIcon 注释:note 面包屑:breadCrumb(即页面所处位置导航提示) 容器:container 内容:content 搜索:search 登陆:login 功能区:shop（购物区） 当前的current 2.样式文件命名主要的:master.css布局版面:layout.css 专栏:columns.css 文字:font.css 打印样式:print.css 主题:themes.cssdiv+css使用技巧包括（IE6 1px 弹出窗口背景变灰 超链接的抒写顺序等等一系列的技巧1，ul方面的问题：默认的ul的margin和padding不是0，如果在导航中用到了左浮动的li，往往会把外部的div撑大，导致页面变形，这就需要我们在写代码的时候不要忘记 ulmargin:0px; padding:0px;2,img方面的问题：这里牵涉的不同浏览器的问题，ie6是一直让网页设计师最头疼的一个问题，关于图片，这里有一个小小的问题，有时ie6里显示的图片height总是要大于准确值，这里就需要我们记住下面这一点 img display：block3，overflow方面问题：有时我们会看到，一些公司的注册协议都是好长好长的，但又不能把页面拉的太长，这就用到了overflow，我们可以把div的style里加上这个：overflow：auto4，小窗口弹出的问题：当我们点击某个按钮，可能会看到一个小窗口弹出，而窗口其它的部分都变了灰色，这是怎么实现的呢，其实很简单div+css就可以实现：css部分：.black_overlay display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=50);.white_content display: none; position: absolute; top:20%; left: 30%; width:outo; background-color: white; z-index: 1002; overflow: auto;.white_content2 display: none; position: absolute; top: 20%; left: 18%; width:896px; background-color: white; z-index: 1002; overflow: auto; text-align: center;.qpshcom background-color: #efefef; color: #666666; border-width: 1px; border-color: #cccccc; border-style: solid; margin: 6px; padding: 6px; font-size: 14px; line-height: 200%; float: midden;div部分：打开按钮部分：onclick=document.getElementById(light).style.display=block;document.getElementById(fade).style.display=block关闭按钮部分：onclick=document.getElementById(light).style.display=none;document.getElementById(fade).style.display=none4，关于float的问题：有时候一些div会挤到页面的上方，把页面挤破掉，这里可能就是浮动引起的，这时候我们就用到了这个：clear：both，很不错的解决方法，不妨一试。5，height等于1px的div，在ie6中可能并不是1px，那怎么解决呢？不妨试一下：在这个div的style里加上font-size：1px;这样就ok了。6，下面再说一下id和class的问题：当一个div要在页面中多次使用时，不要用id，要用class，还有就是要用引用js的时候，样式最好不要用id，因为id要留给js使用，当程序员写后台用的是.net时，最好不用用id，id要留给程序员用，前台我们就用class好了。7，还是img问题，页面中最好不要用大块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些大的网站，现在都尽量把背景统一放到一张图片上，用background-postion来取得背景，这样其实也好，背景虽然大了点，但只需统一加载一次，就ok了，速度也不会太慢，可以好好学习一下。8，img的格式问题：最好的格式就是gif格式，即确保了背景透明，在ie6中又不会有阴影，有时gif图片会有锯齿，这就需要我们保存成web格式，设置一下matter，matter的值用背景颜色的值越相近越好。（当然有时迫不得已png的图片也会用到，这时就需要另外想办法了，