Time of Update: 2017-04-02
css3如何?隔行換色呢?使用css3選取器 p:nth-of-type(odd)奇數 和 p:nth-of-type(even)偶數以下是部分執行個體:<!DOCTYPE html><html><head><style>
Time of Update: 2017-04-01
在Dreamweaver4的CSS樣式裡包含了W3C規範定義的所有CSS1的屬性,Dreamweaver4把這些屬性分為Type(類型)、Background(背景)、Block(塊)、Box(盒子)、Border(邊框)、 List(列表)、Positioning(定位)、Extensions(擴充)八個部分,如,下面我們分別詳細講解。1. Type(類型)Type面板主要是對文字的字型,大小,顏色,效果等基本樣式進行設定。設定時,我們只對要改變的屬性進行設定,沒有必要改變的屬性就空著。注意:
Time of Update: 2017-04-01
偽類可以看做是一種特殊的類選擇符,是能被支援CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對連結在不同狀態下定義不同的樣式效果。1. 文法偽類的文法是在原有的文法裡加上一個偽類(pseudo-class):selector:pseudo-class {property: value}(選擇符:偽類 {屬性:
Time of Update: 2017-03-31
偽類和虛擬元素皆獨立於文檔結構。它們擷取元素的途徑也不是基於id、class、屬性這些基礎的元素特徵,而是在處於特殊狀態的元素(偽類),或者是元素中特別的內容(虛擬元素)。區別總結如下:CSS偽類
Time of Update: 2017-03-31
整理文檔,搜刮出一個CSS3效果:“W”形運行軌跡執行個體的代碼,稍微整理精簡一下做下分享。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{
Time of Update: 2017-03-30
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ margin:0; padding:0; font-size:12px;
Time of Update: 2017-03-28
在沒有瞭解css也可以做背景漸層以前,我都是通過PS一張背景漸層的圖片來應用到自己所做的網頁中。然而,在前不久我瞭解到css3也可以做背景漸層後,想要做背景漸層的效果就很容易了許多,下面是一些css3做背景漸層的方法。 一.線性漸層//自上而下的線性漸層p{width:400px;height:100px;padding:5px;border:1px solid #ccc;background:-webkit-linear-gradient(top, blue, red);/* Safari,
Time of Update: 2017-03-28
內聯樣式表(InLine style)>內部樣式表(Internal style sheet)>外部樣式表(External style sheet)例外:但如果外部樣式表放在內部樣式表下邊引用,則外部樣式表>內部樣式表;1,內聯樣式表權值為1000;2,ID選取器的權值為100;3,Class類別選取器的權值為10;4,HTML標籤選取器的權值為1;具體代碼如下:<!DOCTYPE html> <html
Time of Update: 2017-03-28
img[src=""] img標籤無路徑情況下,灰色邊框去除解決方案1.Js解決辦法<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="error.jpg"
Time of Update: 2017-03-28
【定義】基礎的文本陰影製作效果,不過對text-shadow屬性加以應用可以得到很多絢麗的效果。註:IE9-不支援該屬性。【文法】text-shadow: h-shadow v-shadow blur color;h-shadow:必需。水平陰影的位置。允許負值。v-shadow:必需。垂直陰影的位置。允許負值。blur:可選。模糊的距離。color:可選。陰影的顏色。【效果】一.印刷效果(推薦:深字淺底在字型下方加陰影,淺字深底在字型上方加陰影)text-shadow: 0 1px 1px
Time of Update: 2017-03-27
字型屬性:Font-family: {font-family: name} {font-family: cursive| fantasy | monospace | serif | sans-serif}Font-size: {font-size: 數值 | inherit |xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller |
Time of Update: 2017-03-27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> New
Time of Update: 2017-03-27
使用css3代碼來製作3D按鈕效果,這是一個系列的3D按鈕製作效果,製作方法是老套(萬變不離其中),但其中色彩的調各非常不錯,因為很多效果在PS中製作是容易,特別對於設計師來說更容易,但對於一名coder來說,還是有點困難,具體請看製作的代碼,讓代碼來展現所有的一切。我想您和我一樣會為這樣的效果折服.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Time of Update: 2017-03-27
這是使用CSS3製作的一個圓形按鈕。效果看起來很簡單,其實製作也非常的簡單的,主要就是放射狀漸層的運用,以及@font-face實現的ICON效果,當然其中也離開不其他屬性的點綴效果,比如說box-shadow製作的陰影,transition製作的動畫效果等。代碼中所需要的fonts我已經以附件的形式上傳了,下載下來,fonts目錄和字碼頁面 平級,這樣就沒有問題了。不要放錯位置哦<!DOCTYPE HTML><html><head> <meta
Time of Update: 2017-03-27
今天發現dreamweaver裡能格式化CSS代碼,這樣代碼就不會那麼亂了,應為在網站改版時,發現原來的CSS代碼大小寫很不一致,格式化和縮排也不一致。用dreamweaver格式化方便多了。 格式化CSS:第一步:在編輯--首選參數--代碼格式--選擇CSS按鈕--設定自己喜歡的CSS代碼格式第二步:點擊命令--應用源格式 大小寫轉換:第一步:選中需要轉換的代碼部分第二步:單擊右鍵--所選地區--轉換成大寫/小寫
Time of Update: 2017-03-27
一、看如下例子:(1)HTML部分內容<body> <ul> <li>複仇時刻</li> <li class="widthborder">莫羅請求布雷斯把小孩丹尼帶來神殿以避免惡魔奪取他的靈魂,作為回報他將驅除布雷斯身上的詛咒。</li> </ul> <ul> &
Time of Update: 2017-03-27
練習一:1、類別選取器使用練習:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>
Time of Update: 2017-04-04
最近公司要開發一個移動端的養成類網頁遊戲(就是用手點各種按鈕最後你會找到一個女朋友=。=),要求橫屏顯示,不能豎屏。有經驗的你肯定知道,當使用者豎屏開啟時,提示說你要把手機轉過來是在是件很傻×的事情。這時如果使用者沒開啟手機裡的橫屏模式,還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。我先進行了調研,想看有沒有現成的api。參考過screen的api以及manifest方法
Time of Update: 2017-04-04
我在做導航練習時,是查看那些已經成功的網站的原始碼進行練習,希望通過這些成功的代碼可以學習到代碼背後前端工程師們的編程思路。在查看原始碼中我也學習了很多以前忽視的細節,覺得受益匪淺啊。當我開啟拉勾網的css檔案時,第一部分是用注釋的方式標記了文檔的時間,作者以及樣式表內部方便查看的某些元素的顏色及寬高。第二部分是一些初始化的元素樣式,及初始化的公用類。第三部分是網頁各個部分的樣式。我做的第一個導航練習是拉勾網的導航。lagou_nav.jpg觀察與思考1、這個導航需要寫幾層嵌套呢?2、要不要設定
Time of Update: 2017-04-04
高效能的視差http://www.php.cn/code/9595.html" target="_blank">動畫愛也好,恨也好,視差效果已經遍布web之上了。當你用的巧妙的時候,它可以給應用增加深度和隱喻效果。但問題在於實現一個高效能的視差效果是一個很有挑戰的工作。在這篇文章裡,我們將討論如何構造一個高效能的視差效果,當然同樣重要的是還得跨瀏覽器。視差效果摘要不要使用滾動事件(scroll events)或者背景定位(background-position)來建立視差動畫。使用 CSS