欧美日韩一区二区三区四区不卡,日韩欧美视频一区二区三区四区,久久精品欧美一区二区三区不卡,国产精品久久久乱弄

咨詢電話:186 7916 6165 咨詢電話:186 7916 6165 (微信同號(hào))    在線QQ:181796286
NEWS BLOG ·
學(xué)無止境
關(guān)注開優(yōu)網(wǎng)絡(luò) 關(guān)注前沿
CSS濾鏡
iframe自適應(yīng)高度

18個(gè)CSS/CSS3常用樣式

發(fā)表日期:2015-09-17    文章編輯:南昌開優(yōu)網(wǎng)絡(luò)    瀏覽次數(shù):4262    標(biāo)簽:CSS應(yīng)用

1.強(qiáng)制文本單行顯示:white-space:nowrap;

2.設(shè)置溢出文本顯示為省略標(biāo)記:text-overflow:ellipsis;
(注:text-overflow:clip | ellipsis | ellipsis-word;(css3新增加的)
其中clip表示直接裁切溢出的文本;
值ellipsis表示文本溢出時(shí),顯示省略標(biāo)記(...),省略標(biāo)記代替最后一個(gè)字符;
值ellipsis-word表示文本溢出時(shí),也是顯示省略標(biāo)記(...),不同的是,省略標(biāo)記代替的是最后一個(gè)詞)

3.例如一段代碼:<a href="javascript:void(0)"><img src="images/suba.gif"></a>
當(dāng)點(diǎn)擊a標(biāo)簽里面的圖片的時(shí)候,有虛線框,IE中圖片還有邊框,如何解決?
解決辦法:
a{outline:none;}//主要是針對(duì)火狐等瀏覽器,但I(xiàn)E不行
img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur());}//解決IE6,IE7中的虛線框。

對(duì)于a標(biāo)簽來說,一般簡單的解決辦法是:
在a標(biāo)簽里加入js控制,當(dāng)a標(biāo)簽被聚焦時(shí),強(qiáng)制取消焦點(diǎn),這時(shí)候a標(biāo)簽自然不會(huì)有虛線框。

<a href="#" onfocus="this.blur();">測試</a>
但是當(dāng)連接太多的時(shí)候,一個(gè)一個(gè)的加這段代碼不實(shí)用

4.css ie6、ie7中overflow:hidden無效解決辦法

產(chǎn)生原因:
當(dāng)父元素的直接子元素或者下級(jí)子元素的樣式擁有position:relative 屬性時(shí),父元素的overflow:hidden 屬性就會(huì)失效。

解決辦法:
我們?cè)贗E 6、7 內(nèi)發(fā)現(xiàn)子元素會(huì)超出父元素設(shè)定的高度,即使父元素設(shè)置了overflow:hidden。
解決這個(gè)bug很簡單,在父元素中使用 *position:relative; 即可解決該bug

5.表格語法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址
<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)
<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色
<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色
<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)
<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)
<table cols=參數(shù)>...</table>指定表格的欄數(shù)
<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)
<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)
<td colspan=參數(shù)>...</td>指定儲(chǔ)存格合并欄的欄數(shù)(使用數(shù)字)
<td rowspan=參數(shù)>...</td>指定儲(chǔ)存格合并列的列數(shù)(使用數(shù)字)


6.CSS text-transform

text-transform 屬性控制文本的大小寫。
可能的值
值 描述
none 默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。
capitalize 文本中的每個(gè)單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母,僅有小寫字母。
inherit 規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值。

7. letter-spacing

letter-spacing 屬性增加或減少字符間的空白(字符間距)。
例如: letter-spacing: 2px;

8.textarea去掉右側(cè)滾動(dòng)條,去掉右下角拖拽

代碼:  <TEXTAREA   style= "overflow:hidden; resize:none; "> </TEXTAREA>

9.css中透明度兼容代碼:filter: alpha(opacity=80);opacity:0.8;

10.根據(jù)input的type來控制css樣式

