您現在的位置是:電腦技術吧?>? 基礎知識 ??>??小技巧分享,分享一些有用的小技巧??>??正文詳情

小技巧分享,分享一些有用的小技巧

保宛秋2019-11-20 15:31:40 人圍觀
簡介工作小技巧分享瀏覽器之間的激烈競爭意味著越來越多的人正在使用支持最新和最先進的W3C web標準的設備以更具交互性的方式訪問互聯網。這意味著我們最終可以使用更強大和更靈活的

各種瀏覽器之間的競爭的白熱化意味著越來越多的人現在開始使用那些支持最新、最先進的W3C Web標準的設備,以一種更具交互性的方式來訪問互聯網。

這意味著我們終于能夠利用更強大更靈活的CSS來創造更簡潔,更好維護的瀏覽器前端代碼。

現在讓我們來看一看一些也許你還不知道的讓人興奮的CSS 功能。

  1.在CSS中用attr()顯示HTML屬性值  attr()功能早在CSS 2.1標準中就已經出現,但現在才開始普遍流行。

它提供了一個巧妙的方法在CSS中使用HTML標簽上的屬性,在很多情況下都能幫你省去了以往需要Javascript處理的過程。

  要想使用這個功能,你需要用到三種元素:一個:before 或 :after CSS偽類樣式, .content屬性,和一個帶有你想使用的HTML屬性名稱的attr()表達式。

例如,想去顯示  標題上的data-prefix屬性的值,你可以寫成這樣:  代碼如下:  h3:before {  content: attr(data-prefix) ;  }  This is a heading  顯然,這個例子并沒有展示它有多大用處,只是展示了它的基本用法。

讓我們來試一個更有用的例子,attr()的一個極好的應用就是當用戶打印頁面時將頁面鏈接顯示出來。

為了實現這個,你可以這樣寫:  代碼如下:  @media print {  a:after {  content: (link to attr(href) ) ;  }  }  Visithttp://example.comVisit our home page  一旦你知道了這個技巧,你就會吃驚于很多時候它能給你的工作帶來的方便!  提示:在新版的CSS3標準中,attr()功能被擴展,可以用在各種CSS標記中。

  2.使用counter()在列表中自動添加序號  另外一個在CSS 2.1在就已經支持的功能是counter(),使用它,你能方便的在頁面標題,區塊和其它各種連續出現的頁面內容上添加序號。

