經常使用css樣式

時間 2019-11-17

標籤經常使用 css 樣式欄目 CSS 简体版

原文原文鏈接

opacity：0.2；圖像的透明度

設置文本域沒法拉伸textarea{resize:none;}

display:none;隱藏當前元素不保留位置 visibility：hidden 隱藏當前元素可是保留位置

filter：alpha（opacity=20）

margin:0 auto;按鈕居中

vertical-align:middle; /* 居中對齊，實現圖片居中 */

margin-left: auto;

margin-right: auto;實現div居中

優先級爲：

!important > id > class >tag !important比內聯優先級高，但內聯比ID要高

CSS3新增僞類舉例

p:first-of-type 選擇屬於其父元素的首個<p>元素的每一個<p>元素

p:last-of-type 選擇屬於其父元素的最後<p>元素的每一個<p>元素

p:only-of-type 選擇屬於其父元素的惟一的<p>元素的每一個<p>元素

p:only-child選擇屬於父元素惟一子元素的每一個<p>元素

p:nth-child(2)選擇屬於其父元素的第二個元素的每一個<p>

:enabled :disabled控制表單控件的禁用狀態

:checked 單選框或複選框被選中

transform：rotate（8deg）旋轉 scale（0.8,0.8）縮放 translate（0px,-29px）定位 skew(-9deg,0deg)傾斜;

position:fixed;

background:rgba(0,0,0,0.8);

z-index:1000;

text-shadow:10px 10px 4px red投影x軸偏移量 y軸偏移量陰影模糊半徑陰影顏色給文本添加陰影效果

text-shadow:1px 1px 0 red;文本陰影實現文字立體感

box-shadow:給元素快添加周邊陰影效果

display: inline-block;塊狀一行顯示

.font-03 ul>li:nth-child(2){}

word-wrap:break-word; 字體自動換行

target-densitydpi=device-dpi 可強制顯示真實分辨率大小

pixel是相對單位 point是絕對單位

odd是基數 even是偶數例子：p:nth-of-type(odd){color:red}

background：-moz-linear-gradient(top,#000000,red)漸變效果

徑向改變：-moz-radial-gradient(red,green,blue);顏色由裏向外

重複徑向漸變-moz-repeaating-radial-gradient(red,yellow10%,blue)

border-radius:百分比設置圓角邊框（也可接受兩個參數 0px 120px）

abbr標籤指示間歇或者縮寫 <abbr title="jjjjj">text</abbr>

acronym標記一個首字母縮寫<acronym title="World wide wed ">www</acronym>

Example.com的聯繫信息

spellcheck=true|flase檢測文本內容拼寫是否正確

<article>標籤規定獨立的自包含內容<article>

<aside>標籤訂義其所處內容以外idea內容</aside>

<audio src="some.wav">您的瀏覽器不支持audio標籤</audio>定義聲音好比音樂

<head>

</head>

transition:width 2s;2秒內填充

background-image:url('1.jpg')

backgrond-size:80px 60px;調整圖片的大小

background-size:100% 100%;徹底填充

background-image:url(img.gif)，url(image.gif);多個背景圖片

background：linear-gradient（top,color1,color2.....）上下漸變

background:-moz-radial-gradient(red,green,blue)由中心開始漸變

background:-moz-radial-gradient(red5%，green15%，blue60%) 徑向漸變-顏色節點不均勻分佈橢圓形

background：-moz-radial-gradient(circle,red,green,blue);原形徑向漸變

background：-moz-repeating-radial-gradient()red,yellow10%,green10%);重複徑向漸變

backgound-repeat:repeat-x;只在水平方向平鋪

background-repeat:no-repeat;設置定位與不平鋪

background-position:right top;設置圖片定位

background:#ffffff url('1.jpg') no-repeat right top;簡寫

簡寫順序 color image repeat attachment position

text-align:justify;文本的對齊方式

text-decoration:none;刪除文本的裝飾連接的下劃線

text-decoration:overline線在文字上

text-decoration:line-through;線在文字中間橫穿

text-decoration:underline;在文字下方畫線

text-transform:uppercase;大寫

text-transform:lowercase;小

text-transform:capitalize;首字母大寫

text-indent:50px;文本縮進

超過隱藏省略號代替color:#666666;width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

word-wrap:break-word;容許文本換行

font-style:normal;

font-style:italic;斜體

