CSS

link的地址以斜线开头完全没有道理啊

八 25th

由Jacky发表在CSS

没有评论

在内部搭一个类stackoverflow的系统，选了个基于django的开源的osqa，部署的时候陆陆续续发现源码里有点小问题，比如用户相关的很多link是这样写的:


<a href="/users/{{ user.id }}/{{ user.username|slugify }}/">{% gravatar user 32 %}</a>

这么搞的话link就指向了服务器的documentRoot，但是我不会把osqa这个应用直接挂在根域名下，这样的hard code我觉得挺愚蠢的。

其实同样的问题也存在我们的jsp里面，这个编程习惯不好，要改正其实也不难，手工做的话可以取得app的rootPath就行了，或者用url标签来帮我们自动搞定。（django&jsp都有的）

另一个Note：osqa第一次装的时候会把配置信息写到forum_keyvalue表里面，后面修改上传路径等的配置没有用，必须到数据库修改。


mysql> update forum_keyvalue set value="S'/upfiles/logo.png'
    "> p0
    "> ." where id=26;

	mysql> update forum_keyvalue set value="S'/var/lib/osqa/forum/upfiles'
    "> p0
    "> ." where id=33;
Query OK, 1 row affected (0.00 sec)
Rows matched: 1  Changed: 1  Warnings: 0

mysql> select * from forum_keyvalue where id=33;
+----+----------------+-------------------------------------+
| id | key            | value                               |
+----+----------------+-------------------------------------+
| 33 | UPFILES_FOLDER | S'/var/lib/osqa/forum/upfiles'
p0
. |
+----+----------------+-------------------------------------+

Something more:
Larry wrote 2 useful CSS related posts:
CSS – small tips (设置图像最大宽度，打印分页)

CSS – sprites, manage images (图像合并切割)

END

, ,
iphone-viewport

为iPhone优化网页的技巧

二 7th

由Jacky发表在CSS

没有评论

为了使得网页看上去更像native的程序，我们需要对网页进行一些优化

使用iPhone访问本文的测试页面

本文包含一些小的技巧：
1. 如何隐藏iPhone Safari的地址栏
2. 如何设置网页的桌面快捷方式图标
3. 如何为网页设置iPhone的样式
4. 如何在网页中检测屏幕的方向
5. 如何在网页中检测当前的位置

为iPhone优化网页，最需要了解的应该是下面这个属性
viewport: 可见窗口

可见窗口在iPhone Safari上和桌面Safari略有不同，iPhone上默认没有滚动条，默认的实际的可见大小在竖屏状态下，如下图是320*356，地址栏占据了60像素的高度，稍后我们有办法将其隐藏，得以使用这宝贵的60像素。

iPhone的Safari在显示传统的web网页时（未做优化的网页），viewport会被设置成显示网页宽度的980像素，即在320*356的大小内显示原网页980像素的内容，做了适当的缩放等调整。

所以我们做网页优化的时候，可以通过设置这个meta属性，更多细节可以参考： “Safari Web Content Guide.pdf”

<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no"/>

width=device-width, //设备宽度

height=device-height, //设备高度

initial-scale=1.0, //初始的缩放比例

user-scalable=no //是否允许用户缩放

小技巧

1. 如何隐藏iPhone Safari的地址栏

设置这个属性(文档里面说有用，但是好像不太成功)

<meta name="apple-mobile-web-app-capable" content="yes" />

还有一种办法，页面加载完成之后滚动窗口，这个确实有效，唯一要注意的是页面高度必须够长，我一般设成device-height就没问题了:

<script type="text/javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
</script>

2. 如何设置网页的桌面快捷方式图标

这个其实不算技巧，只是从Apple文档里找到这一项罢了

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png"/>

第一行就是设置桌面快捷方式图标的，图标必须是57*57像素的文件，不需要自己做圆角和高亮效果，系统会自动帮你搞定这个
放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标

第二行是设置启动画面（没看到成功效果）

3. 如何为网页设置iPhone的样式

这个是CSS media selector的一点小技巧

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->

4. 如何在网页中检测屏幕的方向

<script type="text/javascript">
function updateOrientation()
{
	var displayStr = "Orientation : ";
	switch(window.orientation)
	{
	case 0:
		displayStr += "Portrait";
		break;
	case -90:
		displayStr += "Landscape (right, screen turned clockwise)";
		break;
	case 90:
		displayStr += "Landscape (left, screen turned counterclockwise)";
		break;
	case 180:
		displayStr += "Portrait (upside-down portrait)";
		break;
	}
	document.getElementById("output").innerHTML = displayStr;
}
</script>
<body onorientationchange="updateOrientation();">

5. 如何在网页中检测当前的位置

<script type="text/javascript">
navigator.geolocation.getCurrentPosition(showMap);
function showMap(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById("latitude").innerHTML = latitude;
	document.getElementById("longitude").innerHTML = longitude;
}

//Register for location changes
var watchId = navigator.geolocation.watchPosition(scrollMap,handleError);

