编程(样式-CSS)
Sep 7
单行文本的控制,以前是由程序员通过截取字符串函数实现的,而且兼容性不好,如果出现中文还会出现乱码。
how CSS realize the text exceeds the width displays an ellipsis
今天介绍的方法兼容IE和FF,看下面的详细介绍。
为了更符合实际,用一个div装起要调试的内容,并为这个div定义一个宽度。
例如:
css代码:
div{width:200px;}

html代码:
<div>
<span>CSS实现文字超出宽度显示省略号</span>
</div>

在IE中实现是非常简单的:

css代码:
span {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

但在FF中用上面的样式是实现不了的,因为text-overflow: ellipsis;是IE中特有的(非CSS标准)。现在在FF下看到的仅仅只是把溢出的内容切除了,说到“溢出切除”,这下说到点子上了,在FF中实现就要用到非常规的方法,一个标签作切除内容,再加一个标签作填补省略号用,并且加起来的长度就能超过容器的宽度,本例指的就是DIV的宽度200px,实现的想法就是这样。那么继续进一试验,关于切除内容,这个已经基本上解决了,那就来说补省略号,不用JS,用CSS实现的话就要用到伪对象after,伪对象不懂的就要先去温故或百度一下。先从HTML下手,为span标签外再加一层p标签(当然你也可以加其它标签的)。

html代码:
<div>
<p><span>CSS实现文字超出宽度显示省略号</span><p>
</div>

我们再为这个P标签加样式:

css代码:
p:after{
content:"...";
}

这样还不行,因为省略号是有宽度的,这样省略号就跳到一下行了,下面要做的就是让span加省略号的宽度不大于容器宽度(准确的说是相等),并且让省略号紧跟内容的内容,下面就是解决上面这些问题的CSS样式:

css代码:
p{clear:both;}
p span{
float:left;
max-width:175px;
}
p:after{
content:"...";
}

这里还要补充的一点是关于p和span的宽度用了“max-width”这个属性,IE不能解释该属性,而FF可以,这样就避开了IE对SPAN宽度的重新应用。上面说得有乱,归纳如下:

html代码:
<html>
<div>
<p><span>CSS实现文字超出宽度显示省略号</span><p>
</div>
<style type="text/css">
/*css代码*/
div{
width:200px;/*容器的基本定义*/
heiìht:200px;
backìround-color:#eee;
}
/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}/*FF下的样式*/
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}
</style>
</html>

Jul 13

如何给div加滚动条,div的滚动条设置
How to div and scroll, scroll bar to set div?
今天在弄一个div的弹出框,里面包含文字和图片,当文字过多的时候,图片会移出div ,怎么解决呢?
Box in Figure div a pop-up today, which contains the text and pictures, when too much text, pictures will be removed from the div, how to solve?

这时想到了设置一个div的滚动条。
设置方法如下:
直接为div指定overflow属性为auto且必须指定div的高度,如下:
<div style="position:absolute; height:400px; overflow:auto">
</div>
这里为了方便样式直接写上,样式可以根据具体需要设置在样式文件
如果要出现水平滚动条,则设置overflow-x:auto
同理,垂直滚动条为: overflow-y:auto
如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative
设置前的例子:
如何设置div滚动条“ /><br />设置后:<br /><img class=

Jan 27

有利于SEO的DIV+CSS的命名规则
Naming rules for SEO of DIV+CSS

搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范,下面

是目前流行的CSS+DIV的命名规则:
页头: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
版权:copyRight


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


样式文件命名
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css

Jan 24
W3C标准的了解及web/css 验证方法
   做界面设计,特别是网站建设的,对W3C这个专有名词应该多多少少耳熟能详。
   如果你需要网页设计刚刚里面,不知道直接设计的网站是否符合w3c的标准,不知道自己的水平到底怎么样,可以通过W3C提供的网页标准验证来检验一下你的水平啦!
   W3C是英文 World Wide Web Consortium 的缩写,中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。
  W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达成共识。
  W3C CSS验证服务是由W3C制作的一个免费软件,用于帮助Web设计者检查层叠样式表(CSS)。你可以在W3C提供的免费在线服务中使用,也可以下载后作为一个Java程序或者Servlet运行在自己的机器上。
  如果你是一个web开发者或者web设计人员,这个工具将是一个强大的助手,它不仅会将你所写的css文件和css的标准进行比较,帮你找出错误,笔误,误用等等,它还可以告诉你你的css中可用性上的风险。
    W3C网页标准验证服务地址
    css验证地址:http://jigsaw.w3.org/css-validator/#validate-by-uri
    这个css验证还是中的呢!如果通不过验证,会指出哪些地方出了问题。
    XHTML验证:http://validator.w3.org/
    和css验证的页面基本一样,只不过是英文的,也会指出验证通不过的具体地方。一般多出在事件和图片的对齐和ALT上。
 
Jul 11

 如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢?
一、IE边框若显若无,须注意,定是高度设置已忘记;
二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;
三、三像素文本慢移不必慌,高度设置帮你忙;
四、兼容各个浏览须注意,默认设置行高可能是杀手;
五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;
六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。
七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。
八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。
九、IE浮动双边距,请用display:inline拘。
十、列表横向排版,列表代码须紧靠,空隙自消须铭记。

分页: 1/3 第一页 1 2 3 下页 最后页 [ 显示模式: 摘要 | 列表 ]