css满屏布局与ul和li列表 <!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
<link type="text/css" href="wide_percent100.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">topbar</div>
<div id="header" class="middle">header</div>
<div id="middler" class="middle">
<div id="content">
<h1>content</h1>
<div class="item item_tit">
......
很多时候网页设计中会遇到居中处理问题，包括横向水平居中和垂直竖直居中问题，对于前者一般的方法可以采用“text-align:center”和“margin:0 auto”进行有效控制，相对比较简单一些；而垂直水平居中的问题就显得不是那么容易。
下面本站就此问题谈一点CSS对文本进行垂直竖直居中控制的技巧。
单行文本垂直居中：
举例：
<div style="height:120px; line-height:120px;">
很实用网站欢迎您！
</div>
技巧：让文字段落高度（line-height）和所在区域高度（height）设为一致即可。
多行文本垂直居中：
举例：
<div style="padding:30px 0;">
<p>很实用网站欢迎您！</p>
<p>很实用网站欢迎您！</p>
</div>
技巧：让高度自适应（不要设置文本所在范围高度，同时进行上下填充控制，即设置padding属性）。
让文本在浏览器中垂直居中的处理方法：
其实这种控制想起来比较容易操作起来却发现比较困难。网上关于这方面的解释也比较多，这里就不多说了。下面给出一种可行的方法，让文本出现在浏览器中央（想去掉水平居中效果，将"left:50%;"拿掉即可）。
代码如下：
<div sty ......
cursor中hand与pointer
例子：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a>
pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。
例子：CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a>
crosshair是十字型
例子：CSS鼠标十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a>
help是问号
例子：CSS鼠标问号效果 <a href="#" style="cursor:help">CSS鼠标问号效果</a>
下面写法都一样，这里就不一一写完了。
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果 ......
IE6实现方法:
HTML部分:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
JS部分:
<mce:scripttype="text/javascript"><!--
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
// --></mce:script>
非IE6实现方法:
HTML部分:
<img src="image/test1.jpg" mce_src="image/test1.jpg" class="thumbImage"/>
CSS部分:
.thumbImage {
max-width: 150px;
max-height: 50px;
}
* html .thumbImage {
width: expression(this.width > 150 && this.width > this.height ? 150 : true);
height: expresion(this.height > 50 ? 50 : true);
}
非IE6通过CSS中的max-width,及max-height属性来限制图片的最大宽度及最大高度。 ......
最新文章 : css