欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

10個(gè)必備的CSS技巧總結(jié)

伯樂在線   發(fā)布時(shí)間：2015-06-29 18:02:44   作者：佚名   我要評(píng)論
這篇文章主要介紹了10個(gè)必備的CSS技巧總結(jié),隨看隨記,敬請收藏~需要的朋友可以參考下

 CSS是網(wǎng)頁設(shè)計(jì)師的基礎(chǔ)，對CSS的了解能使他們能夠設(shè)計(jì)出更加美觀別致的網(wǎng)頁。使用CSS技巧來巧妙地處理CSS是非常令設(shè)計(jì)師著迷的事情。在CSS的深海世界里有很多有意思的東西，你只需要找到最適合你的就好。當(dāng)然我們不可能一下子就記住所有CSS的規(guī)則和語法，但為了以后的發(fā)展我們還是應(yīng)該記住那些非常有用的CSS技巧。今天我們精心準(zhǔn)備了10條對網(wǎng)頁設(shè)計(jì)師最有用的CSS技巧，如果你想設(shè)計(jì)出獨(dú)一無二脫穎而出的網(wǎng)頁你必須得好好注意了。這篇博客是在與一家提供高質(zhì)量印刷服務(wù)的在線印刷公司“ Business Card Printing”合作時(shí)寫的。

1. @font-face

一種用其他服務(wù)器上的字體的好方法。很明顯，如果你不能在托管服務(wù)器上找到你需要的字體，你可以在樣式中使用這個(gè)方法來引入你需要的字體。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @font-face {   
  2.     font-family: Blackout;   
  3.     src: url("assests/blackout.ttf") format("truetype");   
  4. }  

2. .clearfix

如果你沒法清除元素的浮動(dòng)，這是清除浮動(dòng)一種方法。你可以對任何HTML元素單獨(dú)使用這種方法。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .clearfix:after {   
  2.     content: ".";   
  3.     display: block;   
  4.     clear: both;   
  5.     visibility: hidden;   
  6.     line-height: 0;   
  7.     height: 0;   
  8. }  

3. @media

@media 可以設(shè)置你當(dāng)前響應(yīng)網(wǎng)站的媒介，它能幫助你根據(jù)用戶的顯示器調(diào)整網(wǎng)站的寬度。  

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media  screen and (max-width: 960px) {   
  2.      
  3. }  

4. transform: rotate(30deg);

結(jié)合這些轉(zhuǎn)換屬性和CSS轉(zhuǎn)場效果來創(chuàng)造有意思的動(dòng)態(tài)效果。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .title {   
  2.     transform: rotate(40deg);   
  3. }  

5. background-size

這條規(guī)則幫助你在網(wǎng)站中適應(yīng)全屏幕背景。這不像之前的CSS版本必須寫很笨重的代碼。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body {   
  2.     background: url(image.jpg) no-repeat;   
  3.     background-size: 100%;   
  4. }  


6. input[type="text"]

這個(gè)input[type="text"]選擇器和其他高級(jí)選擇器把你從一般水平帶到高級(jí)水平非常有幫助。使用屬性選擇器來控制輸入元素的提交版本或?yàn)橐粋€(gè)外鏈增加一個(gè)圖標(biāo)這樣很不錯(cuò)吧？
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. input[type="text"] {   
  2.     width: 250px;   
  3. }  

7. margin: 0 auto;

很奇怪，沒有任何特定的標(biāo)準(zhǔn)來使塊級(jí)元素居中。這個(gè)方法可以使塊級(jí)元素在父元素中居中。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #container {   
  2.     margin: 0 auto;   
  3. }  

8. a {outline: none;}

在瀏覽你的網(wǎng)站的時(shí)候，點(diǎn)一個(gè)鏈接一個(gè)巨大的虛線框就橫跨整個(gè)網(wǎng)頁這將嚴(yán)重影響用戶的心情。這個(gè)“a {outline: none;}”聲明將移除這個(gè)，但為了易用性別忘了給你的鏈接也加上:focus狀態(tài)。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. a {outline: none;}  

