3-STM32物聯網開發WIFI(ESP8266)+GPRS(Air202)系統方案微信小程序篇(學習網頁_2)

http://www.javashuo.com/article/p-zleanfce-mo.htmlcss

 

上一節給你們說了哈,安裝這個軟件,自行安裝...html

 

這節咱用這個軟件接着學習網頁開發瀏覽器

 工程路徑本身設置less

 

 

 

 

 

 

 

 

 

 

 

 先運行一下再說函數

 新建的工程要比咱上一節的東西多佈局

<head>  通常放實現功能性程序   </head>學習

 

<body>  通常放頁面佈局部分   </body>  就是放咱頁面中看到的東西spa

 

 其它細節請自行學習3d

https://www.runoob.com/tags/att-meta-charset.htmlcode

 

 

 會不會出現懵逼的現象???

其實同樣寫

<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔-->
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
</head>
<body>
    <h1>文華</h1>
</body>
</html>

 

 

<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔-->
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>這是網頁顯示的標題</title>

    <script>
        function click1() { //函數
            alert("顯示的內容");//彈出一個框
        }
    </script>

</head>
<body>
    <h1 onclick="click1()">文華</h1>
</body>
</html>

只不過多了些規定,有些東西寫到哪一個裏面而已

之前改變控件的屬性都是在html裏面直接修改,如今咱新建一個.css文件,把屬性放在這個裏面,而後html裏面調用使用

 名字隨意哈

 

 

 新建完之後什麼都沒有

 

 先看第一種方式,加個ID

 

 而後在佈局文件裏面,設置ID爲id1的控件的顏色爲紅色

 

 

 可是如今運行是不能夠的,須要在html裏面引用才能夠,

 

 

 

<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔-->
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="lesson2.css"/>

    <title>這是網頁顯示的標題</title>
    
    <script>
        function click1() { //函數
            alert("顯示的內容");//彈出一個框
        }
    </script>

</head>
<body>
    <h1 onclick="click1()" id="id1">文華</h1>
</body>
</html>

 

 <link rel="stylesheet" type="text/css" href="lesson2.css"/>

https://www.runoob.com/tags/att-link-rel.html

告訴瀏覽器我要導入一個 佈局樣式的文件 文件是一個css類型的文本文件 後面是文件的名字

 

運行一下

而後說一下路徑問題

 

由於咱的html文件和.css文件在一個文件夾裏面因此,能夠直接

 

 若是不在一個文件夾可使用  ./XXXX  當前目錄下的XXXXX    或者 ../XXXX  當前目錄的上一級目錄的XXXXX    這個應該都懂吧....

 

另外一種方式:

若是好多個控件初始化的顏色都是紅色難道要全部的都寫一遍????

提供了另外一種方式

咱再添加個標籤

<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔-->
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--告訴瀏覽器我要導入一個 佈局樣式的文件  文件是一個css類型的文本文件  後面是文件的名字-->
    <link rel="stylesheet" type="text/css" href="lesson2.css"/>

    <title>這是網頁顯示的標題</title>

    <script>
        function click1() { //函數
            alert("顯示的內容");//彈出一個框
        }
    </script>

</head>
<body>
    <h1 onclick="click1()" id="id1">文華</h1>
    <h1 id="id2">楊</h1>
</body>
</html>
#id1{
    color: red;
}

#id2{
    color: red;
}

控件少還好要是多了就很差了

如今呢,用Class

<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔-->
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--告訴瀏覽器我要導入一個 佈局樣式的文件  文件是一個css類型的文本文件  後面是文件的名字-->
    <link rel="stylesheet" type="text/css" href="lesson2.css"/>

    <title>這是網頁顯示的標題</title>

    <script>
        function click1() { //函數
            alert("顯示的內容");//彈出一個框
        }
    </script>

</head>
<body>
    <h1 onclick="click1()" id="id1"  class="TestClass">文華</h1>
    <h1 id="id2" class="TestClass" >楊</h1>
</body>
</html>
<h1 onclick="click1()" id="id1"  class="TestClass">文華</h1>
<h1 id="id2" class="TestClass" >楊</h1>

這兩個文本都引用了同一個class
TestClass
而後在css 裏面

 

 
.TestClass{
    color: red;
}
 

 

運行一下,剛想起來,不會有人不會運行吧

 

 

相關文章
相關標籤/搜索