function scrollMap(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById("latitude").innerHTML = "scrollMap->"+latitude;
	document.getElementById("longitude").innerHTML = "scrollMap->"+longitude;
}
function handleError(error) {
	document.getElementById("error").innerHTML = error;
}

function buttonClickHandler() {
	// Unregister when the user clicks a button
	navigator.geolocation.clearWatch(watchId);
}

</script>
</head>
<body>
<div id="location">
	latitude:<p id="latitude">null</p>
	longitude:<p id="longitude">null</p>
</div>
<div>
	<input type="button" value="clearWatch" onclick="buttonClickHandler();"/>
</div>
<div id="error"></div>
</body>
, , ,
i32

炫酷CSS超链接按钮一

一 27th

由Jacky发表在CSS

没有评论

上一篇文章提到用CSS分割图片的技巧，例子中也展示了一个很漂亮的CSS按钮，今天在tutorialzine看到这篇教程 Sweet AJAX Tabs With jQuery 1.4 & CSS3的按钮也很漂亮，把demo代码下载下来之后，看了一下也是用CSS定位分割图片的技巧做出来的，和上一篇文章中按钮实现略有不同，下面就来解析怎么做出如下的效果:







首先按钮的HTML代码,

<a class="green" href="#">Tab two <span class="left"></span><span class="right"></span></a>

这个按钮的图片由左中右三部分构成，两边的图片是做好了边框效果的，中间的图片可以无限扩展。即下图显示的效果（注：图像来源于tutorialzine原教程）

源图像是这样的，其实还分成了亮度有区别的上下两部分，使用上文中已经介绍过的CSS技巧达到鼠标移上去高亮的效果。
->->->

让我们来看看实现一个按钮核心的CSS代码:

a.blue{background:url(img/blue_mid.png) repeat-x top center; color:#03426e;}
a.blue span.left{ background:url(img/blue_left.png) no-repeat left top;}
a.blue span.right{ background:url(img/blue_right.png) no-repeat right top;}

然后是定义按钮size、边框、边距等的CSS代码:

a,a:visited{
	/* Styling the hyperlinks of the tabs as colorful buttons */
	float:left;
	font-size:18px;
	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
	display:block;
	padding:7px 16px 1px;
	margin:4px 5px;
	height:29px;
	/* Giving positioning */
	position:relative;
	/* CSS3 text-shadow */
	text-shadow:1px 1px 1px #CCCCCC;
}
.left{
	/* The left span in the hyperlink */
	height:37px;
	left:0;
	position:absolute;
	top:0;
	width:10px;
}
.right{
	/* The right span in the hyperlink */
	height:37px;
	right:0;
	position:absolute;
	top:0;
	width:10px;
}
,

CSS分割背景图片的技巧

一 24th

由Jacky发表在CSS

1个评论


因为我也不是CSS高手，所以本文的目的是写清楚如何弄明白CSS中分割图片的技巧，说到分割其实并不是真正意义上的剪裁图片，只是已经流行多年了的一种CSS best practise，用一个拼接起来的大的图片资源替代加载多个小图片的一种方法，优点是节约页面的加载速度，不会出现有的图片能显示有的还在加载的情况，这个效果或者性能用firebug可以测试出来。

当然用这个技巧也要选对地方用才行，要是经常需要改动的图像用这个技术还是有点折腾的。

核心的属性是这个：background-position 参数值从w3schools找出来的

Property Values

Value Description
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right		 If you only specify one keyword, the second value will be “center”. Default value is: 0% 0%
x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
inherit Specifies that the setting of the background-position property should be inherited from the parent element

这里有篇不错的文章描述的是下面这个例子，将原图竖着的1234显示成横着的4个盒子
CSS: Using Percentages in Background-Image

.box1
.box2
.box3
.box4
下面这个例子也是常用到的：
鼠标移到按钮上，用稍微亮一点点的图片显示的悬停效果。
用到的green.png原图： green.png
按钮的代码:

<a class="green" href="#">Green<span> </span></a>

按钮的CSS:

a {
	/* The section titles */
	display:block;
	font-size:21px;
	height:34px;
	overflow:hidden;
	padding:10px 20px 0;
	position:relative;
	width:200px;
}
a {
	text-decoration: none;
}
a:hover{
	/* Removing the inherited underline from the titles */
	text-decoration:none;
}
a span{
	/* This span acts as the right part of the section's background */
	height:44px;
	position:absolute;
	right:0;
	top:0;
	width:4px;
	display:block;
}
a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
a.green span{ background:url(img/green.png) repeat-x top right;}
/* The hover effects */
a:hover{ background-position:bottom left;}

最重要的一行，鼠标移上去的时候设置图像的位置为bottom left，而下半部分的图像比上半部分亮一点。
效果如下:

最后一个按钮样式和第一个其实是一样的，只不过最后是从sprite.png加载过来的，我使用了CSS 图片拼合生成器将四张图拼接起来了，然后再用CSS去定位。
拼接完成之后的图：sprite.png

,