整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
豬腳本（原飛豬腳本）以按鍵精靈教學為主,涉及UiBot，Python,Lua等腳本編程語言,教學包括全自動辦公腳本,游戲輔助腳本,引流腳本,網頁腳本,安卓腳本,IOS腳本,注冊腳本,點贊腳本,閱讀腳本以及網賺腳本等各個領域。想學習按鍵精靈的朋友可以添加金豬腳本粉絲交流群:554127455 學習路上不再孤單,金豬腳本伴你一同成長.
1.什么是網頁元素特征字符串？
請參考網頁特征字符串詳解，
2.Html系列命令
2.1.HtmlSelect命令
1 HtmlSelect命令只能夠根據Select項的值來進行選擇，注意這里不是顯示在Select項上的文字，而是該項的value。
一個典型的下拉框HTML代碼如下：
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
這里如果要選擇上海，需要選擇值為2的項；
2）級聯的下拉列表組合。
在有的網頁中，會有幾個級聯的下拉列表，后一個下拉框會隨前一個框的值變化而發生變化，典型的有注冊頁面上的省份城市選擇，HtmlSelect命令能夠觸發Onchange事件，會導致后一個下拉框值發生變化，但是如果執行腳本太快，而導致后一個未能選中正確的值，可以在前一個HtmlSelect后加上適當的延時；
3）多選表單中的列表控件；有的列表支持多選，在有一些個求職網站中，職業是可以多選的，這時候可以用%將多個需要選擇的值連接起來傳遞給HtmlSelect命令實現多選；
2.2.HtmlExists命令
HtmlExists命令，能夠判斷指定特征的元素是否存在，并能夠返回具備該特征的元素的個數。這個命令能夠用來判斷某個元素是否存在，如果為0證明不存在；
2.3.HtmlGet命令
HtmlGet命令比較復雜，但是功能也非常強大，該命令具備兩個參數，第一個參數為獲取類型，目前支持的值如下所示：
序號 值 適用對象
1 text 得到指定元素的文本值，對應DOM屬性innerText
2 html 得到指定元素內部的HTML代碼，對應DOM屬性innerHTML
3 outerHtml 得到元素整體的HTML代碼，對應DOM屬性的outerHTML
4 value 得到元素的Value值，用于獲取表單元素內部的值
5 src 得到圖像元素的src屬性，用于IMG標簽對象
6 href 得到鏈接元素的鏈接地址，用于A標簽
7 …其他名稱 其他屬性，如果您使用的是合法的屬性名稱，就能夠返回對應的值。如何才是合法的屬性？請參閱HTML標準。
第二個參數為特征字符串，如果匹配多個，只能返回第一個元素的值；
例如，獲得淘寶貨物價格：
Plugin price=Web.HtmlGet("text","id:id_Price")
獲取某個表單文本的值
Plugin email=Web.HtmlGet("value","name:Email")
2.4.RunJS命令
RunJS命令提供了直接運行Javascript的功能，如果您對JS非常熟悉，就能夠極大的擴展WQM的功能。
RunJS命令支持兩中執行方式，第一個參數設置為0時，能夠執行一段沒有返回值的Javascript，
例如：
RunJS(0,"alert('hello');")
第一個參數設置為1時，能執行一段js并返回由return語句返回的值，返回值為字符串類型；
例如：返回Html文檔的title；
RunJS(1,"var t=document.title;return t;")
如果您分析到網頁中某個按鈕實際上就是執行了一個函數，例如
<input type="Button" … />
您就可以直接調用
RunJS(0,"dosomething();")
JQuery的支持，網頁按鍵精靈集成了Jquery1.3.2，為了不與其他JQ的庫發生沖突，使用了wqmjq來代替$操作符，如果您需要直接使用JQ來操作網頁，可使用wqmjq來執行Jquery語句：
RunJS(0,"wqmjq('#test').click();")
里妹導讀：今年的雙11已經是阿里資深前端技術專家舒文來阿里的第11年，從應屆生到雙11前端PM，他一路升級打怪，實現了崗位上從P4到P9的晉升。這第11屆雙11順利結束之際，他把在阿里這些年的成長經歷做一個總結和分享，希望你能在他的故事中得到些許啟發。
作者簡介：舒文，來自淘系技術部前端團隊。目前負責淘系(淘寶+天貓)的營銷活動、互動的業務，也在阿里巴巴前端委員會主導搭建體系的技術方向。
2008年10月，入職阿里巴巴日文站，以前端崗加入UED團隊。日文站 ( http://www.alibaba.co.jp ) 的業務源于阿里巴巴國際站 - 提供在線的平臺化服務，專注撮合中日貿易。
在那個前端的鴻蒙年代，頁面重構工程師和Javascript程序員還是兩個細分職位： 在阿里，前端、交互、視覺共同劃屬用戶體驗部門。
而在部份公司，有專門的重構工程師。
在日文站亦如是：現實情況是杭州和東京的團隊，具備寫JS能力的工程師均不多。不少同事專注在HTML/CSS領域，且專研極深。舉個例子：在日文站，所有的HTML/CSS代碼必須通過兩個Lint工具：HTML文書の文法をチェックし、採點します、[The W3C Markup Validation - 這讓代碼的規范性更好外，也能獲得更好的搜索引擎分析&索引權重。
隨著業務發展，需求場景多且復雜起來，對Javascript開發能力要求就越高。同時，也激發了我的技術熱情。除了看書，我迫切想參與其他事業部的前端交流會。感謝時任主管的支持，我開始主動跨部門溝通，將他山之玉和學習所得有了更多結合。慢慢地，在團隊內部提出一些技術方案并逐漸應用到杭州/東京兩個團隊 (特別感謝最早時代的D2)。
在那個階段，我幾乎參與了所有較為復雜的項目。結合當年的熱門大作《高性能網站建設指南》、Yahoo網站性能優化黃金法則，負責了主站的性能優化，取得了一些不錯結果。
2009年10月獲得了日文站優秀員工，年底順利晉升到新的層級(P5)。
2010年開始，業務略微調整，參與“日本買家獲得”(Buyer Growth)。這個業務本質是通過平臺技術優化(SEO、SEM等)獲得更高的搜索引擎權重、提高Landing到轉化。
在這期間，隨著被認可度提升、持續的項目歷練，我的自信心也得到了鍛煉。除了參與更復雜的項目外，我開始主動對業務和技術體系做出一些提案(Proposal) - 包括參考Google Webmaster Guidelines進行技術優化、參與了各種SEO項目，提出了現在回想起來各種或靠譜或不靠譜的提案。非常感謝歷任主管的支持和包容，讓一個楞頭青能夠沒有后顧之憂地敢想敢做。
日文站初版克隆自Alibaba.com，加之外包參與、跨東京和杭州多團隊開發等原因，全站前端框架混雜，包括不限于YUI/Mootools/PrototypeJS/ExtJS/TBra等前端框架&類庫混雜在同一業務甚至頁面。新人上手、多人協作、性能優化的成本很高，但歷史原因積重難返，大家苦不堪言。
結束一個大項目后，時值“憤青”的我對全站的代碼做了個調研和分析，說服了主管們，決定啟動一個重構項目——旨在將全站混雜的代碼統一到 jQuery。并大體確定了執行方案：隨業務迭代上線、項目成員1人，我兼任PM、開發/自測。
在之后，一個如同打了雞血般的前端程序員，白天黑夜的翻歷史PRD、熟悉代碼邏輯、閱讀各種類庫的手冊，陸續將各業務線的腳本重寫了一遍，邊做業務項目邊重構，整個項目持續了半年多，直到11年Q1完成。
現在回想起來，有些事情真需要一股沖動，正如買房、結婚。如果主管讓我再多考慮半天，我興許就慫了。當然，人生也可能走入另外一條主線。
2011年日文站業務合入B2B，我也參加并通過新事業部的年中晉升(至P6 ) 。
2011年阿里巴巴日文站誓師大會
兩段非常寶貴又特別的經歷。
2011年下半年主動選擇加入阿里內部的創業項目：打造一款面向個人消費者的云產品。 團隊不大，20多人，各路專家云集，各負責人級別都很高。很享受這段工作旅程，我第一次參與桌面Hybrid端項目，第一次開發SPA Web應用，第一次參與跨桌面軟件/PC Web/H5的項目，第一次領略敏捷管理的魅力。在來自美國的技術Leader帶領下，我接觸到很多新領域，極大地開闊了技術視野。
“創業失敗是要承擔風險的，沒有加薪，沒有晉升，而且還是996，直到項目成功”。第一次面試這個項目前，業務負責人，阿里工號16的虛竹告訴我。
不算幸運的是，最終這個項目沒有取得如預期的成功，業務有了變化和調整。
但幸運的是：這段經歷讓我親身體驗了一把“創業”，也感受了技術以外的方方面面艱難。這個過程中形成的產品和業務思維，對我日后帶來了深刻影響。當然，也在我之后幾百次想離職創業時，這段經歷讓我能夠靜下心來思考創業的內核 - “為什么要創業？我有什么資源、能做什么事情、創造什么價值？”
忘了說，這段經歷之所有特別，還因為辦公地點在湖畔花園——馬老師家。
湖畔花園辦公場地
2012年7月，加入到天貓的前端團隊。 主管給予了充分的信任，讓我負責天貓H5首頁的研發，開始接觸淘寶前端—— 一個更成熟完整的技術體系。
2012年底，@三七 加入天貓帶領前端團隊，作為國內前端領域最早的拓荒者之一，他在隨后的兩年時間給天貓的前端技術帶來體系化的變革——從模塊化到工程化再到生產環境的NodeJS，并引入了Mobile First理念。在他的支持下，我帶領了一支前端小組陸續參與多條業務線的開發工作。我自己也加入集團級技術建設，主導跨端Web的項目，推進了前端體系的移動化建設。
除專業技術外，花了比原來更多的功夫在團隊工作上，包括不限于團隊氛圍、風格和文化的打造，學會在內網分享中學習借鑒前輩大拿的的管理方法論。在阿里的文化中，非常強調傳承。一個人牛不算什么，讓一群人厲害才算厲害，最好是讓下屬比自己還強。
時間花在哪兒，結果就會在哪兒。團隊內一些業務尖兵逐漸冒出頭來，在后來幾年成為天貓甚至大淘系的中堅力量。
這個過程既痛苦又快樂。痛苦在于要做越來越多的超過自己能力層級、遠離舒適區的工作，快樂的則是能明顯感知到自己在這個過程中的快速成長。
很幸運，在14年年中，順利通過晉升(P7)。
2014年注定是難忘的一年。在這一年，我開始負責營銷活動的業務，并擔任2014年雙十一前端技術PM工作。
營銷活動是一個頂有趣、富有故事的業務：
從技術上：它可以極致簡潔到切一個頁面上線就行，也可以復雜到如雙11一般 ——它是阿里技術的年度大考。
從業務上：它既可以簡單到直接把現實生活的促銷活動進行虛擬世界的進行流程投射，也能如互聯網史上的春運般整合零售生態和供應鏈。
我和多個團隊在天貓制定了各個維度的技術規范，如內控標準、外包規范，有驚無險地渡過了14年雙十一。
在PC時代，營銷活動的研發模式，對于前端來說，實在過于“簡樸”：“5到6位正式前端常年帶著數十個外包，根據運營需求開發成百數千的頁面，通過一個叫做TMS的運營系統預留坑位給運營同學填數據，交由后端應用推上線（CDN）。” 這類業務活動頻次高、頁面量大、協同成本高。某種意義上講，對前端技術挑戰并不高，為了更高效的研發，我們能做的是不斷提高組件和模塊復用率。
感謝TMS，它幫助前端們快速迭代出一個又一個頁面，支持了集團的業務，即使在今天，它的設計思路都能稱得上精巧犀利。
發生變化來自2014年雙十一前，線上發生了一次令我終生難忘的離奇故障（涉及敏感信息，略過細節）：當時因臨時未排查出原因，VP現場觀摩面，我和CDN運維團隊的同學們能做的只是不斷重啟集群應用緩解問題。
我作為時任前端PM，也因技術方案選擇失誤受到批評責罰。（時隔多年，大家也偶爾調侃，責罰不冤，幸而那天的問題提前暴露而未發生在11.11號當天，否則后果難料 ）。
那年雙11最終還是完美謝幕，GMV 571億，移動端成交42.6% ，很多人敏銳的感覺到：移動化時代到來了。
之后技術復盤，我們針對問題做了多輪討論和推演，決定啟動一個代號“斑馬”的產品項目：基于我們對營銷的理解，運營的實際需求、過往的技術痛點，設計一個高效的頁面系統來支持運營快速發布活動上線，更重要的是它是完全的基于Mobile First設計的系統。
正所謂 “一飲一啄，莫非前定” ，因為過去一年的打磨錘煉、痛過后的反思，我們很快把方案框架敲定，并和多個業務搭檔共同推進項目實施。
項目于15年初立項，我代表團隊“激進”的將階段目標定為“支撐2015年3月的春季大促” 。這種既要支撐日常高頻的大促業務，又要同時從0到1做平臺研發，不啻于“飛行中升級引擎”，困難很大。但我背后的思考是：“這就如同創業，沒有一往無前的決心和一鼓作氣的氣勢，等想多了細了，多半就慫了怕了”。
我負責整個系統及PM工作，團隊培養出來的中堅力量們承擔各個功能模塊研發。為實現我們心中所定計劃，整個項目組如同創業般激情，為了一個共同的目標奮進。春節假期不少同學還在主動提交代碼，節后迅速返回公司繼續項目。
很幸運，克服了重重困難，“斑馬”項目順利上線，并成功支持了2015年第一個S級大促。基于新的系統，我們共同把營銷活動送上新的軌道：因模塊化帶來的效率提升讓我們完全解除了外包依賴、因具備跨端能力運營們可以單次同時進行PC和無線活動、我們設計并推動了CDN構架，單在15年雙11就節省了數千萬預算。
隨著技術迭代，“斑馬”這個技術產品，在后面幾年成為阿里的基礎運營平臺之一。
2015年5月，我參與了P8的晉升提名，結果未通過。Leader和我溝通：“成長很快，能力和規劃出色，業務成果需要時間驗證”。我很坦然接收了建議，晉升答辯中的技術評委的建議中肯不失公正，讓我受益很大。
“但行好事，莫問前程”——在隨后的時間，“斑馬”的能力更為完備。我再次擔任了2015年雙11的前端PM工作，業務也順利上線。那一年，雙11當天GMV 912億，移動端成交68%。
16年1月，新主管告訴我，綠色通道通過，晉升至P8。
雙十一令牌/虎符
一次偶然的機會，看到一張圖：如遵循民意蘋果手機會變成什么樣？給我帶來一些對業務和技術的思考：“頁面發布系統本質上是一個通用的工具平臺：前端/運營/設計師都是它的用戶，每個角色都有對它的功能需求。但每個新增功能在解決一類用戶需求的同時又增加了平臺復雜度，降低的客戶的易用性，丟失掉另一類用戶的民心。”
“這興許是一個產品的輪回宿命”，我內心有些敬畏地想。帶著這個敬畏，時間到了2017年，隨著斑馬的功能日趨復雜，我決定將運營操作平臺和底層技術能力進行剝離：
隨著時間推移，“天馬”的開放能力不斷完善，越來越多的事業部基于它構建面向業務的平臺系統，帶來的技術回報是：技術復用減少從0到1的研發&硬件成本、標準統一使跨業務協同變為可行。
而在技術的另外一邊，業務發生著悄無聲息的變化：16年雙11GMV 1207億、17年雙11則是1682億。每年雙十一在如此巨大的基數下還能持續業務高增長，個性化算法、推薦技術的大規模應用起到了非常重要的作用。在全局效率上，大數據優于人工干預逐漸得到了共識。在我看來，這些變化意味著時下大家認可的大促會場模式，也將帶來新的變化。
2018年2月，我在內部做了個分享，描述了對營銷活動未來的預判：
基于以上預判，我和團隊的小伙伴，計劃聯同業務、上下游技術團隊共同構建一個面向營銷活動的平臺產品（項目代號：方舟）。
很感謝歷任主管實仙/四虎的信任，愿意幫我頂住重重壓力，經過多輪溝通，我們達成了一致共識。
和過去幾年稍有不同的是，我逐漸把包括不限于方舟的一些重要產品放手給團隊中的骨干/TL，讓他們去規劃、去驅動、去變革。我更多做了輔導性、資源性、業務判斷的全局性工作。
隨著時間的推移，越來越多的結果開始凸現：
在2018年中，提名參加晉升面試，結果未通過，技術委員會的評委們建議更多參與“集團級的技術建設、更高格局的視野”。
我很快走出了沮喪，畢竟在阿里，常勝不常有失敗倒常伴。更重要是，主管 @四虎 的開導讓我開始思考更全局的未來。
隨后的時間，我繼續投入了2018的雙11前端整體工作，推進了多個端技術方案落地天貓。感謝阿里前端技術委員會主席圓心的舉薦，我加入前端委員會，擔任搭建技術方向的Sponsor - 旨在站在集團視角，定制標準、融合并打通搭建技術體系，在更大范圍內賦能業務。
在集團內各個前端Leader的支持下，我們很快跨多個事業群達成了共識，制定完善了技術標準，基于一體化方案啟動了多個層面的項目。
2019年5月，參加了年度晉升，順利通過P9晉升。感恩。
現在，仍然有太多的事情值得去深入：
除以上，我也深度參與阿里前端技術委員會的工作：
在阿里的前端體系，除了搭建方向以外，有相當數量的跨事業群共同建設的技術方向&項目，包括不限于Serverless、IDE、智能化、中后臺、數據可視化、工程化、Node技術等。這些技術方向或者始于前端，但又不止于前端，共同為打造行業領先的技術生態服務。
有期待有更多的優秀的同學加入阿里，讓我們的智力和努力觸碰到數以十億計的用戶。歡迎加入聯系我：wenliang.shuwl [at]alibaba-inc.com
最后分享一些過往些年的的心得：
關于工作：
1.想做好一件事情前，獲得上級的認可非常非常重要，這是把一件事情做成、做好的催化劑。
2.很多時候，源自“事”的困難都可以用態度解決，來自“人”的困難可以用換位思考解決。
3.對于剛參加工作的同學，如果家中無礦，啥也別說，努力就對了！畢業五年內的表現，可以決定人生很多事情。
4.如果你和領導發生分歧：拿出你的數據/理由/態度盡最大的努力去說服他，如果充分溝通還形不成共識，那就先聽他的 。這不是媚上，而是“在必須達成一致的前提下，相信更有概率做出正確決定的人。”
5.在工作中，如果某個時間突然發現和往常不一樣，陡然壓力變大/身心疲憊，別害怕 ，因為，這有可能是你在成長、突破瓶頸前的黑暗期。
6.專業技能是立身之本。從長期來看，它是性價比最高的投資標的之一。
7.結合資源，盡最大的努力、用最好的態度，做好手上的工作，也是一種創業。
8.不要因為背靠大樹久了，就誤認為自己是顆大樹。對客戶&用戶的尊重和價值創造是我們很大的護城河。
關于生活：
1.技術人讀書工作掙錢養家，一步步成長同時也會一歲歲變老。相比不少行業，互聯網行業自身有賽道上的優勢，但如果單純以同比其他行業略高的溢價按年/月出售自己的時間和技能，這不應該是我們做的。堅持不斷的思考、通過技術優勢帶來疊加價值，在過程中不斷成長 ， 這興許會更好。
2.學會獎勵自己。如果經受了辛勞、痛苦和壓力走了過來，再不好好的、肉痛地獎勵自己一把，哪對得起過去和未來的自己。
3.除了在工作中，人生處處皆可學習：學理財、學打球、學拍照、學游泳、學健身、學拍短視頻、學習怎么把生活過得更好。
4.最后，咱們技術人可能很忙，有可能沒法“work-life balance”，這是一種取舍。但健康的身體一定是最寶貴的一筆財富，沒有之一，不能舍。謝謝大家。
多小伙伴不知道怎么寫代碼或者修改代碼，做出自己想要的效果，所以特意花了點時間 整理了一下比較全的CSS樣式。有任何問題或者交流都可以加我個人微信：laiwang16
使用方法：
一：樣式表 .miser { font-weight: bold; } /*將樣式完整的寫入樣式表進行調用*/ 格式：屬性名:屬性值;
二：行內樣式
<div style="font-weight: bold;">樣式具體應用
字體屬性：(font)
大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD
樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)
行高 {line-height: normal;}(正常) 單位：PX、PD、EM
粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)
變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)
大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)
修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)
常用字體： (font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景屬性： (background)
色彩 {background-color: #FFFFFF;}
圖片 {background-image: url();}
重復 {background-repeat: no-repeat;}
滾動 {background-attachment: fixed;}(固定) scroll;(滾動)
位置 {background-position: left;}(水平) top(垂直);
簡寫方法 {background:#000 url(..) repeat fixed left top;} /*簡寫·這個在閱讀代碼中經常出現，要認真的研究*/
區塊屬性： (Block) /*這個屬性第一次認識，要多多研究*/
字間距 {letter-spacing: normal;} 數值 /*這個屬性似乎有用，多實踐下*/
對齊 {text-align: justify;}(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)
縮進 {text-indent: 數值px;}
垂直對齊 {vertical-align: baseline;}(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;
詞間距word-spacing: normal; 數值
空格white-space: pre;(保留) nowrap;(不換行)
顯示 {display:block;}(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題) /*display 屬性的了解很模糊*/
方框屬性： (Box)width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左
邊框屬性： (Border)border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;
邊框寬度：border-width:; border-color:#;
簡寫方法border：width style color; /*簡寫*/
列表屬性： (List-style)
類型 list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
圖像 list-style-image: url(..);
定位屬性： (Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
一 CSS文字屬性：
color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標字*/
vertical-align:super; /*上標字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
text-align:right; /*文字右對齊*/
text-align:left; /*文字左對齊*/
text-align:center; /*文字居中對齊*/
text-align:justify; /*文字分散對齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
vertical-align:text-bottom; /*文字垂直向下對齊*/
二、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白
三、CSS符號屬性：
list-style-type:none; /*不編號*/
list-style-type:decimal; /*阿拉伯數字*/
list-style-type:lower-roman; /*小寫羅馬數字*/
list-style-type:upper-roman; /*大寫羅馬數字*/
list-style-type:lower-alpha; /*小寫英文字母*/
list-style-type:upper-alpha; /*大寫英文字母*/
list-style-type:disc; /*實心圓形符號*/
list-style-type:circle; /*空心圓形符號*/
list-style-type:square; /*實心方形符號*/
list-style-image:url(/dot.gif); /*圖片式符號*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進*/
四、CSS背景樣式：
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復排列-網頁默認*/
background-repeat : no-repeat; /*不重復排列*/
background-repeat : repeat-x; /*在x軸重復排列*/
background-repeat : repeat-y; /*在y軸重復排列*/
指定背景位置background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對齊*/
background-position : buttom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*居中對齊*/
五、CSS連接屬性：
a /*所有超鏈接*/a:link /*超鏈接文字格式*/
a:visited /*瀏覽過的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標轉到鏈接*/
鼠標光標樣式：
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號 cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}
六、CSS框線一覽表：
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規的方式 如下:
border-top-color : #369 /*設置上框線top顏色*/
border-top-width :1px /*設置上框線top寬度*/
border-top-style : solid/*設置上框線top樣式*/
其他框線樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表單運用：
文字方塊
按鈕
復選框
選擇鈕
多行文字方塊
下拉式菜單 選項1選項2
八、CSS邊界樣式：
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
CSS 屬性： 字體樣式(Font Style)
序號 中文說明 標記語法
1 字體樣式 {font:font-style font-variant font-weight font-size font-family}
2 字體類型 {font-family:"字體1","字體2","字體3",...}
3 字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字體風格 {font-style:inherit|italic|normal|oblique}
5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字體顏色 {color:數值;}
7 陰影顏色 {text-shadow:16位色值}
8 字體行高 {line-height:數值|inherit|normal;}
9 字 間 距 {letter-spacing:數值|inherit|normal}
10 單詞間距 {word-spacing:數值|inherit|normal}
11 字體變形 {font-variant:inherit|normal|small-cps }
12 英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字體變形 {font-size-adjust:inherit|none}
14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}】
文本樣式(Text Style)
序號 中文說明 標記語法
1 行 間 距 {line-height:數值|inherit|normal;}
2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:數值|inherit}
4 水平對齊 {text-align:left|right|center|justify}
5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 書寫方式 {writing-mode:lr-tb|tb-rl}
背景樣式序號
中文說明 標記語法
1 背景顏色 {background-color:數值}
2 背景圖片 {background-image: url(URL)|none}
3 背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:數值|top|bottom|left|right|center}
6 背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置}
框架樣式(Box Style)
序號 中文說明 標記語法
1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 補 白 {padding:padding-top padding-right padding-bottom padding-left}
3 邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width} 寬度值： thin|medium|thick|數值
4 邊框顏色 {border-color:數值 數值 數值 數值} 數值：分別代表top、right、bottom、left顏色值
5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 邊 框 {border:border-width border-style color}
上 邊 框 {border-top:border-top-width border-style color}
右 邊 框 {border-right:border-right-width border-style color}
下 邊 框 {border-bottom:border-bottom-width border-style color}
左 邊 框 {border-left:border-left-width border-style color}
7 寬 度 {width:長度|百分比| auto}
8 高 度 {height:數值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分類列表序號
中文說明 標記語法
1 控制顯示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 圖形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}
7 鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
----------------------------------------- End ------------------------------------------
歡迎來交流：個人qq 635850491
微信公眾號：laiwan16
全國電商設計師排名：762
http://alyssj.90sheji.com
/新浪微博認證賬號：故事設計師
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
