所有由Wuweiwei发布的文章

SZ,请别将我遗忘

这次带着淡淡的哀伤离开SZ…… 在深圳奋斗7年,辗转几次,最终还是要说一声再见。告别我曾经奋斗过的地方,告别一个梦想的城市。 深圳,怀着梦想来,带着梦想离开。人生,总会有一座城充满令人亢奋的回忆。 2006年7月-2007年8月,2008年11月-2013年4月,2013年7月到2014年5月。这些日子,我在SZ。

阅读 1,263 评论 0 阅读全文

关于FONT-ICON在网页设计中的运用

在IUNI商城和IUNI Town的项目开发中,我在网页中使用字体ICON方面做了一些尝试,通过与图片对比,发现兼容效果非常好。 FONT-ICON在CSS3中被普遍使用,但实际上css2中就已经支持了这个font-face属性,通过自定义字体,可以实现很多图标效果。 为什么舍弃png24的图标使用ICON呢,主要优点如下: 字体ICON阅读全文…

阅读 1,498 评论 0 阅读全文

海洋世界

去年去魅族参加 interview 在珠海短暂停留,第一印象是个整洁干净,绿化比较给力。这次来珠海纯粹是游玩,算是第一次在珠海停留。 尽管一天半的旅途非常的疲惫,感觉大多数时间都在赶路,这就是自驾游没有规划好带来的弊端。珠海海洋王国坐落在横琴岛上面,由于最近几年才规划开发,感觉很给力。只是安排的时间太短,早上10点到下午3点,不到5个钟头阅读全文…

阅读 1,427 评论 0 阅读全文

2013年回首,2014年从每天开始

时间过的真快,2014年已经过了快两个月了,去年的总结还没好好写下来,真是罪过罪过。 尽管2013年已经过去,但也该好好总结下。 2013年初,毅然决然地从腾讯离职,一方面是想结束双城生活照顾到家庭,另一方面是想自己开辟一块新的天地,准备在电子商务上大干一番。没曾想熬了三个多月,终于抵不住日渐寡淡的店铺生意,开始寻找合适的工作。刚开始打算阅读全文…

阅读 709 评论 0 阅读全文

css+js解决文本两端对齐以及分散对齐

一个很简单的设计排版样式,A图表示居左对其,但实际上我们想要的可能是B所示的对齐方式。

这就是传说中的两端对齐 还有一种更确切的说法是两端分散对齐。

问题

最开始的时候 ,我试图使用CSS来解决这个小问题,查阅了很多办法,发现没有一种完美兼容的解决方式。

在一些csser使用了css的两端对齐方案是基于 text-align:justify 及 text-align-last:justify 实现来解决这个问题,但是需要在每个字的后面加上空格。

这个办法是这样的:

原理:是通过调整字之间的空格大小来达成的,所以需要事先在每个单词和汉字间都插入一个空格。

ie下 text-align:justify; 是可以产生作用的。所以在ie下很容易实现:

p { 
text-align:justify;
text-align-last:justify;
}

text-align-last 在Firefox12-17下仍处理实验支持阶段,需加前缀 -moz-,FF下这样实现

p{
text-align:justify;
-moz-text-align-last:justify;
}
Chrome, Safari, Opera实现比较麻烦:Chrome23, Safari5.1.7, Opera12.11 不支持 text-align-last, 但支持 text-align 的 jsutify, text-align:justify 不处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以使用伪对象的方式派生出新行,这样不需要额外处理html代码,然后再将派生出的新行隐藏!!
p{
overflow:hidden;
height:20px;
text-align:justify;
}
p:after{
display:inline-block;
content:'';
overflow:hidden;
width:100%;
height:0;
}

