加载中…
个人资料
深圳市华企未来科技有限公司
深圳市华企未来科技有
限公司 新浪机构认证
  • 博客等级:
  • 博客积分:0
  • 博客访问:3,114
  • 关注人气:4
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
个人简介
互联网事业是我人生中最慎重的选择,所以我同时也选择热爱它、享受它。
搜博主文章
访客
加载中…
博文
分类: 网站优化
作为一个优秀的SEOER,如果我们不会借助工具来帮助我们从事优化工作,就太悲剧了。下面为各位朋友带来了16个牛逼的营销推广工具,也许你不常见到,但是真的很有用,速来围观! 

百度站长工具

  度娘给出的数据,我们是必须要参考的,不用不行啊,不过真的很好用,基本上什么数据都可以查到了。

  http://zhanzhang.baidu.com

百度联想词

  复制粘贴关键词下拉框词很痛苦?这款神器直接为您复制好了,想要什么下拉词一键复制即可。

  http://www.pandaidea.com/baidu-suggestions/

360权重查询

  360在搜索引擎的份额越来越大,早点在360搜索中占据先机对网站以后的发展很有帮助,占据先机就是要提高360权重啦。开始查询吧:

  http://360.links.cn/

搜索引擎网站收录地址大全

  主动提交你的网址,让搜索引擎快速收录你的网站。

  http://tool.lusongsong.com/addurl.html

备案查询

  担心外包公司偷偷更改了你网站的备案信息?不要紧,查看一下就知道怎么回事了。

  http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action

网站地图在线生成

  网站地图将帮助搜索引擎和用户更有效率的浏览你的网站,这么好的神器,你怎能放过?

  http://www.51zzl.com/dnwl/sitemap.asp

长尾关键词挖掘机

  手动挖掘长尾关键词太累?普适的工具不给力?不要紧,这次真的要放大招了,效果嘛,谁用谁知道。

  http://www.seotcs.com/seo-tools/keywords-expand.html

页面相似度查询

  担心页面样板文字太多了?肉眼对比网页太闹心?不要紧,咱有工具直接测,帮你合理规避样板文字:

  http://tools.aizhan.com/sl/

网站排行榜

  达者为师,想不想知道你行业中的老大是谁呢?看看这些排行榜吧,都是你学习的对象。

  http://top.chinaz.com/

百度地图生成器

  网站联系我们的栏目里如果没有一个漂亮的地图位置,就太没有逼格了,好在度娘体恤我们,有了它,客户更容易找到我们!

  http://api.map.baidu.com/lbsapi/creatmap/index.html

百度地图名片

  只有地图怎么够?做出名片才牛逼,想不想让自己的网站拥有一张高端大气的名片呢?选择它就对了

  http://api.map.baidu.com/mapCard/

营销型网站建站工具

  模板网站就算有流量也没转化,没有一个有营销力的网站怎么行,这个一定能帮你!

  http://www.nsw88.com

换链神器

  去QQ群换友情链接太费时间?那么把你的友链提交就会有人找你换好不好呢?当然好,这个工具将帮你。

  http://www.huanlj.com/Home/DownLoad

VPN换IP

  出去做推广,不会换IP就太丢人了,可是网上的换IP的软件太坑了,怎么办?神器的意思就是帮你超凡入圣,不要犹豫了,就用它好了。

  http://free-vpn.wwdhz.com/

吐槽器

  如何让自己的网站图片更接地气?当然是走亲民路线,逗比路线啦,想逗比,就找他吧!

  http://tucaoqi.sinaapp.com/ 

微信编辑器

  羡慕微信公众号的优美排版?想让网站也拥有如此华丽的排版格式?不需要懂代码,不需要懂美工,神器已经为您做好了,直接使用吧。

  http://www.ipaiban.com/

  以上16种工具,都是我们作为SEOER想用但是无法轻易找到的工具,分享给大家,希望可以帮助到更多热爱SEO,热爱网络推广的小伙伴。

 

 

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
分类: 网页设计
所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则,position使得设计者可以将HTML元素精确放置,position属性确定了每个元素框(box)定位的参考点。

在详细介绍之前,我们先简要的说明一下定位的4种方法:

1、静止定位(static):这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的。

2、绝对定位(absolute):这种方法允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系将该元素从正常的文档流中拖出来。当页面滚动时,元素将保持它们各自的位置不变,随着页面一起滚动,就像粘在一起一样。

3、固定定位(fixed):这种方法允许元素相对于实际的浏览器窗口放置。

