css技巧及命名规范

《css技巧及命名规范》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、CSS控制一行文字到一定长度以省略号代替我们用DIV+css布局的时候。往往会遇到一行一行的列表行。那么列表的长度我们可以以DIv的长度来控制，但是超出的部分我们想用省略号来代替的话，代码应该怎么写呢？下面我们来一起写一下.tjspcpmc{width:135px;height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#FF5300;font-size:13px;text-align:center;}以上代码分析.tjspcpmc类名称text

2、-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

3、内容: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标题:t

4、itle主导航:mainNav(globalNav)顶导航:topnav边导航:sidebar左导航:leftsideBar右导航:rightsideBar旗志:logo标语:banner菜单内容1:menu1Content菜单容量:menuContainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示)容器:container内容:content搜索:search登陆:login功能区:shop（购物区）当前的current2.样式文件命名主要的:master.

5、css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.cssdiv+css使用技巧包括（IE61px弹出窗口背景变灰超链接的抒写顺序等等一系列的技巧1，ul方面的问题：默认的ul的margin和padding不是0，如果在导航中用到了左浮动的li，往往会把外部的div撑大，导致页面变形，这就需要我们在写代码的时候不要忘记ul{margin:0px;padding:0px;}2,img方面的问题：这里牵涉的不同浏览器的问题，ie6是一直让网页设计师最头疼的一个问题

6、，关于图片，这里有一个小小的问题，有时ie6里显示的图片height总是要大于准确值，这里就需要我们记住下面这一点img{display：block}3，overflow方面问题：有时我们会看到，一些公司的注册协议都是好长好长的，但又不能把页面拉的太长，这就用到了overflow，我们可以把div的style里加上这个：overflow：auto4，小窗口弹出的问题：当我们点击某个按钮，可能会看到一个小窗口弹出，而窗口其它的部分都变了灰色，这是怎么实现的呢，其实很简单div+css就可以实现：css部分：.black_overlay{  d

7、isplay: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;  backgrou

8、nd-color:white;  z-index:1002;  overflow:auto;}.white_content2{  display:none;  position: