自从学会了愤怒,就再也写不出好文章了。

分类 [ 码农 ] 下的文章

web前端设计之痛:手机浏览器和pc浏览器的width:100%的自适应问题

Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 阅读器 一样开启开发者模式后,进行联机调试。功能彪悍。 

最近在做1个页面时,发现在 iPad 的 Safari 阅读器中背景显示不全,定位到该 div 后发现所指定 css 的宽度为 100% ; 到百度搜索后发现,safari 中 viewport 默许宽度为 980px,若事前未指定其初始 viewport 宽度,则会默许依照 980px 处理。 可以默许初始化 viewport 宽度或在 css 中设定 min-width,但最简单的方法可以在 head 标签中初始化好 viewport。 

详见下方代码: 假定网页宽度为 960px 或 1080px,可在width中加入该值,并将 initial-scale 设置1个合适的倍数值。 

More »

极简js和css3往上滚动智能隐藏和显示的顶部导航菜单

演示请看本站导航,不支持IE678。

HTML(header-navigation是用来指定导航样式的,id=header是用来驱动js的,这里id要和下面js里的document.getElementById相同)

<header class="header-navigation" id="header">
 这是导航
</header>
CSS

.header-navigation {
	  position: fixed;
	  top: 0;
	  width: 100%;
	  height: 60px;
	  line-height: 60px;
	  background-color: #333;
	  text-align: center;
	  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	  z-index: 9999;
	}

/* Slide transitions */
	.slideUp {
	 /* -webkit-transform: translateY(-100px);
	  transform: translateY(-100px);*/
	  -webkit-transform: translateY(-100px);
	  -ms-transform: translateY(-100px);
	  -o-transform: translateY(-100px);
	  transform: translateY(-100px);
	  /*transition: transform .5s ease-out;*/
	  -webkit-transition: transform .5s ease-out;
	  -o-transition: transform .5s ease-out;
	  transition: transform .5s ease-out;
	}

	.slideDown {
	  /*-webkit-transform: translateY(0);
	  transform: translateY(0);*/
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  -o-transform: translateY(0);
	  transform: translateY(0);
	  /*transition: transform .5s ease-out;*/
	  -webkit-transition: transform .5s ease-out;
	  -o-transition: transform .5s ease-out;
	  transition: transform .5s ease-out;
	}

More »

各种平台下配置SSL自动跳转到HTTPS

Apache自动跳转到 HTTPS


网站根目录新建 .htaccess
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R,L]

301跳转

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{SERVER_NAME}/$1 [R=301,L]
</IfModule>

More »

推荐10个精致的web UI框架

1.Aliceui
Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式。
gitHub地址:https://github.com/aliceui/aliceui.github.io

2.Amazeui
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
官网地址:http://amazeui.org/

3.sui
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。 
通过SUI,可以非常方便的设计和实现精美的页面。
官网地址:http://sui.taobao.org/
同时sui还有移动端版本msui,msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
地址:http://m.sui.taobao.org/

More »

页面滚动背景图片不动的原理及实现-视差滚动(Parallax Scrolling)

        作为一种优雅酷炫的页面展示的方式,视差滚动(Parallax Scrolling)正受到越来越多前端设计师的宠爱,优设的2014年网页设计趋势中依然能够看到它的影子,所以我们不得不来好好研究下视差滚动的原理和实现方式。

1.视差滚动

        视差滚动(Parallax Scrolling)指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术。国内外的设计师们实现了很多酷炫的效果,大家请移步欣赏,《14个超棒的带有故事趣味性视差滚动网站》、《17 Inspiring Examples of Parallax Scrolling Sites》、《18 Beautiful Examples of Parallax Scrolling in Web Design》。

2.特性

视差滚动效果酷炫,适合于个性展示的场合。
视差滚动徐徐展开,适合于娓娓道来,讲故事的场合。
视差滚动容易迷航,需要具备较强的导航功能。

More »

EAdmin极简社区一个旨在快速帮助站长 建立交流社区的开源程序

快速建立社区
EAdmin极简社区 是一个专注 Web 社区 开发,帮助站长快速实现搭建交流社区的目的。
EAdmin主要由一个强大的 ThinkPHP框架与LAYUI框架组合开发而成。通过 EAdmin,站长可以很轻松地 架设交流社区,同时保持了社区的高可维护性与稳健。
如果你需要方便地控制项目的整体功能,或者需要应对频繁的界面变动,
那么 EAdmin极简社区将会是你最好的解决方案。

More »

Sublime Text3激活码and汉化文件

如果被封挨个尝试,16年11月份更新
—– BEGIN LICENSE —–
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523
	—— END LICENSE ——

—– BEGIN LICENSE —–
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
—— END LICENSE ——


—– BEGIN LICENSE —–
Alexey Plutalov
Single User License
EA7E-860776
3DC19CC1 134CDF23 504DC871 2DE5CE55
585DC8A6 253BB0D9 637C87A2 D8D0BA85
AAE574AD BA7D6DA9 2B9773F2 324C5DEF
17830A4E FBCF9D1D 182406E9 F883EA87
E585BBA1 2538C270 E2E857C2 194283CA
7234FF9E D0392F93 1D16E021 F1914917
63909E12 203C0169 3F08FFC8 86D06EA8
73DDAEF0 AC559F30 A6A67947 B60104C6
—— END LICENSE ——


—– BEGIN LICENSE —–
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523
—— END LICENSE ——


—– BEGIN LICENSE —–
K-20
Single User License
EA7E-940129
3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B
EAC2164A 4F8EC954 4E87F1E5 7E4E85D6
C5605DE6 DAB003B4 D60CA4D0 77CB1533
3C47F579 FB3E8476 EB3AA9A7 68C43CD9
8C60B563 80FE367D 8CAD14B3 54FB7A9F
4123FFC4 D63312BA 141AF702 F6BBA254
B094B9C0 FAA4B04C 06CC9AFC FD412671
82E3AEE0 0F0FAAA7 8FA773C9 383A9E18
—— END LICENSE ——


—– BEGIN LICENSE —–
J2TeaM
2 User License
EA7E-940282
45CB0D8F 09100037 7D1056EB A1DDC1A2
39C102C5 DF8D0BF0 FC3B1A94 4F2892B4
0AEE61BA 65758D3B 2EED551F A3E3478C
C1C0E04E CA4E4541 1FC1A2C1 3F5FB6DB
CFDA1551 51B05B5D 2D3C8CFE FA8B4285
051750E3 22D1422A 7AE3A8A1 3B4188AC
346372DA 37AA8ABA 6EB30E41 781BC81F
B5CA66E3 A09DBD3A 3FE85BBD 69893DBD
—— END LICENSE ——
Sublime Text3汉化包

完美的背景图全屏css代码 – background-size:cover

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法
需要的效果

图片以背景的形式铺满整个屏幕,不留空白区域
保持图像的纵横比(图片不变形)
图片居中
不出现滚动条
多浏览器支持
以图片bg.jpg为例

最简单,最高效的方法 CSS3.0

归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下

html {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

More »