标签 Web 文章存档

position:relative 是个好东西

现在所在的这家公司没有人专门做前端，目前只有PHP开发和一个产品经理一个美工，公司的前台页面工作外包出去了。此为背景。

外包出去的做好的页面发回给我，然后进行页面嵌套，我感觉这样不是很方便，有些细节往往需要再次进行调整，而写好的页面，根本就不敢乱动其 DOM 结构，因为一旦加一个 div ，减一个 span 都经常导致样式出现问题，外包回来的的页面很多 css 样式都与结构层次有关，导致我后面进行改的时候比较困难，所以我尽量不去动原先的结构，而添加 style 标签加入特定样式。当当当挡~ 主角出场，因为经常涉及的元素位置的改动，所以我现在都是用 position:relative 然后再用 top left 等将其移动我需要的位置，这样就可以做到既不更改 DOM 结构，又可以很快捷不会出差错的完成任务，每次这个时候我都会感谢发明这个样式标签的人。

至于公司为什么没有招聘专门做前端的人，我的猜想是，多请一个人需要多开一个人的工资，但是我们的一个产品一般也不会超过10个页面，并且每个页面相似度很高，这就会导致前端的工作比较少，花较多的钱雇一个前端不如将前端的活外包出去，按需付钱咯。

这样做导致的问题就是，我们很痛苦，外包出去给回来的 html 页面，并不一定满足要求，往往我要加一个 span 将特定的元素找出来，给个 class，然后就可以写 javascript 了，问题来了，发现新加进去的 span 已经有了样式，每每这个时候，老子都无比抓狂，我勒个去啊，为毛要给 span 标签指定样式啊，你直接给你需要指定样式的元素给个 class 不行么？同理，页面的很多样式都是与结构相关，比如经常会出现这样的代码

form div.error {/*这里面有一些样式*/}

为了保持页面的一致性，有可能其它地方也要用到 error 的样式，这个时候问题来了，我直接加 class=”error” 是不行的，因为必须是 form 下的 div 的 class=”error” 才能有这个样式，我勒个去去去啊~直接写成 .error 不行么，在前面加这一串后，样式没有通用性啊。

还有的问题就是，一个页面经常要引入 6 个左右的外部 css 文件，再加上 jqueyui 的 css 文件，得有 7 个了，性能什么的不用考虑，估计公司用的服务器资源还很充足，不用考虑连接数，不用考虑压缩 js css ，不用考虑页面大小，因为经常可以看到大段大段的注释在 html 源文件里面。

好的，吐槽完了~

不能给内联元素设置宽度和高度

昨天在用CSS写一个导航栏的时候，为了让链接的可点击区域变大，我给a元素设置了宽度width 和高度height ，但是发现没有效果，今天搜索块级元素和内联元素时才知道，原来是因为给内联元素设置宽度和高度没有效啊。

（原博客发布时间：2012-03-28 16:13:55）

声明不同，导致ul下li的list-style显示属性不一样

今天在做一个导航栏时发现一个奇怪的问题，两个html文件的body内容一样，引入的是同一个CSS文件，但是一个的ul下li显示有圆点，另一个却不显示圆点。经过仔细对比才发现两个html文件的<!DOCTYOE>声明不同。一个是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

另一个是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

不知道为什么会这样，谁能解答下？

附html文件内容和CSS文件内容：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div id="index_area2">
	<ul class="main_menu">
		<li class="item_text"><a href="#">导航1</a></li>
		<li class="item_text"><a href="#">导航2</a></li>
		<li class="service_text"> </li>
	</ul>
</div>
</body>
</html>

 

@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0; }

body {
	text-align: center; /* for IE */
	background-color: #EEE;
}

div#index_area2{
	clear: both;
	margin: 0 auto;
	width: 975px;
}

div#index_area2 ul.main_menu{
	height:auto;
	background-color:#47B9EA;
}

div#index_area2 ul.main_menu li.item_text{
	float:left;
	background-color:#47B9EA;
}

div#index_area2 ul.main_menu li.item_text a{
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#FFFFFF;
	text-decoration:none;
	line-height: 3em;
	width: 120px;
	border-right: solid 1px #FFF;
	vertical-align: middle;
}

div#index_area2 ul.main_menu li.item_text a:hover{
	background-color:#003C63;
}

div#index_area2 ul.main_menu li.service_text {
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#FFFFFF;
	text-decoration:none;
	line-height: 3em;
	padding-left: 30px;
	vertical-align: middle;
	height: 38px;
}

（原博客发布时间：2012-04-08 15:20:30）

nginx php5-fpm 出现 Access denied

今天我想让 phps 后缀的文件显示其源代码。网上搜索之，按照这里的修改：

location ~ \.phps$ {
    fastcgi_pass backend;
    fastcgi_param  DOCUMENT_ROOT    $document_root;
    fastcgi_param  SCRIPT_NAME      $uri;
    fastcgi_param  SCRIPT_FILENAME  /path/to/hightlight_source.php;
}

结果访问 phps 文件出现 Access denied.

查看错误日志，发现是 security.limit_extensions 配置的问题。

修改 /etc/php5/fpm/pool.d/www.conf ，修改配置为以下即可：

security.limit_extensions = .php .phps

同理，如果你想让 php5-fpm 处理后缀文件，在该行配置下添加相应后缀名即可。
感悟：看错误日志对于排错帮助很大，找到错误之处后再在网上找相应内容一般都能解决问题。

要执行请求的操作，WORDPRESS 需要访问您网页服务器的权限。

我自己搭建的服务器，环境是：ubuntu server 12.10, apache2.2.22, php5.4.6

默认 apache 用户是：www-data

WordPress 安装插件时提示：要执行请求的操作，WordPress 需要访问您网页服务器的权限。 请输入您的 FTP 登录凭据以继续。 如果您忘记了您的登录凭据（如用户名、密码），请联系您的网站托管商。

导致此问题的原因是：apache 用户与网站目录文件所有者（网站文件所有者默认为 root）不一样。将网站目录文件所有者改为 www-data 即可解决问题。

chown -R www-data /var/www

利用 .htaccess 配置多站点

我现在用的主机是在淘宝上买的一虚拟主机。比较便宜并且还带有独立IP。在该虚拟主机的控制面板上我添加了三个域名分别是

blog.upliu.net
upliu.net
www.upliu.net

其中 blog.upliu.net 就是你现在看到的这个博客啦。
然后将主域名 upliu.net 和 www.upliu.net 绑定到主机根目录下的一个子目录。这样就实现了一个虚拟主机搭建多个站点。
主机根目录下的 .htaccess 文件内容如下（包含了 wordpress 伪静态的配置）：

# BEGIN WordPress
RewriteEngine On
# Rewrite for upliu.net and www.upliu.net
RewriteCond %{HTTP_HOST} ^(www\.)?upliu\.net [NC]
RewriteRule ^(.*)$ /siteupliu/$1 [L]
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

我要绑定的目录是 siteupliu，还需要在该目录下的 .htaccess 加入如下内容：

RewriteEngine on
RewriteBase /siteupliu/