这样的,基本上可以实现我们想要的效果了。
但是,我今天想要推荐的方法并不是上面的办法,上面的办法在静态页面中确实可以使用,但是无端端的增加空格对于 数据比较多的情况下 就有点麻烦,而且 ,如果文本如果是动态的或者文本是用户提交的情况,我们就很难控制在文本增加空格了。所以,我的思路是通过脚本改变文本的letter-spacing来实现文本两端分散对齐。
重点是算法:
首先我们看下面图
问题
四行,汉字的个数分别是 2、2、4、3
我们想要达到B的效果只需要 其他几个长度都与最长的4个汉字保持一致,这里我们要通过增加其他行的间隙,我们使用em单位来实现。
很显然,我们给第1-2行分别增加2em的letter-spacing来对齐;给第四行增加多少em才能对齐呢?
计算办法  需要增加的空隙长度=(4-3)/2 也就是 (最大文本个数-当前文本个数)/(当前文本个数-1)
验证一下:
姓名需要增加的letter-spacing值=(4-2)/(2-1)=2 同理性别也是 这样计算
公式就是:当前文本需要增加的长度=(最大长度-当前长度)/(当前长度-1)
这样算法出来就好办了
HTML中代码如下

<p class="t1">姓名</p>
<p class="t1">性别</p>
<p class="t1">兴趣爱好</p>
<p class="t1">座右铭</p>

JQ做了一个脚本,针对指定样式的行实现两端对齐。

function justify_Let(obj){
 	var obj=$(obj);
    var lengths=[];
    obj.each(function(){
    	lengths.push($(this).text().length);

    });
    //var smax=Math.max(lengths);
    if(lengths.length==0){return;}
    for(var i=0,smax=lengths[0],len=lengths.length;i<len;i++){
    	if(lengths[i]>smax){
    		smax=lengths[i];
    	}
    }

    for(var i=0,len=lengths.length;i<len;i++){
    	var currlen=lengths[i];
    	if(currlen==smax){continue;}
    	obj.eq(i).css({"letter-spacing": ((smax-currlen)/(currlen-1))+"em"});
    }

html页面调用办法

<script type="text/javascript">// <![CDATA[
justify_Let(".t1")
// ]]></script>

这种办法处理起来有好处的
优点:
1、无需增加多余的空格或者空字符或者空行
2、对动态添加的文本同样生效
3、对用户输入的文本也同样适用
4、无论多少行数都会自动两端对齐

缺点:
1、需要使用js和jq脚本实现,增加了一个脚本的请求。
2、目前只能支持每行都是中文字符或者每行都是英文,因为计算办法是文本长度。
3、多行大小写同时存在的情况也还没能实现兼容。

原创文章,转载请注明出处。欢迎转载。

阅读 4,161 评论 0 阅读全文

C​S​S​定​位​规​则​之​B​F​C

1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS

2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。
也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。
在 CSS3 中,BFC 叫做 Flow Root。
2. 形成BFC的条件(符合以下任一条件即可):
1) float的值不为none; 2) overflow的值不为visible;
3) display的值为 table-cell、table-caption和inline-block之一; 4) position的值不为 static或 relative中的任何一个; 3. BFC常见作用
1) 包含浮动元素
BFC会根据子元素的情况自适应高度,这个特性是对父元素使用overflow:hidden/auto/scroll、float:left/right样式可以闭合浮动的原理。
此外网上有资料说使用display:table可以隐式触发table-cell/table-caption,来创建BFC。

阅读 759 评论 0 阅读全文