a. 用css中的type選擇器

 input[type="text"] { background-color:#FFC; }
b.用css的expression判斷表達(dá)式

input{ background-color:expression(this.type=="text"?'#FFC':''); }
c.用javascript腳本實(shí)現(xiàn)(覺得沒必要,省略...)

11:text-stroke
[ text-stroke-width ]:設(shè)置或檢索對(duì)象中的文字的描邊厚度 [ text-stroke-color ]:設(shè)置或檢索對(duì)象中的文字的描邊顏色

12:text-stroke
text-stroke(文本描邊)和text-fill-color(文本填充色)注意點(diǎn):
目前這兩個(gè)屬性只有webkit內(nèi)核的Safari和Chrome支持,例如: -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color:顏色值,和color屬性差不多都是文字的樣式;
同時(shí)使用text-fill-color和color屬性,text-fill-color將覆蓋color屬性的顏色值;
text-fill-color可以使用透明值,即:text-fill-color:transparent

13:text-shadow
text-shadow:0px 0px 0px #333333;
屬性值依次:水平方向位移(支持負(fù)值)、垂直方向位移(支持負(fù)值)、模糊半徑、陰影顏色
text-shadow對(duì)同一個(gè)text,可設(shè)置多個(gè)陰影,與box-shadow類似,使用逗號(hào)","分割,前一個(gè)設(shè)置效果在后一個(gè)設(shè)置效果之上。

14.設(shè)置字體
<style>
@font-face</p> <p>{
font-family: myFirstFont;</p> <p>src: url('Sansation_Light.ttf'),</p> <p> url('Sansation_Light.eot'); /* IE9+ */
}</p> <p>div
{
font-family:myFirstFont;
}</p> <p></style>

15. css強(qiáng)制性換行
{</p> <p>word-break:break-all; /支持IE,chrome,F(xiàn)F不支持/
word-wrap:break-word;/支持IE,chrome,F(xiàn)F/
}


16.CSS :first-child 選擇器,
:last-child選擇器,:nth-child(IE7,8無效,不識(shí)別)
:nth-child(2)選取第幾個(gè)標(biāo)簽,“2可以是你想要的數(shù)字”
:nth-child(2n)選取偶數(shù)標(biāo)簽,2n也可以是even
:nth-child(2n-1)選取奇數(shù)標(biāo)簽,2n-1可以是odd
:nth-child(3n+1)自定義選取標(biāo)簽,3n+1表示“隔二取一”

17. css3實(shí)現(xiàn)背景顏色漸變

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

第一個(gè)參數(shù):設(shè)置漸變的起始位置

       第二個(gè)參數(shù):設(shè)置起始位置的顏色

       第三個(gè)參數(shù):設(shè)置終止位置的顏色
IE 瀏覽器

 IE瀏覽器實(shí)現(xiàn)漸變只能使用IE自己的濾鏡去實(shí)現(xiàn)

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);

第一個(gè)參數(shù):漸變起始位置的顏色

第二個(gè)參數(shù):漸變終止位置的顏色

第三個(gè)參數(shù):漸變的類型

0 代表豎向漸變        1  代表橫向漸變 


18 css3的RGB顏色和HSL顏色
其中RGB顏色的原理是通過定義不同的紅綠藍(lán)色值來組成一個(gè)顏色。color:rgb(254,2,8);
其中HSL是通過色相、飽和度、亮度模式來申明顏色的。color:hsl(359,99%,40%);

如果需要設(shè)置透明背景 則可以用到他們:
background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);

不使用opacity的原因是:opacity使里面的元素也透明了,而上面的不會(huì)。

 



主站蜘蛛池模板: 海原县| 黄浦区| 阿鲁科尔沁旗| 黎城县| 山阴县| 肇州县| 瑞金市| 邵东县| 宜州市| 白玉县| 资中县| 麟游县| 临桂县| 清徐县| 策勒县| 辽源市| 天水市| 津南区| 名山县| 壶关县| 江山市| 隆昌县| 黄大仙区| 鹤岗市| 东阿县| 扶绥县| 泾阳县| 曲松县| 南和县| 张家口市| 舟山市| 方正县| 金秀| 红河县| 台江县| 伊吾县| 会同县| 抚顺县| 青河县| 年辖:市辖区| 镇平县|