轉(zhuǎn)載自http://community.csdn.net/Expert/topic/5273/5273709.xml?temp=.3267176
1、<li>中的LI前面的符號(hào)不出現(xiàn)而且不占位置??
?????
list-style:none;
margin:0px;padding:0px;
2、CSS相對(duì)定位語(yǔ)法
當(dāng)父對(duì)象的position為absolute或者relative的時(shí)候
子對(duì)像如果設(shè)置了position為absolute,則top,left,right,bottom相對(duì)于父對(duì)象
例子:
<div id="AAA" style="position:relative;">基準(zhǔn)點(diǎn)
<div id="num1" style="position:absolute;top:50px;left:1px;">測(cè)試1</div>
<div id="num2" style="position:absolute;top:80px;left:1px;">測(cè)試2</div>
</div>
3、CSS中的對(duì)齊屬性
垂直頂部對(duì)齊(不是所有元素對(duì)這句都有效)
vertical-align:top;
水平居中對(duì)齊
text-align:center;
4、層的顯示與隱藏
<script>
function hidlayer(){
document.all.Layer1.style.display="none";
}
</script>
<div id="Layer1" style="display:block"></div>
<a href="#" onClick="hidlayer()">隱藏層</a>
5、怎么能得到<div>的高度值
document.getElementById("divID").offsetHeight
6、在<table>或<div>中如何讓傳入的文本自動(dòng)換行
<div style="width:100px">
你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你
</div>
這樣的話。div中內(nèi)容。會(huì)到100px自動(dòng)換行的。但是
<div style="width:100px">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>
也就是其中內(nèi)容是英文的話就不會(huì)換行????jī)?nèi)容將會(huì)撐大直到完全顯示
?
如果你輸入的不是一連串的如:aaaaaaaaaa或?。。。。。。?!這樣的無意義字符,在你指定了容器的寬度之后,是會(huì)自動(dòng)換行的;
如果有大篇章這樣的字符,可以考慮使用word-break:break-all或table-layout:fixed
<div style="width:100px;word-break:break-all;">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>
7、文字應(yīng)該放在div里面還是p里面還是span里面呢
內(nèi)容較多的時(shí)候,分多行顯示,一般會(huì)用div或者p,span一般用在行內(nèi)
8、<div>與<span>有什么區(qū)別
SPAN 和 DIV 的區(qū)別在于,DIV(division)是一個(gè)塊級(jí)元素,可以包含段落、標(biāo)題、表格,乃至諸如章節(jié)、摘要和備注等。而SPAN 是行內(nèi)元素,SPAN 的前后是不會(huì)換行的,它沒有結(jié)構(gòu)的意義,純粹是應(yīng)用樣式,當(dāng)其他行內(nèi)元素都不合適時(shí),可以使用SPAN
例子:
<div>1</div><div>2</div>
<span>1</span><span>2</span>
從上面例子中可以看到span是不換行的
9、如何讓頁(yè)面中的表格不服從CSS中的table布局
可以為這個(gè)表格重新定義一個(gè)樣式:background:none;
.asd{
background:none;
}
<table class="asd">
</table>
10、層的換行
很少用DIV做東西,今天碰到點(diǎn)問題,還是到婆家求助:
<div nowrap>
<div style="float:left">此處顯示新 Div1 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div2 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div3 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div4 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div5 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div6 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div7 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div8 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div9 標(biāo)簽的內(nèi)容</div>
<div style="float:left">此處顯示新 Div10 標(biāo)簽的內(nèi)容</div>
</div>
現(xiàn)在層是自動(dòng)換行了,我不想讓它換行,想在一行顯示全部?jī)?nèi)容,請(qǐng)問怎樣設(shè)置
答:
需要為容器指定寬度,如:
<style>
ul {margin:0px;padding:2px;width:300%;border:1px solid #630;}
li {display:inline;border:1px solid #f00;}
</style>
<ul>
<li>此處顯示新 li1 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li2 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li3 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li4 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li5 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li6 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li7 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li8 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li9 標(biāo)簽的內(nèi)容</li>
<li>此處顯示新 li10 標(biāo)簽的內(nèi)容</li>
</ul>
11、為什么我表格中的背景顯示不出來
你輸出的時(shí)候應(yīng)該把沒有數(shù)據(jù)的td填入一個(gè)空格或者
css遵循一個(gè)規(guī)則:沒有前景就沒有背景
12、html很多標(biāo)簽都有display屬性,dipslay的值block,inline,none,list-item 分別表示什么
block : 塊對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為塊對(duì)象呈遞,為對(duì)象之后添加新行
none : 隱藏對(duì)象。與 visibility 屬性的hidden值不同,其不為被隱藏的對(duì)象保留其物理空間
inline : 內(nèi)聯(lián)對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞,從對(duì)象中刪除行
inline-block : 將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象,但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)
list-item : 將塊對(duì)象指定為列表項(xiàng)目。并可以添加可選項(xiàng)目標(biāo)志
13、用css如何實(shí)現(xiàn)下面表格的效果
<table width="500" border="1">
<tr align="center">
<td>姓名</td>
<td>年齡</td>
<td>聯(lián)系地址</td>
<td>聯(lián)系電話</td>
<td> </td>
</tr>
<tr align="center">
<td>張三</td>
<td>22</td>
<td>深圳市福田區(qū)華強(qiáng)北路</td>
<td>12345678</td>
<td>編輯</td>
</tr>
<tr align="center">
<td>李四</td>
<td>25</td>
<td>不詳</td>
<td>321</td>
<td>編輯</td>
</tr>
</table>
答:
<style type="text/css">
#dydiv { border: 1px solid #aaa; float: left; }
#dydiv ul { padding: 1px ;margin: 0px; list-style: none; float: left; }
#dydiv ul li { padding: 3px; margin: 1px; border:1px solid #aaa; text-align: center; }
</style>
<div id="dydiv">
<ul>
<li>姓名</li>
<li>張三</li>
<li>李四</li>
</ul>
<ul>
<li>年齡</li>
<li>22</li>
<li>25</li>
</ul>
<ul>
<li>聯(lián)系地址</li>
<li>深圳市福田區(qū)華強(qiáng)北路</li>
<li>不詳</li>
</ul>
<ul>
<li>聯(lián)系電話</li>
<li>12345678</li>
<li>321</li>
</ul>
<ul>
<li> </li>
<li>編輯</li>
<li>編輯</li>
</ul>
</div>
14、鼠標(biāo)停滯顯示文字
可以用對(duì)象的title 或alt屬性
也可以用下面的代碼實(shí)現(xiàn)
<html>
<head>
<STYLE type=text/css>BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋體"
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "宋體"; CURSOR: hand; COLOR: #ff0033
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script>
function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display="";
if (url!=null){my_tips.innerHTML="<img src='"+url+"'align=left>"+tips;}
else{ my_tips.innerHTML=tips;}
my_tips.style.left=event.clientX+10;
my_tips.style.top=event.clientY+10;
}
else
{
my_tips.style.display="none";
}
}
</script>
<a href="#" tips="我是第一個(gè)" onmousemove=show(this.tips,1) onmouseout=show(this.tips,0)>Hello,world!</a>
<a href="#" tips="我就是第二個(gè)" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_member.gif') onmouseout=show(this.tips,0)>你好,中國(guó)</a>
<a href="#" tips="那我就是最后一個(gè)了" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_moderator.gif') onmouseout=show(this.tips,0)>永遠(yuǎn)都好</a>
<div id=mytips style="position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);">
</div>
</body>
</html>