霍者博客

欢迎访问霍者博客(微信hylg1234)最新发布 练习题合集 软件合集 视频合集

百度H5开始公测

百度 H5 是百度公司推出的移动端 H5 页面快速制作工具平台。现在百度H5已经开始公测了,有百度的品牌号召力还是蛮大的。对于草根来说百度H5现在是免费、无广告的!话不多说,百度H5体验地址:http://h5.baidu.com/

这是面向移动端的H5开发工具操作还是很简单的,但是要想做好H5还是要有美工基础才行!同时百度H5也提供详细的帮助文档,有一点电脑基础的人都会做!还可以导入PS制作的PSD,很方便是不是!

而且有着很多的免费H5模板使用,可以制作招聘、报名、简介等界面,分享到微信等移动平台体验很好。

...

湖北大量互联网企业服务器外迁邻省

对于互联网企业来说服务器就是运营的基础,可想而知互联网数据中心(简称IDC)是多么的重要!近日有消息称湖北大量互联网企业服务器外迁邻省,疑似省内运营成本太高!

图为武汉电信营房村IDC机房里,优酷、搜狐等互联网企业服务器已搬空。来源:动向新闻

...

CSS图标文字对齐和表单输入框文字对齐兼容

一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-block比较多,表单输入框和按钮以line-height:21-22为准。然后超出的用padding来补充。

1.图标和文字对齐

一般的图标和文字对齐html代码:

<p><i class="icon"></i>霍者网页设计</p>
<p><a href="javascript:" class="icon">删除</a>霍者网页设计博客</p>

CSS代码:

...

SEO实战密码第三版 电子书 非纸质扫描版

书名:SEO实战密码第三版 电子书 非纸质扫描版

类型:pdf 

简介:2015年7月版

https://yunpan.cn/cP2wLLC8i2svr  访问密码 12a6

霍者曰:无论你是网页设计师,还是专门从事SEO的,都可以看看这本书。单纯的网页设计师有一点SEO常识,对你的网页设计工作是有好处的。

...

HTML的meta总结,HTML标签中meta属性使用介绍

前言

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta 标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显 示的窗口等!

html的meta总结

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

...

HTML5新增的结构元素——能用并不代表就对

做移动端有一段时间,今天有同事问了我article和section标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬。忽然间觉得自己有必要再翻翻书籍,重温下html5的新元素。html5新增的结构元素,有的经常使用到,有的用不上,当页面禁用样式后,它们的展现跟div是没什么差别的,有同学可能会说,既然一样,又不影响页面的最终展现,不管是article还是section能用就好了。如果考虑实际项目针对用户,我也是这么认为的,但作为一个重构仔,我们需要让标签语义化,清晰的结构,更好的seo,利于特殊终端的阅读(无障碍),此时html5标签的作用就很明显了,并不是说能用就好。于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查找。

...

HTML5+CSS3实现天狗食日特效

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>HTML5+CSS3实现天狗食日特效</title>
<style>
body {overflow:hidden;background-color:#101010;}
#wrapper {
position:absolute;top:100px;left:50%;width:200px;height:200px;margin-left:-100px;
-webkit-animation-name: moonline;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: moonline;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moonline {
0% {top:220px;left:30%;opacity:0;}
30% {top:100px;left:50%;opacity:1;}
50% {top:100px;left:50%;opacity:1;}
80% {top:100px;left:50%;opacity:1;}
100% {top:220px;left:80%;opacity:0;}
}
@-moz-keyframes moonline {
0% {top:220px;left:30%;opacity:0;}
30% {top:100px;left:50%;opacity:1;}
50% {top:100px;left:50%;opacity:1;}
80% {top:100px;left:50%;opacity:1;}
100% {top:220px;left:80%;opacity:0;}
}
#circle {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #EFEFEF;
-webkit-box-shadow:0 0 40px #FFFFFF;
-moz-box-shadow:0 0 40px #FFFFFF;
box-shadow:0 0 40px #FFFFFF;
border-radius: 100px;
-webkit-animation-name: moonright;-webkit-animation-duration: 10s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;
-moz-animation-name: moonright;-moz-animation-duration: 10s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moonright {
0% {-webkit-box-shadow:0 0 10px #FFFFFF;}
30% {-webkit-box-shadow:0 0 10px #FFFFFF;}
40% {-webkit-box-shadow:0 0 20px #FFFFFF;}
50% {-webkit-box-shadow:0 0 40px #FFFFFF;}
60% {-webkit-box-shadow:0 0 20px #FFFFFF;}
80% {-webkit-box-shadow:0 0 10px #FFFFFF;}
100% {-webkit-box-shadow:0 0 10px #FFFFFF;}
}
@-moz-keyframes moonright {
0% {-moz-box-shadow:0 0 10px #FFFFFF;}
30% {-moz-box-shadow:0 0 10px #FFFFFF;}
40% {-moz-box-shadow:0 0 20px #FFFFFF;}
50% {-moz-box-shadow:0 0 40px #FFFFFF;}
60% {-moz-box-shadow:0 0 20px #FFFFFF;}
80% {-moz-box-shadow:0 0 10px #FFFFFF;}
100% {-moz-box-shadow:0 0 10px #FFFFFF;}
}
#circle1 {
display:block;
content:"";
position: absolute;
top: -1px;
left: -1px;
width: 202px;
height: 202px;
background-color: #101010;
border-radius: 100px;
-webkit-animation-name: moon;-webkit-animation-duration: 10s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;
-moz-animation-name: moon;-moz-animation-duration: 10s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moon {
0% { left:-252px }
30% { left:-252px }
49% { left:0px;}
51% { left:0px;}
53% { left:0px;}
80% { left:252px;}
100% { left:252px;}
}
@-moz-keyframes moon {
0% { left:-252px }
30% { left:-252px }
49% { left:0px;}
51% { left:0px;}
53% { left:0px;}
80% { left:252px;}
100% { left:252px;}
}
</style>
</head>
<body>
<div style="position:relative;overflow:hidden !important;padding:5px 0 !important;font:normal 13px/1.3 simsun,verdana !important;color:#FFFFFF !important;border:0 none !important;border-bottom:1px solid #2D2D2D !important;background:#393939 !important;"> 传说中的“天狗食月”</div>
<div id="wrapper">
  <div id="circle"></div>
  <div id="circle1"></div>
</div>
</body>
</html>


...