前端工程師必知:CSS標籤的應用(上)-Div篇

、或等標籤做規劃。

如以上的例子中，第一個區塊()中就包含了標籤；第二個區塊()中就包含了兩個標籤、第三個區塊()中就包含了標籤 3.SPAN包起來元素，有別於DIV區塊，被瀏覽器視為一行。

如以上的例子中，第二個區塊()中就包含了兩個標籤，但都在同一行內 推薦閱讀: HTML5教學也能實現3D的立體形式?不用怕HTML5教學太難~我們從簡單的學起文字在HTML5教學裡的奧秘都在這了!鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了透過對的Java課程,讓你從茫然的畢業生中脫穎而出!擠進高薪科技大門-Java課程等你來瞭解!中國IT教育領導品牌　達內教育集團第一家海外授權中心 工程師 前端 前端工程師 程式 語法 CSS 取得連結 Facebook Twitter Pinterest 以電子郵件傳送 其他應用程式 熱門文章 使用Python的''海龜''Turtle繪圖模塊畫皮卡丘!! Python也可以用來畫出皮卡丘,真是太可愛了!!前陣子上映的名偵探皮卡丘劇照大家都想到前陣子上映的動畫電影「名偵探皮卡丘」票房成績不俗，賣座程度僅次於「復仇者聯盟-終局之戰」。

雖然電影中的那隻皮卡丘是以「賤萌」的形式呈現，但也激起許多工程師小時候時看「神奇寶貝」中，那隻呆萌的皮卡丘的回憶。

在大陸就有熱血的Python工程師使用Python的「海龜」Turtle繪圖模塊，畫起皮卡丘來，而且還畫得唯妙唯肖的！先看看以下的效果吧:大陸網友文摘菌用Python來畫皮卡丘，畫得唯妙唯肖(圖片來源：https://mp.weixin.qq.com)步驟：先選好畫板大小、設置好畫筆顏色、粗細，再定位好位置後，開始畫鼻子、頭、耳朵、眼睛、嘴、身體、手腳、尾巴。

Python的Turtlegraphics模塊，中文直譯為「海龜繪圖」，是提供給兒童學習程式語言用的模組。

想像螢幕上有一隻帶著畫筆的海龜在X,Y軸平面座標上，從座標(0,0)出發。

你給牠下指令「turtle.forward(15)」，牠就會往前走15像素的距離，接者你下指令「turtle.right(25)」，牠就會朝向順時針25度的方向轉彎。

不斷對著海龜重複著這類型的指令，海龜就能完成一幅圖畫。

透過定位下指令移動畫筆位置的海龜繪圖(Turtlegraphics)模塊上圖用Python繪製的皮卡丘，就是靠著不斷的指定座標，定位與方向而完成的。

以下提供這個範例的部分Python程式碼以供參考：importturtleastdefinfoPrt():print('coordinate:'+str(t.pos()))print('angle:'+str(t.heading()))t.pensize(3)t.hideturtle()t.colormode(255)t.color("black")t.setup(700,650)t.speed(10)t.st()#t.dot()t.pu()#t.goto(-150,100)t.goto(-210,86)t.pd()infoPrt() Python需要學會的:用String加入變數及內容! Python可以教你怎麼用String加入變數及想要的內容~想學趕快!本節Python練習中我們將使用複雜的字串String來建立一系列的變數，以更熟悉字串的用處。

首先，我們還是要了解一下字串這個概念。

字串通常包含你想要展示出來的內容、或是你想要從程式裡導出""的一小段字符。

Python可以購過文本裡的雙引號或者單引號，識別出何為字串。

如果你把單引號或者雙引號括起來的文字放到print後面，它們就會被Python列印出來。

字串可以包含格式化字符%s（即以str()函數輸出文字）。

你只要將格式化的變數放到字串中，再緊接跟著一個百分號%(percent)，再緊接跟著變數名即可。

這裡唯一要注意的地方是如果你想要在字串中通過格式化字符放入多個變數的時候，你需要把變數放到()圓括號(parenthesis)中，而且變數之間需要用,逗號(comma)隔開。

就像你逛商店說『我要買牛奶、麵包、雞蛋、八寶粥』一樣，只不過程式設計師說的是「(milk,eggs,bread,soup)」。

在以下的練習中，讓我們看看,我們將用簡化的變數名稱，輸入大量的字串、變數、和格式化字符，並且執行出來:x="Thereare%dtypesofpeople."%10binary="binary"do_not="don't"y="Thosewhoknow%sandthosewho%s."%(binary,do_not)printxprintyprint"Isaid:%r."%xprint"Ialsosaid:'%s'."%yhilarious=Falsejoke_evaluation="Isn'tthatjokesofunny?!%r"printjoke_evaluation%hilariousw="Thisistheleftsideof...&quo