标签 css 文章存档

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 类的一些规则

最近在公司一直在做页面的改造工作，原有的页面样式表很混乱，都是一个页面一个样式表，有十几个模版，改动时就得一个个来，做这些重复工作还真是一件让人烦躁的事情呢。

昨晚上看了别人的博客，讲到如何分离样式表，如何来写 class ，根据内容还是根据属性，感觉收获很大，以前从来都是用，怎么方便怎么写，看了他人的博客后来又读了 MDN 上的一篇文章，原来自己之前的做法很不可取。

Writing efficient css：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

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

昨天在用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）