整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
疊樣式表（Cascading Style Sheet，簡稱：CSS）是為網(wǎng)頁添加樣式的代碼。本節(jié)將介紹 CSS 的基礎(chǔ)知識，并解答類似問題：怎樣將文本設(shè)置為黑色或紅色？怎樣將內(nèi)容顯示在屏幕的特定位置？怎樣用背景圖片或顏色來裝飾網(wǎng)頁？
和 HTML 類似，CSS 也不是真正的編程語言，甚至不是標(biāo)記語言。它是一門樣式表語言，這也就是說人們可以用它來選擇性地為 HTML 元素添加樣式。舉例來說，要選擇一個(gè) HTML 頁面里所有的段落元素，然后將其中的文本改成紅色，可以這樣寫 CSS：
p {
color: red;
}不妨試一下：首先新建一個(gè) styles 文件夾，在其中新建一個(gè) style.css 文件，將這三行 CSS 保存在這個(gè)新文件中。
然后再將該 CSS 文件連接至 HTML 文檔，否則 CSS 代碼不會(huì)對 HTML 文檔在瀏覽器里的顯示效果有任何影響。（如果你沒有完成前幾節(jié)的實(shí)踐，請復(fù)習(xí)處理文件 和 HTML 基礎(chǔ)。在筆記本里有這個(gè)方面的內(nèi)容！）
1、打開 index.html 文件，然后將下面一行粘貼到文檔頭（也就是 <head> 和 </head> 標(biāo)簽之間）。
<link href="styles/style.css" rel="stylesheet">2、保存 index.html 并用瀏覽器將其打開。應(yīng)該看到以下頁面：
如果段落文字變紅，那么祝賀你，你已經(jīng)成功地邁出了 CSS 學(xué)習(xí)的第一步。
讓我們來仔細(xì)看一看上述CSS：
整個(gè)結(jié)構(gòu)稱為 規(guī)則集（通常簡稱“規(guī)則”），各部分釋義如下：
注意其他重要的語法：
如果要同時(shí)修改多個(gè)屬性，只需要將它們用分號隔開，就像這樣：
p {
color: red;
width: 500px;
border: 1px solid black;
}也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號分開。例如：
p, li, h1 {
color: red;
}選擇器有許多不同的類型。上面只介紹了元素選擇器，用來選擇 HTML 文檔中給定的元素。但是選擇的操作可以更加具體。下面是一些常用的選擇器類型：
選擇器名稱 | 選擇的內(nèi)容 | 示例 |
元素選擇器（也稱作標(biāo)簽或類型選擇器） | 所有指定(該)類型的 HTML 元素 | p 選擇 <p> |
ID 選擇器 | 具有特定 ID 的元素（單一 HTML 頁面中，每個(gè) ID 只對應(yīng)一個(gè)元素，一個(gè)元素只對應(yīng)一個(gè) ID） | #my-id 選擇 <p id="my-id"> 或 <a id="my-id"> |
類選擇器 | 具有特定類的元素（單一頁面中，一個(gè)類可以有多個(gè)實(shí)例） | .my-class 選擇 <p class="my-class"> 和 <a class="my-class"> |
屬性選擇器 | 擁有特定屬性的元素 | img[src] 選擇 <img src="myimage.png"> 而不是 <img> |
偽（Pseudo）類選擇器 | 特定狀態(tài)下的特定元素（比如鼠標(biāo)指針懸停） | a:hover 僅在鼠標(biāo)指針懸停在鏈接上時(shí)選擇 <a>。 |
選擇器的種類遠(yuǎn)不止于此，更多信息請參閱 選擇器。
譯注：再一次說明，中文字體文件較大，不適合直接用于 Web Font。
在探索了一些 CSS 基礎(chǔ)后，我們來把更多規(guī)則和信息添加至 style.css 中，從而讓示例更美觀。首先，讓字體和文本變得更漂亮。
第一步:找到之前Google Font 輸出的地址。并以<link>元素的形式添加進(jìn)index.html文檔頭（<head>和</head>之間的任意位置）。代碼如下：
<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css"> 以上代碼為當(dāng)前網(wǎng)頁下載 Open Sans 字體，從而使自定義 CSS 中可以對 HTML 元素應(yīng)用這個(gè)字體。
第二步：接下來，刪除 style.css 文件中已有的規(guī)則。雖然測試是成功的了，但是紅字看起來并不太舒服。
第三步：將下列代碼添加到相應(yīng)的位置，用你在 Google Fonts 找到的字體替代 font-family 中的占位行。（ font-family 意味著你想要你的文本使用的字體。）這條規(guī)則首先為整個(gè)頁面設(shè)定了一個(gè)全局字體和字號（因?yàn)?<html> 是整個(gè)頁面的父元素，而且它所有的子元素都會(huì)繼承相同的 font-size 和 font-family）：
html {
/* px 表示 “像素（pixels）”: 基礎(chǔ)字號為 10 像素 */
font-size: 10px;
/* Google fonts 輸出的 CSS */
font-family: 'Open Sans', sans-serif;
}注：CSS 文檔中所有位于 /* 和 */ 之間的內(nèi)容都是 CSS 注釋，它會(huì)被瀏覽器在渲染代碼時(shí)忽略。你可以在這里寫下對你現(xiàn)在要做的事情有幫助的筆記。
譯注：/*``*/ 不可嵌套，/*這樣的注釋是/*不行*/的*/。CSS 不接受 // 注釋。
接下來為文檔體內(nèi)的元素（<h1> (en-US)、<li>和<p>）設(shè)置字號。將標(biāo)題居中顯示，并為正文設(shè)置行高和字間距，從而提高頁面的可讀性。
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
/* line-height 后而可以跟不同的參數(shù)，如果是數(shù)字，就是當(dāng)前字體大小乘上數(shù)字 */
line-height: 2;
letter-spacing: 1px;
}可以隨時(shí)調(diào)整這些 px 值來獲得滿意的結(jié)果，以下是大體效果：
編寫 CSS 時(shí)你會(huì)發(fā)現(xiàn)，你的工作好像是圍繞著一個(gè)一個(gè)盒子展開的——設(shè)置尺寸、顏色、位置，等等。頁面里大部分 HTML 元素都可以被看作若干層疊的盒子。
并不意外，CSS 布局主要就是基于盒模型的。每個(gè)占據(jù)頁面空間的塊都有這樣的屬性：
這里還使用了：
開始在頁面中添加更多 CSS 吧！大膽將這些新規(guī)則都添加到頁面的底部，而不要糾結(jié)改變屬性值會(huì)帶來什么結(jié)果。
html{
background-color:#00539f;
}這條規(guī)則將整個(gè)頁面的背景顏色設(shè)置為 所計(jì)劃的顏色。
body{
width:600px;
margin:0 auto;
background-color:#ff9500;
padding:0 20px 20px 20px；
border:5px solid black;
}現(xiàn)在是 <body> 元素。以上條聲明，我們來逐條查看：
h1{
margin: 0;
padding:20px 0;
color: #00539f;
text-shadow:3px 3px 1px black
}你可能發(fā)現(xiàn)頁面的頂部有一個(gè)難看的間隙，那是因?yàn)闉g覽器會(huì)在沒有任何 CSS 的情況下 給 <h1>en-US等元素設(shè)置一些默認(rèn)樣式。但這并不是個(gè)好主意，因?yàn)槲覀兿Ｍ粋€(gè)沒有任何樣式的網(wǎng)頁也有基本的可讀性。為了去掉那個(gè)間隙，我們通過設(shè)置margin: 0;來覆蓋默認(rèn)樣式。
至此，我們已經(jīng)把標(biāo)題的上下內(nèi)邊距設(shè)置為 20 像素，并且將標(biāo)題文本與 HTML 的背景顏色設(shè)為一致。
需要注意的是，這里使用了一個(gè) text-shadow 屬性，它可以為元素中的文本提供陰影。四個(gè)值含義如下：
不妨嘗試不同的值看看能得出什么結(jié)果。
img{
display:block；
margin:0 auto；
}最后，我們把圖像居中來使頁面更美觀。可以復(fù)用 body 的margin: 0 auto，但是需要一點(diǎn)點(diǎn)調(diào)整。<body>元素是塊級元素，意味著它占據(jù)了頁面的空間并且能夠賦予外邊距和其他改變間距的值。而圖片是內(nèi)聯(lián)元素，不具備塊級元素的一些功能。所以為了使圖像有外邊距，我們必須使用display: block 給予其塊級行為。
注：以上說明假定所選圖片小于頁面寬度（600 pixels）。更大的圖片會(huì)溢出 body 并占據(jù)頁面的其他位置。要解決這個(gè)問題，可以：
1）使用 圖片編輯器 來減小圖片寬度； 2）用 CSS 限制圖片大小，即減小 <img> 元素 width 屬性的值（比如 400 px）。
注：如果你暫時(shí)不能理解 display: block 和塊級元素與行內(nèi)元素的差別也沒關(guān)系；隨著你對 CSS 學(xué)習(xí)的深入，你將明白這個(gè)問題。
如果你按部就班完成本文的實(shí)踐，那么最終可以得到以下頁面
相關(guān)推薦：
前端新手看過來，手把手帶你輕松上手html的實(shí)操
節(jié)課將網(wǎng)頁的排版框架大致寫好。
這節(jié)課就來進(jìn)行更具體的修改和增加所有元素的細(xì)節(jié)，完成整個(gè)網(wǎng)頁的編寫。
按照上節(jié)課的方法，用調(diào)試工具分析代碼之后，可以下載好必須的圖片文件。
關(guān)于當(dāng)中專題的圖片，這里只下載了3個(gè)，更多的圖和文字留給大家自己去完成。
給table加上邊框線的目的是為了方便在開發(fā)編寫完成之前能夠隨時(shí)觀察排版的情況，方便進(jìn)行調(diào)整。
在排版樣式基本調(diào)整到位之后，就可以刪除table的邊框了。
來給下面2行的左右分別增加內(nèi)邊距為140px和120px。
修改css代碼如下：
刷新頁面：
可以看到，下面2行的左右留白出現(xiàn)了，同時(shí)第2行和第3行之間有間距，第3行的左右2個(gè)td之間也有間距。
雖然第3行的2個(gè)td的寬度比例不對，但是先不著急，下面按照次序一個(gè)一個(gè)元素來調(diào)整。
最上面一排左邊4個(gè)元素，右邊4個(gè)元素，當(dāng)中留白，因此一共9個(gè)td。
將左邊4個(gè)td和右邊4個(gè)td的寬度固定，剩余當(dāng)中的一個(gè)td不設(shè)置，那么瀏覽器窗口變化的時(shí)候，就不影響到左右的8個(gè)td的寬度。
僅僅影響到當(dāng)中留白的那個(gè)td。這是經(jīng)常使用的一種適應(yīng)不同瀏覽器在不同屏幕上不同寬度的一種方法。
修改css代碼，增加tda1到tda9的樣式。
刷新頁面：
可以看到，基本的按鈕位置已經(jīng)到位，可以不需要table的邊框了。
刪除掉table的邊框樣式，同時(shí)針對最上面一排的整個(gè)table的樣式table2增加一個(gè)下邊框的樣式，做出一條灰色的分割線出來。
修改css代碼如下：
刷新頁面：
接下來，逐步添加圖片或者按鈕。
第一步，添加第一個(gè)圖片，logo圖片。然后增加后面的2個(gè)icon圖標(biāo)，這里icon圖標(biāo)要用到一個(gè)新的技術(shù)，就是css3的content屬性。
并且通過自定義字體文件，來顯示圖標(biāo)類型的文字。具體內(nèi)容這里不深入講解，大家只要了解，通過引入自定義字體文件的方式就可以將字體文件里面的特殊符號圖標(biāo)形狀的文字顯示在網(wǎng)頁上。它看起來是一個(gè)圖標(biāo)，但其本質(zhì)是一個(gè)文字。這是這個(gè)文字做成圖標(biāo)樣子了。比如很多網(wǎng)頁中出現(xiàn)的各種箭頭圖標(biāo)，很多都是文字。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看到，前面3個(gè)圖標(biāo)都模仿編寫完成了。
接下來模仿搜索框部分。
搜索框可以用外面套一個(gè)div，div的背景色是灰色，然后邊角做成圓角的。
當(dāng)中放一個(gè)input標(biāo)簽可以用于輸入,input標(biāo)簽是一個(gè)新的標(biāo)簽，具體的作用就是讓用戶可以輸入文本的。
后面的課程中會(huì)詳細(xì)講解的，這里不深入講解。
然后右邊放一個(gè)類似前面的圖標(biāo)用i標(biāo)簽并設(shè)置content自定義文字編碼來實(shí)現(xiàn)。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
接下來，修改右側(cè)的4個(gè)圖標(biāo)和按鈕。
第1個(gè)很簡單，也是一個(gè)文字圖標(biāo)，和前面的下載圖標(biāo)一樣。
第2個(gè)是一個(gè)文字a鏈接，樣式為灰色文字。
第3個(gè)也是一個(gè)文字a鏈接，注意邊框?yàn)閳A角邊框，顏色為紅色。
第4個(gè)也是一個(gè)文字a鏈接，底色為紅色，邊框?yàn)閳A角，里面包含一個(gè)i標(biāo)簽和文字，其中i標(biāo)簽也是一個(gè)羽毛筆的圖標(biāo)文字。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看到，通過分析原始網(wǎng)頁的相關(guān)CSS樣式的值，然后模仿寫到自己的css文件里面，就能很方便的將網(wǎng)頁元素模仿編寫出同樣類似的效果。當(dāng)然，模仿后和原來的不是百分之百一樣的，這很難做到，因?yàn)楫吘姑總€(gè)網(wǎng)頁的排版布局是不一樣的實(shí)現(xiàn)方式。只要掌握了這個(gè)方法，通過學(xué)習(xí)不同的網(wǎng)頁的實(shí)現(xiàn)方式，很快就能掌握如何編寫出自己的網(wǎng)站效果了。
接下來的實(shí)現(xiàn)過程，學(xué)哥就不再逐個(gè)元素的講解了，直接將修改好的代碼呈現(xiàn)給大家。
大家也可以先不要往下看學(xué)哥的實(shí)現(xiàn)結(jié)果，可以自己先嘗試將網(wǎng)頁剩余的元素全部編寫出來。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看到關(guān)于專題這部分已經(jīng)都做好了。由于專題太多了，而且都是重復(fù)的樣式，這里就不做出所有的專題了，做出3個(gè)作為代表性的例子就足夠了。
現(xiàn)在可以調(diào)整下面一行的左右td的寬度了，將右側(cè)的td的寬度固定為218px，左側(cè)的td不固定寬度。
修改css代碼如下：
刷新頁面：
可以看到右側(cè)td的寬度變大了，左側(cè)的td的寬度變小了。
如果瀏覽器窗口拉大或者縮小會(huì)發(fā)生什么情況呢？
如果瀏覽器窗口放大的話，左側(cè)td的寬度也會(huì)自動(dòng)變大，是由于將table的寬度設(shè)置為100%了。
一個(gè)table設(shè)置為100%，也就是根據(jù)瀏覽器寬度變化而變化，同時(shí)一個(gè)tr里面的td如果設(shè)置了絕對寬度則寬度就不跟隨瀏覽器變化而變化，如果td沒有設(shè)置寬度，則這些td會(huì)根據(jù)內(nèi)容的比例進(jìn)行分配寬度。
假如一行里面只有一個(gè)td沒有設(shè)置寬度，則剩余的寬度都會(huì)分配給這個(gè)td，那么瀏覽器寬度變化的話就只有這個(gè)td會(huì)改變寬度。
將瀏覽器窗口拉大一些，效果如下：
可以看到，右側(cè)的td的寬度不變，而左側(cè)的td的寬度變大了。
同時(shí)可以看到最上面一排按鈕，只有當(dāng)中留白的那個(gè)td也變大了。其它按鈕的td并沒有變化。
這個(gè)設(shè)置table寬度自適應(yīng)瀏覽器寬度的方法，是一個(gè)比較好的控制瀏覽器寬度變化的方法。大家在編寫網(wǎng)頁時(shí)候要考慮到瀏覽器寬度的因素。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看見第3行的左邊部分，關(guān)于文章的內(nèi)容全部做好了。
主要是css代碼部分增加比較多。
首先將第3行的左右2個(gè)td的垂直方向都靠上對齊：
修改css代碼如下：
然后，修改右側(cè)的大圖標(biāo)和作者排行內(nèi)容。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看到，所有的頁面代表性元素全部樣式都做成了。
到這里，完成了模仿一個(gè)真實(shí)的網(wǎng)頁的全部工作，按照這種模式，可以模仿出各種各樣的網(wǎng)頁編碼。
接下來，要將代碼部署到本地服務(wù)器上。
然后通過安裝不同的瀏覽器軟件，例如IE瀏覽器，Chrome瀏覽器，Safari瀏覽器，F(xiàn)irefox瀏覽器進(jìn)行不同瀏覽器的兼容性測試。
保證在不同的瀏覽器上看到的網(wǎng)頁效果大致都一樣，不要出現(xiàn)明顯的不協(xié)調(diào)或不美觀之處。
然后還要在不同的設(shè)備和操作系統(tǒng)上針對不同的瀏覽器做更大范圍的兼容性測試，這樣才能盡最大可能讓我們編寫的網(wǎng)頁程序能夠適應(yīng)更多的計(jì)算機(jī)環(huán)境，呈現(xiàn)最好的效果。
前面通過15小節(jié)的內(nèi)容，講解了如何編寫靜態(tài)內(nèi)容網(wǎng)站，如何部署到本地服務(wù)器，如何運(yùn)用瀏覽器調(diào)試工具來學(xué)習(xí)和模仿編寫網(wǎng)站，如何將網(wǎng)站程序部署到云服務(wù)器，如何購買一個(gè)域名并解析到云服務(wù)器，完整的通過2個(gè)實(shí)例演示了整個(gè)網(wǎng)站實(shí)現(xiàn)的過程。
下面來回顧一下每節(jié)課的內(nèi)容，并說明重點(diǎn)以及自學(xué)是需要注意的地方。
第2.1節(jié)，主要是講解關(guān)于網(wǎng)站的技術(shù)原理和要做的大概內(nèi)容。
第2.2節(jié)，主要講一個(gè)最最簡單的網(wǎng)頁代碼是什么樣子的，讓大家有一個(gè)最直觀的感受，從最簡單的開始，html標(biāo)簽，head標(biāo)簽，title標(biāo)簽，body標(biāo)簽，和使用文本編輯器。
第2.3節(jié)，從一個(gè)網(wǎng)站的設(shè)計(jì)開始，然后講解了br標(biāo)簽，b標(biāo)簽，設(shè)置網(wǎng)頁網(wǎng)頁的背景色，關(guān)于CSS樣式定義以及顏色定義。
第2.4節(jié)，開始學(xué)習(xí)最重要的一個(gè)div標(biāo)簽，包括設(shè)置背景色，文字顏色，文字大小，尺寸單位，文字字體，文字斜體和加粗。
第2.5節(jié)，學(xué)習(xí)基本的CSS樣式之后，學(xué)習(xí)將CSS樣式和網(wǎng)頁內(nèi)容進(jìn)行分離，更方便開發(fā)。
第2.6節(jié)，網(wǎng)頁顯示中很重要的寬度，高度，內(nèi)邊距，外邊距，邊框，可以將網(wǎng)頁元素修飾的更美觀大氣。
第2.7節(jié)，在學(xué)會(huì)使用div進(jìn)行頁面排版布局之后，再學(xué)習(xí)使用table表格來對網(wǎng)頁進(jìn)行排版，掌握td的用法，包括設(shè)置內(nèi)邊距和字體，以及邊框。
第2.8節(jié)，學(xué)習(xí)對table表格進(jìn)行td合并以及設(shè)置排版樣式，說明特定元素通過id設(shè)置樣式，以及說明元素標(biāo)簽嵌套關(guān)系和順序關(guān)系。
第2.9節(jié)，學(xué)習(xí)設(shè)置背景圖片，以及img標(biāo)簽顯示圖片的方法，以及一些HTML和CSS代碼注釋以及縮進(jìn)的格式。
第2.10節(jié)，學(xué)習(xí)如何讓網(wǎng)頁進(jìn)行遷移，包括文字鏈接和圖片鏈接，以及類似按鈕的鏈接。
第2.11節(jié)，網(wǎng)頁基本編寫完成之后，將網(wǎng)頁部署到本地一個(gè)Web服務(wù)器，通過局域網(wǎng)可以訪問。
第2.12節(jié)，將網(wǎng)站部署到云服務(wù)器上，這樣可以通過互聯(lián)網(wǎng)訪問網(wǎng)站頁面。
第2.13節(jié)，創(chuàng)建好域名之后，將域名解析到云服務(wù)器，這樣通過互聯(lián)網(wǎng)可以訪問域名就能看到網(wǎng)站頁面了。
第2.14節(jié)，學(xué)習(xí)分析一個(gè)已經(jīng)存在的網(wǎng)站，并進(jìn)行設(shè)計(jì)規(guī)劃，進(jìn)行模仿編寫網(wǎng)頁。
第2.15節(jié)，一邊分析網(wǎng)頁，一邊開始模仿編寫網(wǎng)頁，一個(gè)元素一個(gè)元素的編寫，最終完整模仿整個(gè)網(wǎng)頁。
通過整個(gè)15節(jié)課程，一步一步實(shí)現(xiàn)2個(gè)代表性網(wǎng)站頁面，掌握如果使用HTML加CSS代碼來編寫實(shí)現(xiàn)靜態(tài)內(nèi)容網(wǎng)站。
為將來實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容網(wǎng)站打下一個(gè)堅(jiān)實(shí)的基礎(chǔ)。
第2章的內(nèi)容是很多互聯(lián)網(wǎng)編程技術(shù)的基礎(chǔ)。同樣的，第3章的內(nèi)容也是互聯(lián)網(wǎng)編程技術(shù)的基礎(chǔ)。
第3章開始講解JavaScript編程技術(shù)，學(xué)習(xí)掌握如何通過代碼實(shí)現(xiàn)改變網(wǎng)頁顯示元素的技術(shù)。
第3章以實(shí)現(xiàn)一個(gè)連連看網(wǎng)頁游戲作為主線，穿插講解關(guān)于JavaScript技術(shù)的方方面面，讓大家在第3章結(jié)束之后，掌握好使用JavaScript技術(shù)進(jìn)行交互式網(wǎng)頁開發(fā)的技能。
由于學(xué)哥的教程是系列教程，前后關(guān)聯(lián)極強(qiáng)，請大家查看歷史消息。
見HTML ! 用純Python就能寫一個(gè)漂亮的網(wǎng)頁
我們在寫一個(gè)網(wǎng)站或者一個(gè)網(wǎng)頁界面的時(shí)候，需要學(xué)習(xí)很多東西，對小白來說很困難！比如我要做一個(gè)簡單的網(wǎng)頁交互：
天啊，聽聽頭都大呢！其實(shí)我就給老板做一個(gè)簡單的交互的頁面，而且我只會(huì)Python ,有沒有很簡單的辦法可以做到呢。
今天小編在Github上逛的時(shí)候，找到一個(gè)非常酷的神器，名字叫remi ,目前收獲了2300個(gè)贊。
再見HTML ! 用純Python就能寫一個(gè)漂亮的網(wǎng)頁
star并不是很多，但是這個(gè)庫可是選入2018年的十大明星庫，號稱是一個(gè)獨(dú)立的GUI庫，而且最牛逼的就是這個(gè)庫竟然小于 100K，是否很神奇呢，我們一起來體驗(yàn)看一下特性：
安裝
如何安裝呢，因?yàn)槭荘ython 庫，直接用pip 即可
如果是沒有網(wǎng)絡(luò)的，或者服務(wù)器跟外網(wǎng)不通的，可以離線安裝。下載這個(gè)包，然后用install 安裝
快速體驗(yàn)
我們來快速看一下，這個(gè)簡單的Hello world網(wǎng)頁。
再見HTML ! 用純Python就能寫一個(gè)漂亮的網(wǎng)頁
這里面包含了一個(gè) 2個(gè)元素：
點(diǎn)擊這個(gè)按鈕還會(huì)改變Hello world的文本內(nèi)容，看點(diǎn)一下就變成了Button pressed.
再見HTML ! 用純Python就能寫一個(gè)漂亮的網(wǎng)頁
上面這個(gè)簡單的效果，其實(shí)只用了20來行Python代碼，都是原生的Python代碼，沒有用一行HTML .
我們來看一下源碼：
再見HTML ! 用純Python就能寫一個(gè)漂亮的網(wǎng)頁
整個(gè)的代碼的結(jié)構(gòu)層次還很清晰的：
再見HTML ! 用純Python就能寫一個(gè)漂亮的網(wǎng)頁
更多復(fù)雜的網(wǎng)頁元素
看完上面的設(shè)計(jì)是不是就覺得跟Python里面大名鼎鼎的tk庫很相似啊，上面的只是開胃菜，這個(gè)remi還能提供更復(fù)雜的gui界面元素。
再見HTML ! 用純Python就能寫一個(gè)漂亮的網(wǎng)頁
上面的是一個(gè)完整的demo頁面,基本上常見的控件元素的都包含了，比如有菜單欄，文本，按鈕，單選框，進(jìn)度欄，下拉框，表格，彈出框，按鈕選取文件路徑，文件樹形結(jié)構(gòu)，日期等幾十種控件。
需要更多2020最新Python資料 私信小編“學(xué)習(xí)”即可獲取。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