9. overflow: hidden

這是最好的清除還沒加載到你CSS里面的元素浮動(dòng)的方法。使用它使網(wǎng)站的響應(yīng)速度更快。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .container {   
  2.     overflow: hidden;   
  3. }  

10. color: rgba();

PNG圖片因?yàn)樗耐该餍允顾诰W(wǎng)頁設(shè)計(jì)中很流行并廣泛使用，但是現(xiàn)在你可以使用下面這種方法同樣實(shí)現(xiàn)透明。它使用紅、綠、藍(lán)三通道并設(shè)置其不透明度值來實(shí)現(xiàn)透明，像0.5對應(yīng)%50的不透明度。
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .btn {   
  2.     color: rgba(0,0,0,0.5);   
  3. }  

相關(guān)文章

  • 簡要總結(jié)CSS編程中的響應(yīng)式設(shè)計(jì)

    這篇文章主要介紹了CSS編程中的響應(yīng)式設(shè)計(jì),是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-08-03

  • CSS的一些編程規(guī)范總結(jié)

    這篇文章主要介紹了CSS的一些編程規(guī)范總結(jié),文中所列基本上得到多數(shù)開發(fā)者的共識(shí),樹立統(tǒng)一規(guī)范有助于debug等工作的進(jìn)行,因而強(qiáng)烈推薦此文!需要的朋友可以參考下
    2015-07-09

  • CSS清除浮動(dòng)方法總結(jié)

    在阿里云首頁看到很多div都有加上:before和:after的屬性.但是大都只是做了類似的如下處理,請問這樣的意義是什么呢?研究了一番，原來是清除浮動(dòng)用的，下面來總結(jié)下清除浮動(dòng)
    2014-06-17

  • css 調(diào)試方法與經(jīng)驗(yàn)總結(jié)

    主要記錄本人調(diào)試過程中所終結(jié)的經(jīng)驗(yàn)與方法，css關(guān)系到界面的美觀，有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用，終歸還是一件失敗的產(chǎn)品
    2014-06-15

  • CSS多瀏覽器兼容總結(jié)(個(gè)人經(jīng)驗(yàn))

    多瀏覽器兼容一直都是前端開發(fā)者需要考慮的重要問題之一，由于一直困擾著大家，因此本文整理了一些個(gè)人的實(shí)戰(zhàn)經(jīng)驗(yàn)與大家分享下，看過之后感覺不錯(cuò)的可以收藏哦
    2013-10-30

  • CSS樣式的基礎(chǔ)學(xué)習(xí)總結(jié)

    進(jìn)行css布局的同時(shí)，沒有足夠的基礎(chǔ)知識(shí)是不可能的，本文為初學(xué)者整理了一些，經(jīng)常使用的css屬性，感興趣的朋友可以參考下，或許有所幫助
    2013-10-05

  • 深入CSS3 動(dòng)畫效果的總結(jié)詳解

    本篇文章是對,CSS3中的動(dòng)畫效果進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下
    2013-05-09

  • IE下css常見問題總結(jié)及解決

    本文整理了ie中div的垂直居中問題、margin加倍的問題、ie6下頁面min-width/height與max-width/height問題、ie6 3px bug及ie6捉迷藏的問題等等，感興趣的朋友可以參考下哈
    2013-04-01

  • CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語總結(jié)

    CSS（Cascading Style Sheet ）級(jí)聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫DOCTYPE等文檔類型定義,接下來詳細(xì)為您介紹，需要了解的朋友可以參考下
    2013-01-03

  • CSS學(xué)習(xí)和總結(jié)

    本文是小編日常整理了關(guān)于css學(xué)習(xí)和總結(jié)相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
    2022-09-29

最新評(píng)論