您現在的位置是:電腦技術吧?>? 編程技術 ??>??怎么使用便簽,便簽本有什么用??>??正文詳情

怎么使用便簽,便簽本有什么用

葉新美2019-11-05 17:11:12 人圍觀
簡介好用的便簽本文將向您展示如何使用html5/css3創建一個html頁面,其效果是在5個步驟中發布注釋。效果圖如下:(注:圖中文字純屬捏造,有意搞笑,若相似,純屬巧合,謝便簽條

本篇文字將展示給你的是,如何利用HTML5/CSS3,僅用5步就可以制作便簽貼效果的HTML頁面,效果圖如下:(注:圖里的文字純屬杜撰,搞笑目的,如有雷同,純屬巧合,謝謝!)

注:該效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于對HTML5的支持不完全,所以看不出效果。

第一步:創建基本HTML和正方形首先添加基本的HTML結構以及構建基本的正方形,代碼如下:XML/HTML Code復制內容到剪貼板

    ul liahref=# h2Dudu:/h2 p最近咋沒有美女發帖呢?

    我一定給個頭條推薦,recommend!recommend!/p /a/li liahref=# h2湯姆大叔:/h2 pTeam的一個成員去了Microsoft做SDE3,又得hirenewmember了/p /a/li liahref=# h2技術弟弟:/h2 pO2DS和我翻譯的書是一樣,我一定要比他翻得快,晚上加班翻,fast!fast!fast!/p /a/li liahref=# h2Artech:/h2 pWCF的帖子真是少,看來我得多發點帖子讓大家學習呢/p /a/li liahref=# h2吉日嘎拉:/h2 p將權限管理、工作流管理做到我能力的極致,一個人只能做好那么很少的幾件事情/p /a/li liahref=# h2某武林高手:/h2 p低于25000塊的面試再也不去了,它grandma的/p /a/li /ul

每個note都加一個href連接,主要是為了支持鍵盤訪問,CSS代碼如下:CSS Code復制內容到剪貼板
    *{ margin:0; padding:0; } body{ font-family:arial,sans-serif; font-size:100%; margin:3em; background:#666; color:#fff; } h2,p{ font-size:100%; font-weight:normal; } ul,li{ list-style:none; } ul{ overflow:hidden; padding:3em; } ullia{ text-decoration:none; color:#000; background:#ffc; display:block; height:10em; width:10em; padding:1em; } ulli{ margin:1em; float:left; }
效果如下:

第二步:陰影和手寫草體字這一步,是我們要實現正方形的陰影效果,并且將字體改為草體(僅限英文),由于google提供了Font API的支持,所以我們可以直接使用了,首先添加對Google API的調用:XML/HTML Code復制內容到剪貼板

    linkhref=http://fonts.googleapis.com/css?family=Reenie Beanie:regularrel=stylesheettype=text/css
然后設置引用這個字體:XML/HTML Code復制內容到剪貼板
    ullih2 { font-size:140%; font-weight:bold; padding-bottom:10px; } ullip { font-family:ReenieBeanie,arial,sans-serif,微軟雅黑; font-size:110%; }
關于陰影,由于各個瀏覽器還都不完全支持,所以需要分別處理,代碼如下:XML/HTML Code復制內容到剪貼板
    ullia { text-decoration:none; color:#000; background:#ffc; display:block; height:10em; width:10em; padding:1em;/*Firefox*/ -moz-box-shadow:5px5px7pxrgba(33,33,33,1);/*Safari Chrome*/ -webkit-box-shadow:5px5px7pxrgba(33,33,33,.7);/*Opera*/ box-shadow:5px5px7pxrgba(33,33,33,.7); }
效果如下:

傾斜正方形第三步:傾斜正方形為了讓正方形傾斜,我們需要在li-a里添加如下代碼:XML/HTML Code復制內容到剪貼板

    ullia{ -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); -moz-transform:rotate(-6deg); }
但是為了能讓正方形隨機傾斜,而不是全部都傾斜,我們需要使用新的CSS3選擇器,讓正方形在每2個傾斜4個deg,每3個傾斜負3個deg,每5個傾斜5個deg:CSS Code復制內容到剪貼板
    *{ margin:0; padding:0; } body{ font-family:arial,sans-serif; font-size:100%; margin:3em; background:#666; color:#fff; } h2,p{ font-size:100%; font-weight:normal; } ul,li{ list-style:none; } ul{ overflow:hidden; padding:3em; } ullia{ text-decoration:none; color:#000; background:#ffc; display:block; height:10em; width:10em; padding:1em; } ulli{ margin:1em; float:left; }
效果如下:

第二步:陰影和手寫草體字這一步,是我們要實現正方形的陰影效果,并且將字體改為草體(僅限英文),由于google提供了Font API的支持,所以我們可以直接使用了,首先添加對Google API的調用:XML/HTML Code復制內容到剪貼板

    linkhref=http://fonts.googleapis.com/css?family=Reenie Beanie:regularrel=stylesheettype=text/css
然后設置引用這個字體:XML/HTML Code復制內容到剪貼板
    ullih2 { font-size:140%; font-weight:bold; padding-bottom:10px; } ullip { font-family:ReenieBeanie,arial,sans-serif,微軟雅黑; font-size:110%; }
關于陰影,由于各個瀏覽器還都不完全支持,所以需要分別處理,代碼如下:XML/HTML Code復制內容到剪貼板
    ullia { text-decoration:none; color:#000; background:#ffc; display:block; height:10em; width:10em; padding:1em;/*Firefox*/ -moz-box-shadow:5px5px7pxrgba(33,33,33,1);/*Safari Chrome*/ -webkit-box-shadow:5px5px7pxrgba(33,33,33,.7);/*Opera*/ box-shadow:5px5px7pxrgba(33,33,33,.7); }
效果如下:

傾斜正方形第三步:傾斜正方形為了讓正方形傾斜,我們需要在li-a里添加如下代碼:XML/HTML Code復制內容到剪貼板

    ullia{ -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); -moz-transform:rotate(-6deg); }
但是為了能讓正方形隨機傾斜,而不是全部都傾斜,我們需要使用新的CSS3選擇器,讓正方形在每2個傾斜4個deg,每3個傾斜負3個deg,每5個傾斜5個deg:CSS Code復制內容到剪貼板
    ulli:nth-child(even)a{ -o-transform:rotate(4deg); -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); position:relative; top:5px; } ulli:nth-child(3n)a{ -o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); position:relative; top:-5px; } ulli:nth-child(5n)a{ -o-transform:rotate(5deg); -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); position:relative; top:-10px; }
