Tag Archive for ‘CSS’ at 麻茄 | MAQIE 草原的博客 -YuLiang'S blog

Posts Tagged ‘CSS’

另外关于一个在IE8下DIV框错位问题

本来是float:right平行刚好平行于左边部分的,但是在IE8下却直接到了下面,并非整体宽度不够,找了很多,加了个  position:absolute; 就好了

 

#mr { width: 350px; margin-left: 6px; background-color: rgb(255, 255, 255);float:right ;clear:both;display:inline;position:absolute; }

 

不懂,只能死马当活马医了,到最后还是解决了,终于基本上现在页面在其他浏览器里也都打开正常了。

滚动条样式定义 Overflow

1,Overflow内容溢出时的设置

overflow 水平及垂直方向内容溢出时的设置 
overflow-x 水平方向内容溢出时的设置 
overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

visible 默认值。使用该值时,无论设置的”width”和”height”

的值是多少,其中的内容无论是否超出范围都将被强制显示。 
hidden 效果与visible相反。任何超出”width”和”height”的内

容都会不可见。 
scroll 无论内容是否超越范围,都将显示滚动条。 
auto 当内容超出范围时,显示滚动条,否则不显示。

应用:

没有水平滚动条:
<div style=”overflow-x:hidden”>test</div>

没有垂直滚动条 
<div style=”overflow-y:hidden”>test</div>
没有滚动条 
<div style=”overflow-x:hidden;overflow-y:hidden” 或

style=”overflow:hidden”>test</div>

自动显示滚动条
<div

style=”height:100px;width:100px;overflow:auto;”>test</di

v>

2,自己定义滚动条的颜色

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样

子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,

分别注释在下面的css代码的后面了,注意css的注释代码是放在

两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {
scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
scrollbar-face-color: #333; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜

色*/
scrollbar-highlight-color: #666; /*滚动条空白部分的

颜色*/
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜

色*/
scrollbar-darkshadow-color: #666; /*立体滚动条强阴

影的颜色*/
scrollbar-track-color: #666; /*立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}

以上2项适用与<body>、<div>、<textarea>、<iframe>
<html>
<head>
<meta http-equiv=”Content-Language” content=”zh-cn”>
<meta http-equiv=”Content-Type” content=”text/html;
charset=gb2312″>
<title>用CSS控制滚动条样式</title>
<STYLE>
BODY {
}
</STYLE>
</head>
<body>
<p>&nbsp;</p>
</body>
</html>

overflow

定义和用法

overflow 属性规定如何处理如何处理不符合元素框的内容。

语法:

Object.style.overflow=visible|hidden|scroll|auto

可能的值

描述
visible 内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,但是浏览器不会显示供查看内容的滚动条。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 由浏览器决定如何显示。如果需要,则显示滚动条。

实例

本例使用 overflow 来显示溢出元素框的内容:

<html>
<head>
<style type="text/css">
div
{
border:thin solid green;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function hideOverflow()
{
document.getElementById("div1").style.overflow="hidden";
}
</script>
</head>
<body>

<div id="div1">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<br />
<input type="button" onclick="hideOverflow()"
value="Hide overflow" />

</body>
</html>

表格内也有滚动条 HTML CSS

就是说让内页里面有些内容固定了高度或者宽度 实现滚动条拖动显示。

<html>
<head>
<title> Scroll </title>

<style>

body { overflow: hidden; }
</style>

</head>

<body>
<div style=”overflow:scroll; height:100px; width: 100px;”>
<table >
<tr>
 <td>内容</td>
 <td></td>
 <td>内容</td>
</tr>
</table>

</div>
</body>
</html>

<div style=”overflow:scroll; height:100px; width: 100px;”>根据需要也可以修改参数,比如

可设为<div style=”overflow:auto; height:100px; width: 100px;”>等

css控制图片最大宽度

 img {width: expression(this.width > 560 ? 560: true); max-width: 560px;}

图片边框样式与CSS控制最大图片显示像素

<style type=”text/css”>
 html,body{margin:0;padding:0;text-align:center;background-color:#C8DDD8;}

 .con{margin:0 auto;width:568px;position:relative;height:auto;}

 .con ul{list-style:none;margin:0;padding:0;}

 .con ul li{display:inline;}

 .con ul li a    {display:block;text-decoration:none;cursor:default;float:left;}
 .con ul li a img{display:block;border:5px solid #ECEFF0;  background:#fff;max-width:568px;width:expression(this.width>568?”568px”:this.width); max-height:568px;}
</style>
</head>
<body><br /><h3>Rock</h3>
<div>
 <ul>
 <li><a href=”#”><img src=” ” title=”1″ /></a></li>
 <li><a href=”#”><img src=” ” title=”2″ /></a></li>
 <li><a href=”#”><img src=”  ” title=”3″ /></a></li>
 <li><a href=”#”><img src=”  ” title=”4″ /></a></li>
 <li><a href=”#”><img src=” ” title=”5″ /></a></li>
 </ul>
</div>

form css 不换行,去掉空格

 FORM 会让造成空隔多空一行 的问题。 将 Form 放到 Table 跟 tr 间 的这些方法来解决(或tr,td之间)

<table>
 
<form>   
 
<tr>      
 
<td></td>  
 
</tr>
 
</form>
 
</table>

 

CSS控制解决这个问题的方法是

加入  form{margin:0px;display: inline}

margin: 上下左右间隔都设为 0px 

display: inline 之后显示的在同一行.

<h1> 想不换行也是同样解法. </h1>  只要<h1 style=”display: inline;”>

ie8 css float问题

<style>
.parent
{
width:100%;
}
.left
{
width:140px;
float:left;
}
.center
{
margin-left:150px;
margin-right:110px;
}
.right
{
width:100px;
float:right;
}
.clear
{
clear:both;
}
</style>
<div class="parent"><div class="left"></div><div class="center"></div><div class="right"></div><div class="clear"></div></div>

–注意:
当然如上布局时在ff,ie8下时,parent底部会产生空白。解决办法修改.parent,添加overflow:hidden;

居中CSS的写法

主要的样式定义如下:

  body {text-align: center;}
  #center { margin-right: auto; margin-left: auto; }

  首先在父级元素定义text-align: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上margin-right: auto; margin-left: auto;

HTML表格边框颜色 CSS定义方法

<style type="text/css">
.Tab{ border-collapse:collapse; width:300px; height:300px;}
.Tab td{ border:solid 1px #f00}
</style>

<table cellspacing="0" class="Tab">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>