a:link{background-color:#ddd}

a:hover{background-color:#ddd}

a:visited已經訪問過的連接

a:active點擊僞類點擊

list-style-image:url('1.gif')做爲列表標記圖形

border-collapse:collapse;摺疊邊框

vertical-align:bottom;底部

transform：rotate（30deg）;2D效果

transform：translate（30px,100px；左上距離

transform：scale（2，3）對元素進行縮放

transform:matrix(0.8,0.5,-0.5,0.8,0,0);接收6個參數包含旋轉，縮放，移動（平移）和傾斜功能

transform：skew（30deg,20deg）; 該元素會根據橫向x軸和垂直y軸給定參數（是繞着x軸和y軸周圍20度和30度的效果）

transform：rotateX（120deg）; 圍繞其在一個給定度數x軸的元素

transform：rotateY（120deg）；圍繞y軸旋轉

transition-duration:5s；在指定時間內

transition:width 2s, height 2s, transform 2s;

時間transition-delay:2s;

transition-property:width;逐漸改變寬度

transition-delay:2s;指定毫秒內切換效果

例子div:hover{

width:200px;height:200px;transform:rotate(180deg);

}

{

width:100px;height:100px;

animation:myfirst 5s;

}

@keyframes myfirst

{

form{background:#f0c;}

to{background:#fc0;}

}

div{width:100px;height:100px;background:red;position:relative;

animation:myfirst 5s linear 2s infinite alternate;

animation:myfirst(@keyframes動畫定義的名稱) 5s（完成一週期所花費的時間）

linear(規定動畫運動曲線)

2s（規定動畫什麼時候開始） infinite規定動畫默認的次數默認是1

alternate;（規定動畫下一週期是否逆向默認是normal）

}

虛線 border-bottom: 1px dashed #e0e0e0;

@keyframes myfrist

{

0% {background:red; left:0px;top0px;}

25%{background:yellow; letf:200px;top:0px;}

50%{background:blue;left:200px;top:200px;}

100%{background:green;left:0px;top:0px;}

}

animation:mymove 5s infinite;

@keyfraames mymove

{

form {background-color:red;}

to{background-color:blue;transform:rotate(180deg);width:100px;height:100px;}

}

固定底部position:fixed;bottom:0px;left:0px;

@media screen and (max-width:320px){
 css代碼  
}

上面代碼說明，若是當前屏幕大於320像素則執行下面css代碼。css

/* 大屏幕 */
@media (min-width: 1200px) { ... }
/* 平板電腦和小屏電腦之間的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 橫向放置的手機和豎向放置的平板之間的分辨率 */
@media (max-width: 767px) { ... }
/* 橫向放置的手機及分辨率更小的設備 */
@media (max-width: 480px) { ... }

邊框

火狐-moz-column-count:3;

-moz-column-gap:40px;

-moz-column-rule-style:dotted;.....outset邊

-moz-column-rule-color:#f0c;邊顏色

建立縮略圖

<img.......>

</a>

img{opacity:0.3;透明度 }

按鈕 cursor：pointer；手勢 cursor：not-allowed;禁用按鈕

在span以後添加內容

.button span:after{content:">>";position:absolute;}

ul >li{display:inline;}排列去樣式

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)0

<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

超出省略號顯示

max-width: 150px;html

overflow: hidden;api

text-overflow: ellipsis;瀏覽器

white-space: nowrap;編輯器

.il_content .media-body p{}

<? echo iconv('GB2312','UTF-8','賠付寶');?>強制轉換字符集

SELECT * from (SELECT pi.id pi_id FROM huadao.core_t_policy ctp LEFT JOIN supeibao.policy_info pi on ctp.`POLICYNO` = pi.policyno) datas where 1 and datas.pi_id is not NULL

htmlspecialchars_decode

解析編輯器

網站頁面規範

1，首頁

<head>
<title>網站SEO標題</title>
<meta name="description" content="網站描述" />
<meta name="keywords" content="網站關鍵詞" />
</head>

2，網站頻道

<head>
<title>頻道/欄目SEO標題-網站名稱</title>
<meta name="description" content="頻道/欄目描述" />
<meta name="keywords" content="頻道/欄目關鍵詞" />
</head>

3，網站文章頁

<head>
<title>文章SEO標題-網站名稱</title>
<meta name="description" content="文章描述" />
<meta name="keywords" content="文章關鍵詞" />
</head>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。