效果如下:

第四步:Hover和Focus時放縮正方形想在hover和focus的時候達到縮放的效果,我們需要添加如下代碼:CSS Code復制內容到剪貼板

    ullia:hover,ullia:focus{ -moz-box-shadow:10px10px7pxrgba(0,0,0,.7); -webkit-box-shadow:10px10px7pxrgba(0,0,0,.7); box-shadow:10px10px7pxrgba(0,0,0,.7); -webkit-transform:scale(1.25); -moz-transform:scale(1.25); -o-transform:scale(1.25); position:relative; z-index:5; }
設置z-index為5是為了讓正方形在放大的時候蓋住其它的正方形,同時因為也設置了focus,所以也支持Tab鍵切換訪問,效果如下:

平滑過渡和添加顏色第五步:平滑過渡和添加顏色第四步的特效,看起來有些生硬,我們可以添加Transition來達到平滑動畫的效果,另外顏色比較單一,我們可以設置一下不同的顏色,首先在ul-li-a里添加Transition:CSS Code復制內容到剪貼板

    -moz-transition:-moz-transform.15slinear; -o-transition:-o-transform.15slinear; -webkit-transition:-webkit-transform.15slinear;
然后在even和3n里定義不同的顏色:CSS Code復制內容到剪貼板
    ulli:nth-child(even)a{ -o-transform:rotate(4deg); -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); position:relative; top:5px; background:#cfc; } ulli:nth-child(3n)a{ -o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); position:relative; top:-5px; background:#ccf; }