4、相对定位(relative):这方法定义相对于在默认情况下浏览器把它放置的位置。这个很难解释,可喜的是这个方法使用的很少。



静止定位static

定位的默认值static,不使用定位属性和使用这个值对页面没有什么效果的。

绝对定位absolute

当一个元素被绝对定位了,浏览器做的第一件事是把它从流中完全移走,接着放置在定位属性指定的位置上。看看下面的例子:

#sidebar{
position:absolute;
top:100px;
right:200px;
width:280px;
}
上 面说了被绝对定位的元素从流中间移走了,所以在流中间的任何元素将不会受到影响,看见过网站上的小广告吧,后面的文字不会受其任何的影响,就是这样的效 果!还有这里介绍的定位是指元素,对!是元素,也就是说你可以使用在任何的元素上(包括内联元素哦),当然更多的是使用在div上。

那如果我放置两个绝对定位的元素,谁会被遮挡住呢?这里需要介绍一个叫做z-index的属性,将这个属性设置的值越大,那个元素就会出现的上面。我们来看看边上的效果。我们将前面的元素设置z-index:99;

在绝对定位元素内嵌套的元素进行绝对定位会怎么样呢?这件事情是要说清楚的,不要说我们没有告诉你啊,它使用的绝对定位是相对于它的父级位置的,而不是整个页面的。

注 意:个人认为不要使用绝对定位的方式去布局你的网站,因为网站的内容往往会根据你数据库内容的多少来显示,也就是说你不能完全确定网站的高度(还有一个原 因不是确定高度是因为宽屏的电脑越来越多了)。而绝对定位以后你将不能应对这样的变化,比如你不能确定你的页脚放置在什么位置上合适。

固定定位fixed

固定定位指定元素的位置和你使用绝对定位基本相同,不过作用不同。它的位置是相对于浏览器窗口的,下面的那个div就是的,你滚动一下鼠标的滚轮看看就清楚了。

#sidebar{
position:fixed;
top:300px;
left:-90px;
width:280px;
}
注意:position:fixed;这个属性在IE6里面居然不兼容!现在使用IE6的可不少啊,那总不能就这样放任不管了吧,我提供了一个简单事例,大家可以看看通过Css hack是如何解决这个问题的。


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">







 

这是左侧的菜单,在标准的浏览器中采用固定定位,而非标准的浏览器(IE6)中,使用了一些HACK,和IE6本身的BUG!


 

enjoy it!(这句英语帅不?)





 

这个是一个测试,IE6下position:fixed是不能使用的,但是我们使用一些技巧就能完美修复这个BUG!


 

拖动页面右边滚动条,你可以看到,灰色的左菜单始终固定,这种现象不止于IE7、FireFox,在IE6下也有较为完美的表现~这 个是一个测试,IE6下position:fixed是不能使用的,但是我们使用一些技巧就能完美修复这个BUG!





相对定位relative




这 个方法使用的很少,可能大家都没有用过,或者别人使用了也看不出来。先来看看它的工作原理,相对定位的元素仍然是页面流的一部分,不同于绝对定位和固定定 位。但是它在显现自身的最后一刻叛变了,它离开了自己的岗位,偏移到Css指定的位置上,原来的岗位呢?还给他留着呢!
阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
分类: 网站建设

昨天我在华创互联博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多层面的角色,包括交互设计师,视觉设计师,前端工程师,后台开发工程师。

交互设计师,要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师,则要考虑到页面性能和移动端带宽问题,权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师,则要完成满足视觉需求和交互功能,更要考虑到页面加载性能和消耗带宽问题,更重要的是移动端安全性能方面!既然响应式网页设计牵涉到了这么多的方方面面,那我们又该如何去实现这种页面呢?对此我也特意收集了一些响应式网页的实现方法原理,在华创互联博客上跟大家分享一下:

 

首先我们应该遵循移动优先原则,交互和设计应以移动端为主,PC则作为移动端的一个扩展;一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)。

一、响应式布局

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种设计方案满足所有情况?对此,华创互联觉的我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模块在不同尺寸下的位置:

 

那么我们具体要怎么做呢?

1、Meta标签定义

使用 viewport meta 标签在手机浏览器上控制布局

通过快捷方式打开时全屏显示

隐藏状态栏

iPhone会将看起来像电话号码的数字添加电话连接,应当关闭

2、使用Media Queries适配对应样式

常用于布局的CSS Media Queries有以下几种:

设备类型(media type):

