較少的-html教學-PHP中文網

首頁

web前端

html教學

較少的

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 29, 2016 am 09:19 AM

less

<span style="color: #008080;"> 1</span> <span style="color: #000000;">使用 @ 定义变量
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">    变量可以做运算
</span><span style="color: #008080;"> 3</span>     
<span style="color: #008080;"> 4</span> <span style="color: #000000;">    @color : #000;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    @width : 1000px;
</span><span style="color: #008080;"> 6</span>     
<span style="color: #008080;"> 7</span> <span style="color: #000000;">使用 & 表示当前类
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">    .box{
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">        &:hover{
</span><span style="color: #008080;">10</span> <span style="color: #000000;">            color : #000;
</span><span style="color: #008080;">11</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">12</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">13</span> 
<span style="color: #008080;">14</span> <span style="color: #000000;">css 可以嵌套
</span><span style="color: #008080;">15</span> 
<span style="color: #008080;">16</span> <span style="color: #000000;">    ul{
</span><span style="color: #008080;">17</span> <span style="color: #000000;">        display : block;
</span><span style="color: #008080;">18</span> <span style="color: #000000;">        li{
</span><span style="color: #008080;">19</span> <span style="color: #000000;">            float : left;
</span><span style="color: #008080;">20</span> <span style="color: #000000;">            a{
</span><span style="color: #008080;">21</span> <span style="color: #000000;">                font-size : 18px;
</span><span style="color: #008080;">22</span> <span style="color: #000000;">            }
</span><span style="color: #008080;">23</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">24</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">25</span> 
<span style="color: #008080;">26</span> <span style="color: #000000;">继承 ： 直接在需要的地方引用 class或者 id 类
</span><span style="color: #008080;">27</span> 
<span style="color: #008080;">28</span> <span style="color: #000000;">.clearfix{
</span><span style="color: #008080;">29</span> <span style="color: #000000;">    zoom : 1;
</span><span style="color: #008080;">30</span> <span style="color: #000000;">    display : block;
</span><span style="color: #008080;">31</span> <span style="color: #000000;">    &:after{
</span><span style="color: #008080;">32</span> <span style="color: #000000;">        content: "";
</span><span style="color: #008080;">33</span> <span style="color: #000000;">        visibility: hidden;
</span><span style="color: #008080;">34</span> <span style="color: #000000;">        clear: both;
</span><span style="color: #008080;">35</span> <span style="color: #000000;">        height: 0;
</span><span style="color: #008080;">36</span> <span style="color: #000000;">        display: block;
</span><span style="color: #008080;">37</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">38</span> <span style="color: #000000;">}
</span><span style="color: #008080;">39</span> 
<span style="color: #008080;">40</span> <span style="color: #000000;">.radius(@radius : 15px){
</span><span style="color: #008080;">41</span> <span style="color: #000000;">    border-radius: @radius;
</span><span style="color: #008080;">42</span> <span style="color: #000000;">}
</span><span style="color: #008080;">43</span> 
<span style="color: #008080;">44</span> <span style="color: #000000;">.box{
</span><span style="color: #008080;">45</span> <span style="color: #000000;">    .clearfix;
</span><span style="color: #008080;">46</span> <span style="color: #000000;">    .radius(10px);
</span><span style="color: #008080;">47</span> <span style="color: #000000;">}
</span><span style="color: #008080;">48</span> 
<span style="color: #008080;">49</span> <span style="color: #000000;">混合 ： 类似 js 中的函数, [或者叫继承]
</span><span style="color: #008080;">50</span> <span style="color: #000000;">.layout(){
</span><span style="color: #008080;">51</span> <span style="color: #000000;">    ...
</span><span style="color: #008080;">52</span> <span style="color: #000000;">}
</span><span style="color: #008080;">53</span> 
<span style="color: #008080;">54</span> 
<span style="color: #008080;">55</span> <span style="color: #000000;">作用域 ： 限制继承的条件，可以继承一个 类的部分内容
</span><span style="color: #008080;">56</span> 
<span style="color: #008080;">57</span> <span style="color: #000000;">延伸 ： &:extend(.box); 括号中可以填写多个 类名  编译后的效果就是 css 中的分组
</span><span style="color: #008080;">58</span> 
<span style="color: #008080;">59</span> 
<span style="color: #008080;">60</span> <span style="color: #000000;">when 用来做条件判断
</span><span style="color: #008080;">61</span> 
<span style="color: #008080;">62</span> <span style="color: #000000;">when not 不等于
</span><span style="color: #008080;">63</span> 
<span style="color: #008080;">64</span> <span style="color: #000000;">/*
</span><span style="color: #008080;">65</span> <span style="color: #000000;">    使用 isnumber 来判断某个参数是否为 数字
</span><span style="color: #008080;">66</span> <span style="color: #000000;"> * */
</span><span style="color: #008080;">67</span> 
<span style="color: #008080;">68</span> <span style="color: #000000;">.border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){
</span><span style="color: #008080;">69</span> <span style="color: #000000;">    border: @width @style @color;
</span><span style="color: #008080;">70</span> <span style="color: #000000;">}
</span><span style="color: #008080;">71</span> 
<span style="color: #008080;">72</span> <span style="color: #000000;">/*
</span><span style="color: #008080;">73</span> <span style="color: #000000;">    使用 iscolor 来判断某个参数是否为 颜色
</span><span style="color: #008080;">74</span> <span style="color: #000000;"> * */
</span><span style="color: #008080;">75</span> 
<span style="color: #008080;">76</span> <span style="color: #000000;">.border(@color) when (iscolor(@color)){
</span><span style="color: #008080;">77</span>     
<span style="color: #008080;">78</span> <span style="color: #000000;">    .border(1px , solid , @color);
</span><span style="color: #008080;">79</span> <span style="color: #000000;">}
</span><span style="color: #008080;">80</span> 
<span style="color: #008080;">81</span> 
<span style="color: #008080;">82</span> <span style="color: #000000;">.border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){
</span><span style="color: #008080;">83</span> <span style="color: #000000;">    .border(1px , @solid);
</span><span style="color: #008080;">84</span> }

登入後複製

使用@ 定義變數變數可以做運算@color : #000;@width : 1000px;使用& 表示目前類別.box{&:hover{color : #000;}}
css 可以嵌套
ul{display : block ;li{float : left;a{font-size : 18px;}}}
繼承：直接在需要的地方引用class或id 類別
.clearfix{zoom : 1;display : block;&:after{content: " "; visibility: hidden; clear: both; height: 0; display: blockorder}} ．.radius. radius(10px) ;}
混合：類似js 中的函數, [或叫繼承].layout(){...}

作用域：限制繼承的條件，可以繼承一個類別的部分內容
延伸： &:extend(. box); 括號中可以填入多個類別名稱編譯後的效果是css 中的分組

when 用來做條件判斷
when not 不等於
/* 使用isnumber 來判斷某個參數是否為數字 */
/* 使用isnumber 判斷某個參數是否為數字.border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){ border: @width @style @color;}
/* 使用iscolor 來判斷某個參數是否為顏色 * */
.border(@color) when (iscolor(@color)){ .border(1px , solid , @color);}

.border(@solid) when not ( iscolor(@solid))
.border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){ .border(1px , @solid);}

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1269

C# 教程

1248

Related knowledge

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML的角色：構建Web內容 Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles

較少的

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題