這樣,就完成了我們最終的效果:

總結至此,我們利用了HTML5和CSS3的基本特性做成了一個還不錯的便簽貼效果,HTML5/CSS3確實很強大,如果在加一些高級特性,比如和JavaScript結合起來,能實現更加牛逼的效果,從當耐特磚家給大家的HTML5實驗室系列文章,就可以看出來了。

版權聲明:本文由 葉新美 整理編輯。

原標題:便簽,便簽本

轉載注明出處:http://www.dn9ww09s.icu/program/11239.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • word2007產品密鑰在哪看,2010word產品密鑰

    word2007產品密鑰在哪看,2010word產品密鑰 相關圖片word產品密鑰office是我們在使用計算機時經常使用的一種軟件,因為它可以幫助我們處理表格、文字等。但是我們都知道,如果我們想永久使用office,就需要激活office,word2007激活密鑰...

  • qq8.0.8版本有什么功能,微信更新版本后的功能

    qq8.0.8版本有什么功能,微信更新版本后的功能 相關圖片QQ新版本功能Adobe Flash professional CS5軟件可用于創建精彩的交互,并可用于在幾乎任何大小和分辨率的個人計算機、移動設備和屏幕上提供持續呈現的迷人蘋果版本...

  • 未來人類筆記本怎么樣,戴爾外星人筆記本

    未來人類筆記本怎么樣,戴爾外星人筆記本 相關圖片外星人筆記本隨著越來越多的筆記本電腦的出現,我們對筆記本電腦的要求也越來越高每個人都想要一個設備好、價格適中的筆記本。所以我們在購買時,應該仔細查看它的相關配置信...

  • 如何創建站點,創建站點內容

    如何創建站點,創建站點內容 相關圖片站內站如何創建在開始之前,本教程假設您對HTML、CSS和JavaScript有一些基本的經驗假設您知道什么是html元素或標記,什么屬性表示,html標記的基本語法,webweb站點怎么創建...

  • windows產品密鑰,windows7產品密鑰

    windows產品密鑰,windows7產品密鑰 相關圖片windows密鑰有些東西需要密鑰或密碼才能打開或使用Windows系統也是如此我們并不是說它可以在安裝后永久使用,但只能在使用Windows的產品密鑰激活后使用。今天,我要給你window7產品激活...

  • 段落縮進,段落首行縮進

    段落縮進,段落首行縮進 相關圖片各段落首行縮進2字符style type=text/css!--p{text indent:2em;/*em是相對單位,2em是當前一個單詞大小*/}--/stylep段落前面兩個各段落懸掛縮進2字符...

  • 一鍵啟動怎么用,一鍵卸載大師

    一鍵啟動怎么用,一鍵卸載大師 相關圖片一鍵啟動正確用法圖解當我們使用計算機時,打開網頁的概率可以高達70-80%當我們打開互聯網時,我們可以使用高達80%的搜索功能但編輯近日發現,一些網友并不太擅長使用網頁的搜索...

  • n卡自帶幀數,n卡自帶幀數怎么開

    n卡自帶幀數,n卡自帶幀數怎么開 相關圖片n卡顯示幀數GeForce Experience可以通過提醒新的Divia運行和關閉,以及根據硬件配置優化游戲中的圖形設置來優化您的PC。這樣,您的計算機就可以保持最新,并n卡自帶fps...

  • 葡萄酒酒瓶,紅酒瓶

    葡萄酒酒瓶,紅酒瓶 相關圖片紅酒開瓶器怎么用看上去精致漂亮的酒瓶其實制作起來很簡單。它可以很容易地與煙花在幾個步驟首先,使用形狀工具畫出相應的形狀通過這些形狀的組合,我們可以得到一個瓶身然后...

  • 電腦突然黑屏,電腦突然黑屏怎么辦

    電腦突然黑屏,電腦突然黑屏怎么辦 相關圖片電腦黑屏在使用計算機時,我們經常遇到一些計算機問題而不知所措例如,用戶經常會遇到黑屏的情況對于初學者來說,這似乎是一場電腦災難,無所適從其實,只要你明白原因,就不...