all所有设备;
screen 电脑显示器;
print打印用纸或打印预览视图;
handheld便携设备;
tv电视机类型的设备;
speech语意和音频盒成器;
braille盲人用点字法触觉回馈设备;
embossed盲文打印机;
projection各种投影设备;
tty使用固定密度字母栅格的媒介,比如电传打字机和终端。

设备特性(media feature):

width浏览器宽度;
height浏览器高度;
device-width设备屏幕分辨率的宽度值;
device-height设备屏幕分辨率的高度值;
orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape;
aspect-ratio比例值,浏览器的纵横比;
device-aspect-ratio比例值,屏幕的纵横比。

例子:


@media only screen and (max-device-width:240px){
selector{ ... }
}

@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}

@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}

 

适用于布局的Media Queries,这里在华创互联博客上我们就不再做详述,有兴趣的话,可通过官方文档进一步了解。

3、表格(table)的响应式处理

那么对于表格(table)的响应式处理该是怎样的呢?我们该如何突破Table的局限性呢?接下来我们来了解以下的几种针对表格响应式处理的方法:

(1)、隐藏不重要数据列

 

实现方法代码:

@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display: none;}
}
@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display: none;}
}

 

以用户角度思考,每个人对数据的认知不同,或许你隐藏的数据对于他却是很重要的,所以对于这种方法华创互联并不推荐。

(2)、多列横向变2列纵向

处理前:

 

 

实现方法:

定位隐藏,

变块元素,并绑定对应 列名,然后用伪元素的content:attr(data-th)实现

 

(3)、固定首列,剩余列横向滚动

 

实现原理代码:

thead {float:left;}
tbody {display:block;width:auto;overflow-x:auto;}

 

二、响应式内容

1、响应式图片

带宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;文件体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

 

处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。

解决方案:其实W3C已经有一个用于响应式图形的草案:新定义标签,因为它还只是草案,目前还没有支持的浏览器,期待在不久的未来我们能用上。虽然目前不支持,但我们还是来了解下,为之后的内容做个铺垫。

是一个图形element,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,代码规范如下:






Accessible text




 

注:source: 一个图片源;
media: 媒体查询,用于适配屏幕尺寸;
srcset: 图片链接,1x适应普通屏,2x适应高清屏;
: 当浏览器不支持脚本时的一个替代方案;
: 初始图片;另外还有一个无障碍文本,类似的alt属性。

虽然目前还不支持,但它的原理我们是可借鉴的,所以就诞生了一个用于图片响应式处理的类库Picturefill








 

其原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片,逻辑细节这里不再解析,感兴趣的可查看其JS代码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片加载失败的替代方案。

当然,在未来的CSS Image Level 4中已经实现了响应式图片的原生语法:image-set

= image-set([ , ]* [ | ])
= [ | ]

 

那么我们的响应式图片可以这样重写了

background-image:url(default.jpg); 
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); 

 

注:Webkit 目前只实现了 url() 形式的取值,且dppx值取负值[-2x]貌似也是合法的。

当然除此之外,还有其他的响应式处理,如服务端user-agent嗅探。

2、高分辨率(DPI)下的响应式处理

(1)、SVG:优点可承载色彩丰富、设计复杂图形,且渲染不会出现边缘不顺滑;缺点是IE的支持不完美。

(2)、Icon fonts:支持多浏览器,图形颜色大小的修改成本低,易于维护;图形表现单一,不支持色彩丰富且复杂的图形,IE6渲染有毛边。

(3)、-webkit-image-set:只支持单个图形的适配,不利于图形合并,兼容不完美(Safari 6+, Chrome 21+)。

JS检测:var retina = window.devicePixelRatio > 1;

CSS Media Query:

@media (-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2), 
(min-resolution: 2dppx), 
(min-resolution: 192dpi) 

 

3、高分辨率下的1px border

由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案。

 

在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟。

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}

 

留给我们的思考

⊕响应式不只是技术的实现,它更像是一种对于设计的全新思维模式
⊕浏览的体验短期内还无法超越原生应用
⊕左手操作习惯的交互
⊕Webapp的消息推送
⊕调用本地文件系统的能力弱
⊕响应式图片的解决方案
⊕对PC事件的兼容
⊕WebAPP页面体积的响应式适配
⊕代码实现和内容可维护性之间的权衡
⊕控制设计开发成本

 

阅读  ┆ 评论  ┆ 转载 ┆ 收藏 
  

新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

新浪公司 版权所有