有了它,你就不必限制于只能使用  來實現這個效果,你可以更靈活的在頁面上使用自定義數字序列。

  關鍵就是它真的很簡單:在:before偽類里的content屬性加入counter():  代碼如下:  body {  counter-reset: heading;  }  h4:before {  counter-increment: heading;  content: Heading # counter(heading) .;  }  如果你想知道更多關于這個counter歸零和自增方法的知識,請參考關于這個主題的Mozilla Developer Network頁面。

里面有個極好的如何使用嵌套counter的例子。

  3.使用calc()做算術  最后,但不是最不重要的,讓我們來說說calc()功能。

這個函數能讓你執行簡單的算術計算,例如計算元素的長寬,免去了你寫不易維護的Javascript代碼。

這個函數支持所有簡單的基本算術運算,包括加減乘除。

  比方說,你想創建一個元素,使它的寬度占滿它的父元素,但還要留出一部分像素寬做其它用處:  代碼如下:  .parent {  width: 100%;  border: solid black 1px;  position: relative;  }  .child {  position: absolute;  left: 100px;  width: calc(90% - 100px);  background-color: #ff8;  text-align: center;  }  漂亮吧,不是嗎?更詳細的介紹請參考W3C CSS calc 規范。

  我們可以越來越清楚的發現,CSS已經成熟到在某些方法可以替代javascript,極大的簡化了web開發人員的工作。

如果你還不開始利用這些功能,那只能說是在犯傻。

版權聲明:本文由 保宛秋 整理編輯。

原標題:分享生活小技巧,分享一下生活小技巧

轉載注明出處:http://www.dn9ww09s.icu/basics/13803.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 月輪加速器,月輪加速器怎么樣

    月輪加速器,月輪加速器怎么樣 相關圖片好用的加速器在玩網絡游戲,特別是海外網絡游戲時,很多玩家都會因為Caton而感到瘋狂,所以在網絡游戲加速器大軍中,月亮輪加速器因為能夠加速國內外的網絡游戲而受到網民的青睞...

  • 秦淮八絕,秦淮八艷

    秦淮八絕,秦淮八艷 相關圖片熱愛祖國的古詩八句一選擇!生活微信電影宣傳推送廣告(上線時間:2014年11月)。坦白地說,我第一次沒有看到這個廣告,但我是通過搜索找到的。與2014年大量簡單互動的初級H5廣告...

  • 士力架有什么用,士力架

    士力架有什么用,士力架 相關圖片士力架化了怎么辦今天的自行車共享市場非常火爆。最近,ofo,一個主要的玩家,推出了一個免費的snicker收藏。ofo怎么能免費得到竊聽器?現在,超人軟件編輯將介紹如何撤銷of士力架...

  • uc的緩存清理不干凈,uc占空間太大怎么清理

    uc的緩存清理不干凈,uc占空間太大怎么清理 相關圖片uc上看電影后空間變小UC瀏覽器是一款功能強大的瀏覽器,所以很多小伙伴都喜歡用它來瀏覽網頁。那么如何清除UC瀏覽器的緩存呢?接下來,超人軟件編輯將介紹如何為iPhone版本的UC瀏覽...

  • dreamweaver怎么做網頁,用dreamweaver做網頁

    dreamweaver怎么做網頁,用dreamweaver做網頁 相關圖片dreamweaver入門操作方法:首先在Dreamweaver中插入一層,然后將廣告圖像放在層表面。最后,在標簽上使用這個插件。安裝插件后,它將被放置在behavior new behdreamweaver網站模板...

  • 魅藍Note8,魅藍Note2

    魅藍Note8,魅藍Note2 相關圖片魅藍note5怎么樣在千元機器市場上,魅族科技旗下的美蘭筆記本系列一直是消費者關注的焦點。從9月1日起,美蘭note6開始線上線下銷售。起價1099元,為用戶帶來強大的小龍625處魅藍not...

  • iOS如何降級,iOS13怎么降級

    iOS如何降級,iOS13怎么降級 相關圖片iOS12蘋果關閉iOS10.1和iOS10.1.1的驗證后,iPhone無法逃脫。針對這種情況,國外一位越獄開發神發布了普羅米修斯,即IOS 10 64iOS12.4...

  • 腦洞大開創意,腦洞大開創意想法

    腦洞大開創意,腦洞大開創意想法 相關圖片腦洞大開的創意小發明一。薄荷維尼圖書店廣告設計:愛情代理|坐標:立陶宛廣告語言:變別人。在薄荷維尼圖選你的英雄。(變成另一個人。在MintV挑選你的英雄國外腦洞大開的創意...

  • 臺式電腦怎么設置開機密碼,電腦怎么設置密碼鎖屏

    臺式電腦怎么設置開機密碼,電腦怎么設置密碼鎖屏 相關圖片win10電腦怎么取消開機密碼我想有很多小伙伴都遇到過電腦被別人隨意移動的情況。那么如何設置電腦開機密碼呢?接下來,超人軟件編輯還想為您介紹如何設置電腦自動關機。讓我們一...

  • 七夕秀恩愛,七夕怎么樣秀恩愛

    七夕秀恩愛,七夕怎么樣秀恩愛 相關圖片情人節秀恩愛的說說七夕節的愛情也取決于時間。不能早也不能晚。因為愛的表露遲早會有報應的,所以我們選擇了周五中午,這也可以讓牛郎和織女的鵲橋更加堅固耐用。接下來,讓...

熱評文章

  • 映客最新功能,映客怎么樣

    映客最新功能,映客怎么樣 相關圖片新版映客24小時制是英科直播推出的一項新功能,類似于朋友圈。那么,如何發揮英科的朋友圈功能呢?現在,超人軟件編輯也想介紹一下英科如何才能活出王者的榮耀,感興趣的合作伙...

  • 怎么制作文字圖片,圖片文字制作

    怎么制作文字圖片,圖片文字制作 相關圖片怎么制作視頻加文字首先,將動畫材質導出到靜態GIF文件:打開FW,創建新文件,輸入文本:設置文本的發光效果參數:設置文本的陰影效果參數:文本的發光和陰影效果:設置屬性欄中...

  • 12306高鐵票能選座位嗎,12306買高鐵票怎么選座位

    12306高鐵票能選座位嗎,12306買高鐵票怎么選座位 相關圖片高鐵票改簽可以選座位嗎10月12日,鐵道部正式宣布,旅客可在12306網上選擇座位。那么,12306高鐵如何選擇座位呢?12306高鐵的座位選擇要注意什么?現在,超人軟件將為您一一解12306怎...

  • dreamweaver模板文件,dreamweaver網站模板

    dreamweaver模板文件,dreamweaver網站模板 相關圖片dreamweaver網頁制作今天我在開發的時候遇到了一個方法,就是客戶要求不要緩存頁面。我發現了以下不允許緩存頁面的方法。如果你需要一個朋友,你可以引用HTML,只要它被添加到頭部...

  • 配音軟件推薦,比較好的配音軟件

    配音軟件推薦,比較好的配音軟件 相關圖片后期配音軟件不管是祝福還是惡作劇,配音后的有趣視頻無疑是一個不錯的方式,但很多孩子不知道如何配音視頻。今天,小編將分享一些有用的IOS配音軟件。讓我們用配音軟件做一些...

  • 嘀嗒刷臉跳過,刷臉不是本人也能過

    嘀嗒刷臉跳過,刷臉不是本人也能過 相關圖片刷臉認證視頻條是一個非常好的視頻播放軟件。在這個軟件中,如果你想成為一個主機,你必須首先通過實名認證。現在,我們怎么能賺錢呢?我想告訴你怎樣賺錢我希望招聯如何跳過...

  • 減少生成物濃度圖像,圖像的最基本單元

    減少生成物濃度圖像,圖像的最基本單元 相關圖片當圖像偏藍時你應當給圖像加減少圖像大小以減少下載時間的最有效方法之一是減少圖像中使用的顏色數。這可以大大降低一些照片圖像的質量,但對于油漆車間專業版中的大多數橫幅...

  • 筆記本質量十大排名,挑選筆記本電腦的技巧

    筆記本質量十大排名,挑選筆記本電腦的技巧 相關圖片現在筆記本電腦主流配置與臺式機相比,筆記本電腦具有攜帶方便、占用位置小等優點,受到了很多人的喜愛。那么什么牌子的筆記本電腦好呢?現在,超人軟件編輯也想為您解答如何...

  • ui設計交互設計,界面交互設計

    ui設計交互設計,界面交互設計 相關圖片交互設計要學什么我們互動的時間越長,我們就越發現文案的重要性。今天,讓我們來談談互動文案文案最初被稱為一個表格,后來演變成一個職業;現在說文案一般是指用文字表達創...

  • 作業幫評論怎么刪除,作業幫刪除觀看歷史

    作業幫評論怎么刪除,作業幫刪除觀看歷史 相關圖片作業幫如何看自己的帖子家庭作業幫助是一個非常實用的學習和閱讀軟件。在這個軟件中,用戶和朋友可以獲得非常專業的學習信息。那么,你知道怎么刪除這些帖子嗎?讓我們跟隨超...

關注微信

变脸官网查询