熱評文章

  • 筆記本固態硬盤怎么安裝,筆記本安裝固態硬盤

    筆記本固態硬盤怎么安裝,筆記本安裝固態硬盤 相關圖片筆記本光驅換固態硬盤隨著ssd的普及,它解決了傳統機械硬盤的性能缺陷,帶來了更快的計算機開、關速度,提高了計算機的流暢性,有效地提高了文件傳輸速度等,成為主流pc用戶的標...

  • 4g網速變慢,5g商用后4g網速變慢

    4g網速變慢,5g商用后4g網速變慢 相關圖片為什么最近網速這么慢你經常用電腦嗎但我相信你們大多數人都喜歡玩電腦,所以我今天要談一個電腦問題當我們玩電腦的時候,突然間網速變慢了。我們現在該怎么辦?今天的小編輯...

  • 什么隔色,隔色什么意思

    什么隔色,隔色什么意思 相關圖片個什么css交織顏色變化的使用率相當高。今天,我花時間寫了一個簡短的教程,教那些不太適應css的初級學者兩種方法來實現css的交錯變色功能。如你所知,顏色變化的對象一什么什么...

  • 怎么把pdf文件轉換成word,幻燈片文件轉換成word

    怎么把pdf文件轉換成word,幻燈片文件轉換成word 相關圖片如何將掃描件轉換成word文檔將掃描的文件轉換成word文檔是我們工作中經常需要做的事情之一。有很多人認為這是一件比較困難的事情,但是只要有專業的軟件,就很簡單那么如何將掃描...

  • ins標簽,ins如何帶標簽

    ins標簽,ins如何帶標簽 相關圖片ins標簽不顯示INS的數據解釋是:定義插入的文本INS有兩個標準屬性:cite和datetime引用的值是url,它指向另一個文檔以解釋插入新文本的原因;date time的ins怎么復制很多標簽...

  • office 激活碼,office2010激活碼

    office 激活碼,office2010激活碼 相關圖片office2013永久激活碼已安裝的Office2016都是非活動試用版。使用一段時間后,會提示密碼過期或產品激活失敗有些人不知道office 2010激活碼是什么,所以他們無法使用新功能office激活...

  • outlook激活密鑰,outlook怎么激活

    outlook激活密鑰,outlook怎么激活 相關圖片outlook激活碼在我知道outlook 2007即將被激活之前,我很高興下載并安裝它,準備使用它來獲取一些東西。但冷是無法打開的,后來朋友知道了,才告訴我需要激活Outlook2013office激活密鑰...

  • 彈跳的球球,彈跳球怎么做

    彈跳的球球,彈跳球怎么做 相關圖片一個球一直彈跳的游戲彈跳球是用html5實現的。別驚訝。它完全可以通過使用HTML5來實現具體截圖和代碼如下。有興趣的朋友可以參考夏哈,希望能幫你拷貝代碼如下:HTML頭元字符集=彈...

  • 0x000000116藍屏,藍屏0x000000d1

    0x000000116藍屏,藍屏0x000000d1 相關圖片電腦藍屏0x0000016怎么辦我們知道,電腦使用不當會導致藍屏甚至無法啟動,原因有很多,如常見的硬件不兼容、軟件不兼容等。由于電腦藍屏的原因不同,解決方法也不同藍屏代碼0x00...

  • compatible,ua模式

    compatible,ua模式 相關圖片ua兼容模式在行政長官的IE9下,公司的項目無法正常訪問,我們需要使用以下方法:使網頁與IE9兼容,并復制如下代碼:![如果lte ie 8]元http equiv=x-uincompatible...

關注微信

变脸官网查询