jojo28的專欄
1.純英文禁止換行
word-break:break-all; word-wrap:break-word; overflow:hidden;
2.請教：英文字不會像中文那樣自動換行，需要拿什麼屬性控制呢？
style="table-layout:fixed; word-break:break-all"
3.改變滾動條色彩
overflow-x:hidden; overflow-y:auto;
scrollbar-base-color: GhostWhite;
scrollbar-face-color: #aaa;/*立體滾動條的顏色*/
scrollbar-track-color: #f4f4f4;/*立體滾動條背景顏色*/
scrollbar-arrow-color: #fff; /*,三角箭頭的顏色*/
scrollbar-3dlight-color: #aaa; /*立體滾動條亮邊的顏色*/
scrollbar-darkshadow-color: #aaa; /*立體滾動條強陰影的顏色*/
scrollbar-highlight-color: #fff; /*圖2,滾動條空白部分的顏色*/
scrollbar-shadow-color: #fff;/*立體滾動條陰影的顏色*/
4.讓div水平垂直居中
div{ width:1002px; height:590px; position:absolute; left:50%; top:50%; margin-left:-501px; margin-top:-295px;}
5.div高度自動適應
你給html,body{height:100%;}以後其他標籤就能用100%了
你給一個div設定高度200
然後給這個div中的2個div設定100%
6.如何讓一個圖片永遠在最前面顯示，不被FLASH蓋上？
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
<param name="movie" value="flash/pic.swf">
<param name="wmode" value="opaque">
<param name="quality" value="high">
<embed src="flash/pic.swf" quality="high" pluginspage="
</object>
7.讓IE8以IE7顯示
<meta http-equiv="X-UA-Compatible" content="IE=7" />
8.表格邊框相鄰邊被合併
<style type="text/css">
<!--
table {
width: 500px;
border: 1px solid #009900;/*設定整個表格的邊框*/
border-collapse: collapse;/*相鄰邊被合併*/
}
td {
border: 1px solid #009900;/*設定單元格的邊框*/
}
-->
</style>
9.透明度相容
-moz-opacity:0.5;
filter:alpha(opacity=50);
7、css怎麼讓英文文字自動換行，IE我搞定了 width:280px;word-break:break-all; ，FF怎麼寫？？
.pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
}
* html pre {
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space : normal ; /* Internet Explorer 5.5+ */
}
8.英文文字，一個詞一行顯示不全差幾個字母，就讓他顯示到下一行，用哪個屬性呢？
word-break : keep-all
（keep-all : 與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文字的非亞洲文字）
9.如果你在BOX容器裡使float和text-align的方向設為一致：
以下是引用片段：
{float:left;text-align:left;margin:0 0 0 200px;}
我們可做如下修改：
以下是引用片段：
{float:left;text-align:left;margin:0 0 0 200px;display:inline;}
10.CSS屬性與JavaScript 編碼方法對照表
CSS與JS緊密配合，為我們的頁面增添了很多別緻的效果。在52CSS.com中也有相關的案例。為了達到某種特殊的效果我們需要用Javascript動態的去更改某一個標籤的CSS屬性。比如：滑鼠經過一個圖片時我們讓圖片加一個邊框，程式碼可能是這樣：JavaScript中style後面的屬性應該是什麼？
JavaScript CSS Style屬性對照表
如：
CSS語法 (不區分大小寫) JavaScript語法 (區分大小寫)
border border
border-bottom borderBottom
11.hack另一方法，能通過W3C標準
1.<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可識別 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以識別 <![endif]-->
4. <!--[if IE 5]> 僅IE5.0與IE5.5可以識別 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以識別 <![endif]-->
6. <!--[if IE 6]> 僅IE6可識別 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
9. <!--[if IE 7]> 僅IE7可識別 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
如：
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
12.圖片能垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
margin:auto
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
<div><p><img src=" http://www.google.com/intl/en/images/logo.gif"/></p></div>
法二：
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="[email protected],QQ:10349591" />
<meta name="description" content="ZiTer72原創圖片垂直居中" />
<title>ZiTer72原創圖片垂直居中</title>
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px; font-family:Arial, Helvetica, sans-serif;}
div { width:200px; height:200px; margin:100px; border:1px solid #ccc; line-height:200px;display:table; text-align:center;}
div img{ vertical-align:middle;}
div span{ zoom:1;}
</style>
</head>
<body>
<div>sssd<span></span></div>
</body>
</html>
12.下拉列表浮在彈出成上面了怎麼弄啊
你在那個層加一個iframe做背景
在彈出選單最下面加這個<iframe class="iframe"></iframe>
.iframe{
position:absolute;
border:none;
background:none;
visibility:inherit;
top:0px;
left:0px;
width:120px;
height:500px;
z-index:-1;
filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
13.就是英文字元在FIREFOX下不自動換行的問題，這個怎麼解決？
word-wrap:break-word;
word-break:normal;
這兩句，在FF裡就有效果了……
再汗下，把寬度加在<P>上不用加那兩行都行
把寬度加在試了下a,h1,li,ul,div全沒效果，只有在P只有效
剛開始我用這個CSS
p{
width:400px;
word-wrap:break-word;
word-break:normal;
}
有效
2)英文自動換行嗎？
word-break:break-all; word-wrap:break-word; overflow:hidden; 加在內容裡面及可。
14.關於min不相容ie6的解決方法
min-height:100px; /*高度最小值設定為：100px*/
height:auto !important; /*相容FF,IE7也支援 !important標籤*/
height:100px; /*相容ie6*/
頁面的最小寬度 min -width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標籤下，然後為div指定一個類, 然後CSS這樣設計： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文件不太正規。它實際上通過Javascript的判斷來實現最小寬度。
15.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
ul,li{margin:0; padding:0; list-style:none}
ul{width:330px; border:1px solid #f00}
ul li{width:230px; line-height:22px;height:22px;overflow:hidden; }
ul li a{float:left}
span{ padding-left:10px;position:absolute;}
</style>
<title>test</title>
</head>
<body>
<ul>
<li><a href="#">這是一但是範這是一但是範德這是一但是範德這是一但是範德這是一但是範德德薩</a><span>2008-06-07</span></li>
<li><a href="#">這是一個故事發達省份但是范德薩</a><span>2008-06-07</span></li>
<li><a href="#">這是份但是範是范德薩</a><span>2008-06-07</span></li>
<li><a href="#">這是一范德薩</a><span>2008-06-07</span></li>
<li><a href="#">這是達省份但是范德薩</a><span>2008-06-07</span></li>
<li><a href="#">這是一個故事發達省份但是范德薩</a><span>2008-06-07</span></li>
<li><a href="#">這是一個故事發達是一個故事發是一個故事發省份但是范德薩
</a><span>2008-06-07</span></li>
</ul>
</body>
</html>
</html>
16.是滑鼠點上去就有這個虛框，現在要去掉它是嗎？
a {outline: none; /* for Forefox */ }
a {star:expression(this.onFocus=this.blur()); /* for Ie*/ }
17.
彈出視窗是固定大小
function popUpBig(URL)
{
var widthCenter = (screen.width－視窗寬度)/2;
var heightCenter = (screen.height－視窗高度)/2;
eval("window.open(URL,'help','toolbar=0,scrollbars=1,status=0,location=0,menubar=0,resizable=1,width=750,height=600,top="+heightCenter+",left="+widthCenter+"')");
}
18.
word-spacing這個是英文文字之間的距離
letter-spacing這個是中文文字之間字的距離
19.如何取select裡面的值？ 用js
<script>
window.onload = function cc(){
var myform = document.forms["myform"];
var myselect = myform.aa
for (var i=0; i<myselect.options.length; i++){
alert(myselect.options[i].text)
}
}
</script>
<body>
<form name="myform">
<select name="aa">
<option>不知道</option>
<option>不知道</option>
<option>不知道</option>
<option>不知道</option>
<option>不知道</option>
</select>
</form>
20.li的內容超出li的寬度後隱藏且IE下後面有省略號
.new_list li a {
width:160px;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; (oprea瀏覽器的相容)
text-overflow: ellipsis;(text-overflow 是CSS3裡面的內容 但IE已經支援)
}
FF需js來實現，如（if(strlen($row['title'])>n)
{
$shorttitle=unhtml(msubstr($row['title'],0,68)).'...'; }）
怎麼去圖片連線邊框的
/*去除連結虛線框*/
a {outline: none; /* for Forefox */ }
a {star:expression(this.onFocus=this.blur()); /* for Ie*/ }
這可是一個連結多個顏色的文字喲
.t{COLOR:#0000cc;TEXT-DECORATION:none}
a.t:hover{TEXT-DECORATION:underline}
2.Css實現圖片響應滑鼠經過變大
Css程式碼：
. style a:hover {
position: relative;
}
.style a img {
position: static;
width: 80px;
height: 80px;
border: none;
}
. style a:hover img {
position: absolute;
width: 256px;
height: 256px;
border: 1px solid #CCC;
left: -45px;
top: -35px;
}
Html程式碼：
<div class=”style”>
<a href=”#”><img src=”img.gif” /></a>
</div>
有誰做過這種效果嗎 就是點選的時候,彈出一個小窗體,但是IE沒有選單欄的
on (release)
{
getURL("javascript:void(window.open(/'1.htm/',/'smjp/', /'height=582, width=781,top=0, left=0/'))", "_self");
}