Key4ever's 窝 » 前端 http://www.key-4ever.com 务正业 -- 勤思考 Sat, 04 Feb 2012 09:08:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 HTML/CSS细节 http://www.key-4ever.com/2010/10/write-the-best-html-css/ http://www.key-4ever.com/2010/10/write-the-best-html-css/#comments Thu, 14 Oct 2010 15:47:48 +0000 Key4ever http://www.key-4ever.com/?p=694 您可能也喜欢：
用float精确定位div+css
鄉
一个英文单词:Nihaoleng（二）
谁愿和我走下去 无觅 ]]> HTML/CSS的相对来说比编程简单，甚至简单很多。

可以用Dreamweaver快速学习上手，但最好学会手写，使用editplus/Notepad++。

不一定要懂最新的，例如HTML5/CSS3，但一定要懂标准的，简单的东西差别在于细节。

以下是一些总结（持续更新）

编写XHTML而不是”HTML”

XHTML的一些特点

1)正确嵌套元素:<p><span></span></p>,不能<p><span></p></span>，span与p区交叉。

2)结束标签

3)处理空元素

4)区分大小写

5)引用的属性值

6)明确的属性值

7) 处理特殊字符<!–10.14更新–>

您可能也喜欢：

用float精确定位div+css
{推介}方便易用的图片批量压缩工具
Photoshop:照片漫画效果处理
WordPress视力表
无觅

随机日志

]]> http://www.key-4ever.com/2010/10/write-the-best-html-css/feed/ 7 负边距实现超级流体布局 http://www.key-4ever.com/2010/10/about-negative-margins/ http://www.key-4ever.com/2010/10/about-negative-margins/#comments Mon, 11 Oct 2010 16:32:14 +0000 Key4ever http://www.key-4ever.com/?p=685 您可能也喜欢：
用float精确定位div+css
五月三十三日
change
广州新媒体小聚会 无觅 ]]> 负边距除了可以进行简单的hack和实现适应浏览器的垂直和水平居中外，更多会用到在流体布局里。

今晚搜索更多相关内容的时候，从这里还学到一种结构多变（左右两栏宽度固定）但排列输出不变的负边距流体布局，我简称神奇流体布局，太神奇了，练习之余总结分享一下。

如下图，无论相关区域在相关区域里怎样滚动变换位置，输出位置都不变，left、main、right区都会分别从左到右排列。

重构也有好玩的东西，好玩之余也可以想想；

这样做的优点：

  • 结构可任意调整却不影响输出（信息量大而且用户网速慢时优先显示重要部分）
  • 优先让搜索引擎抓取重要内容
  • 用作高难度面试题（有必要？）
  • 忽悠小MM

这样做的缺点：

  • 代码不简洁，实现这样的三栏布局可用3个div解决，这里用了6个（致命）
  • 可能增加重构难度

代码如下（我要看demo），有一个地方想不明白，#in区的负边距可用大于mian宽度但小于1400px的任何整数值。#out区的负边距则可用大于right的任何整数值，为什么呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>负边距实现三栏布局</title>
<style>
#wrapper{text-align:center; background:gray;}
.main{background:red; margin-left:210px;}
.left{float:left; width:200px; background:lime;}
.right{float:right; width:250px; background:orange;}
#in{float:right;  width:100%; margin-left:-200px;}
#in-out{margin-right:260px;}
#out{float:left;  margin-right:-1465px;  width:100%;}



</style>
</head>
<body>
<div id="wrapper">
	<div class="right">
		<h1>我怎样都会在右边:P </h1>
	</div>

	<div id="out">
		<div id="in-out">
		  <div class="left">
		  <h1>左边:P</h1>
		  </div>

		  <div id="in">
		  <div class="main">
		  <h1>中间啊:P</h1>
		  </div>
		 </div>
		 </div>
	 </div>
</div>
</body>
</html>

扩展阅读：

《多栏自适应布局问题浅谈》

《寻找圣杯系列》

《一个垂直水平居中效果》

您可能也喜欢：

用float精确定位div+css
五月三十三日
鄉
图书馆借书指南（IT类）
无觅

随机日志

]]> http://www.key-4ever.com/2010/10/about-negative-margins/feed/ 7 用float精确定位div+css http://www.key-4ever.com/2010/01/float_in_css/ http://www.key-4ever.com/2010/01/float_in_css/#comments Sun, 31 Jan 2010 14:35:14 +0000 Key4ever http://www.key-4ever.com/?p=488 您可能也喜欢：
HTML/CSS细节
负边距实现超级流体布局
WordPress视力表
关于那几道”有道难题“解谜游戏 无觅 ]]> 用position的relative和absolute定位div不方便改动。用float就不折腾了，长宽定义不溢出就行了，float的详细可以看这里，里面的实例更清晰。详细代码和效果如下。

<-点击看大图。

看起来每个div间都有2px距离，因为定义了边框border-width:1px，等同于div外加多一个1px，所以margin、height和width计算时像做小学计算题。以下是代码部分，两个文件放在同一文件夹就行了。

css代码部分，文件名style.css

body{margin:0px auto;
padding:0px;
text-align:center;}
#all{margin:0px auto;
padding:0px;
width:800px;
height:800px;
border-style:solid;
border-width:10px;
background-color:#04a2e4;
}

#head{margin:2px 2px 1px;
padding:0px;
width:794px;
height:195px;
border-style:solid;
border-width:1px;
background-color:red;
}

#left{margin:1px 1px 1px 2px;
padding:0px;
float:left;
height:396px;
width:395px;
border-style:solid;
border-width:1px;
background-color:yellow;
}

#left1{margin:2px 2px 1px;
width:389px;
height:193px;
border-style:solid;
border-width:1px;
background-color:#ffffff;
}

#left2{margin:1px 2px 2px;
width:389px;
height:193px;
border-style:solid;
border-width:1px;
background-color:#ffffff;
}

#right{margin:1px 2px 1px 1px;
padding:0px;
width:395px;
height:396px;
float:left;
border-style:solid;
border-width:1px;
background-color:green;
}

#foot{margin:1px 2px 2px 2px;
padding:0px;
width:794px;
height:195px;
border-style:solid;
border-width:1px;
float:left;
background-color:#7d90e5;
}

html代码部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="all">
<div id="head"></div>
<div id="left">
<div id="left1"></div>
<div id="left2"></div>
</div>
<div id="right"></div>
<div id="foot"></div>
</div>
</body>

</html>
您可能也喜欢：

HTML/CSS细节
负边距实现超级流体布局
163邮箱让我猜
关于那几道”有道难题“解谜游戏
无觅

随机日志

]]> http://www.key-4ever.com/2010/01/float_in_css/feed/ 10