HTML标签的SEO权重排名

  HTML标签权重分值排列

  内部链接文字:10分

  标题title:10分

  域名:7分

  H1,H2字号标题:5分

  每段首句:5分

  路径或文件名:4分

  相似度(关键词堆积):4分

  每句开头:1.5分

  加粗或斜体:1分

  文本用法(内容):1分

  title属性:1分 (注意不是title》, 是title属性, 比如a href=… title=”)

  alt标记:0.5分

  Meta描述(Description属性):0.5分

  Meta关键词(Keywords属性):0.05分

  SEO优化

  1、 静态页面

  将信息页面和频道、网站首页改为静态页面,有利于搜索引擎更快更好的收录。

  2、 页面标题(Page Title)的关键词优化

  必须列出信息的标题、网站的名称以及相关关键字。

  3、 Meta标签的优化(过去搜索引擎优化的重要手法,现在已经不是关键因素,但仍不可忽略)

  主要包括:Meta description、Meta keywords的设置。关键字密度要适度,通常为2%-8%,也就是说你的关键字必须在页面中出现若干次,或者在搜索引擎允许的范围内,要避免堆砌关键字。

  4、针对Google制作Sitemaps

  Google的sitemaps是对原来robots.txt的扩展,它使用 XML格式来记录整个网站的信息并供Google读取,使搜索引擎能更快更全面的收录网站的内容。  可以使用Google提供的Sitemap生成器制作(需要技术人员制作):  https://www.google.com/webmasters/tools/dashboard?hl=zh-CN也可以由技术部人员制作更全面的Sitemaps。

  5、 图片的关键词优化

  图片的替代关键词也不要忽略,其另外一方面的作用是,当图片不能显示的时候,可以给访问者一个替代解释语句。

  6、 避免表格的嵌套

  表格嵌套太多,搜索引擎通常只读取3个

  7、 采用web标准进行网站重构

  尽量使网站的代码符合W3C的HTML 4.0或XHTML 1.0规范。通过XML+CSS技术进行网站重构,减少不表格及冗余代码,提高网站页面的扩展性,兼容性,可以使更多浏览器支持。

  8、 网站结构的扁平化规划

  目录和内容结构最好不要超过3层,如果有超过三层的,最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母

  9、 页面容量的合理化

  合理的页面容量会提升网页的显示速度,增加对搜索引擎蜘蛛程序的友好度。同时建议js脚本和css脚本尽量用链接文件

  10、外部文件策略

  把javascript文件和css文件分别放在js和css外部文件中。这样做的好处是把重要的页面内容放到页面顶部,同时能缩小文件大小。有利于搜索引擎快速准确地抓取页面重要内容。其他的字体(FONT)和格式化标签也尽量少用,建议采用CSS定义。

  11、外部链接

  尽可能多地让其他跟你主题相关的网站链接本站,同时尽量同PR值更高的网站进行相互链接。如果网站提供与主题相关的导出链接,被搜索引擎认为有丰富的与主题相关的内容,也有利于排名,例如各类招商网站、投融资网站的概念。另外避免链接不顾质量的大面积撒网,对搜索引擎而言宁少要精。

  12、网站地图

  网站自身的网站地图是搜索引擎更全面索引收录你的网站的重要因素。建议制作基于文本的网站地图,内含网站所有栏目、子栏目。网站地图的三大因素:文本、链接、关键词,都极其有利于搜索引擎抓取主要页面内容。特别是动态生成目录网站尤其需要 创建网站地图。

  13、图像热点

  除AltaVista、Google明确支持图像热点链接外,其他引擎暂不支持。当“蜘蛛” 程序遇到这种结构时,就会无法辨别。因此尽量不要设置图像热点(Image Map)链接。

  14、FLASH应用

  FLASH由于不含文字信息,应尽量用于功能展示和广告,少用于网站栏目和页面。

  15、JS脚本

  在不支持JS脚步的浏览器里 NOSCRIPT》 标签会起到重要提示作用,对搜索引擎的Spider搜索也会有帮助。

  16、Frame框架

  Frame标签会被搜索忽略,尽量少用,如果一定要用,则应正确使用Noframe标签, 在Noframe》/Noframe》区域中包含指向frame页的链接或带有关键词的描述文本,同 时在框架以外的区域也出现关键词文本。

  17、资讯的内部链接

  有助提高网站排名和PR值,例如相关资讯、推荐资讯等。

阅读 4,490 评论 0 阅读全文

记录工作生活点滴。

返回
顶部