Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 欧美在线网站,日韩精品在线视频观看,国内精品久久久久影院6 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢(xún)熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          前端開(kāi)發(fā)CSS學(xué)習(xí)的3種方法，如何快速的入門(mén)CSS？
          
        
           
          
	
	
          
		
                        
          HP是世界上最好的語(yǔ)言，這是一個(gè)老梗。
          有不少學(xué)習(xí)PHP的程序員后來(lái)去做了前端開(kāi)發(fā)，畢竟近些年前端開(kāi)發(fā)還是蠻吃香的。
          學(xué)習(xí)PHP不僅僅要學(xué)習(xí)html，而且還要學(xué)習(xí)CSS。
          CSS是萬(wàn)維網(wǎng)聯(lián)盟在 HTML 4.0 之外提出，目的是為了讓CSS完成樣式與內(nèi)容的分離。
          那么，CSS如何入門(mén)呢?w3cschool在這里分享幾個(gè)方法：
          0、研究w3cschool CSS教程
          w3cschool官方本身就有CSS教程，我們看教程的目的主要還是要了解CSS到底是干什么用的。
          其實(shí)，用一句簡(jiǎn)單的話(huà)來(lái)說(shuō)，改變我們看的網(wǎng)頁(yè)的樣子.。
          1、CSS微課游戲化編程體驗(yàn)
          w3cschool新開(kāi)發(fā)了CSS微課，這可能是很多程序員小伙伴所需要的。
          CSS直接抓住了CSS教程中比較核心的一些概念和語(yǔ)法，并且有實(shí)戰(zhàn)的訓(xùn)練習(xí)題。
          其內(nèi)容包括了CSS基礎(chǔ)、CSS文本樣式、CSS屬性、CSS定位和布局，讓你系統(tǒng)、立體地全面認(rèn)識(shí)CSS。
          CSS微課實(shí)現(xiàn)了游戲化的編程體驗(yàn)，關(guān)卡是循序漸進(jìn)的，這迫使你不能跳躍而忽略一些重要的編程知識(shí)。
          其中，習(xí)題類(lèi)型包含了判斷題、選擇題、實(shí)戰(zhàn)訓(xùn)練題。
          理論離不開(kāi)實(shí)戰(zhàn)，CSS微課做到了例子多，概括技術(shù)全面。
          當(dāng)你可以通關(guān)的時(shí)候，你已經(jīng)對(duì)CSS算是有一個(gè)比較深刻的認(rèn)識(shí)，也掌握了一定的CSS編程技能。
          2、CSS看什么書(shū)呢?
          學(xué)編程一定要讓編程本身變得有趣，所以大可以先玩編程。
          用CSS微課學(xué)習(xí)是一種有趣化的方法。
          另外，閱讀《css禪意花園》，就當(dāng)成一本故事書(shū)看，隨便翻翻你會(huì)發(fā)現(xiàn)css確實(shí)很好玩的。

          eb開(kāi)發(fā)是一個(gè)很依賴(lài)經(jīng)驗(yàn)的領(lǐng)域，然而這對(duì)初學(xué)者很不友好。
          知識(shí)一旦脫離了應(yīng)用場(chǎng)景就會(huì)變得晦澀、空洞，且知識(shí)本身也滿(mǎn)足“二八定律”，“抓大放小”是提高學(xué)習(xí)效率的關(guān)鍵。
          下文向大家介紹了HTML和CSS之間的關(guān)系。內(nèi)容選自《HTML 5與CSS 3核心技法（全彩）》一書(shū)。本書(shū)主線清晰，講解簡(jiǎn)潔，并提供在線效果演示效果，非常適合小白上手！

          1 HTML是骨架
          很難想象一個(gè)人在桌前對(duì)著一塊砧板坐一夜，隔一會(huì)兒就噼里啪啦敲幾下，一會(huì)兒哭一會(huì)兒笑，是一種什么景象。事實(shí)上，在貓眼中我們就是這樣的。只不過(guò)我們面對(duì)的是一塊會(huì)發(fā)光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網(wǎng)”到底是在做什么？
          獲取信息。
          重點(diǎn)在“信息”，一種看不見(jiàn)摸不著卻真實(shí)存在的東西。無(wú)論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會(huì)影響它傳遞了完整的信息，以及這條信息的內(nèi)在邏輯是正確的，不是嗎？HTML就是用來(lái)盛放最核心的內(nèi)容——信息。
          所以，在CSS和JavaScript出現(xiàn)之前，HTML就出現(xiàn)了。這是必然的，因?yàn)槿绻B最核心的信息都無(wú)法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無(wú)意義的。
          除滿(mǎn)足承載核心信息的需求外，HTML還解決了一個(gè)重要的問(wèn)題——將信息結(jié)構(gòu)化。
          試想有這樣一篇文章：
          背影
          我說(shuō)道：“爸爸，你走吧。”他望車(chē)外看了看，說(shuō)：“我買(mǎi)幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
          評(píng)論
          王花花 大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧
          李拴蛋 我們都不愿意承認(rèn)他老了
          劉備備 想吃橘子...
          此時(shí)上面的信息基本沒(méi)有結(jié)構(gòu)，只能通過(guò)斷行或縮進(jìn)盡可能讓內(nèi)容更易讀，編輯時(shí)的狀態(tài)就是其最終的顯示效果。
          HTML就派上了用場(chǎng)，見(jiàn)下方的代碼：
          代碼
          <artcle>
           <h1>背影</h1>
           <p>
          我說(shuō)道：“爸爸，你走吧。”他望車(chē)外看了看，說(shuō)：“我買(mǎi)幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
           </p>
          </artcle>
          <section id="comment-list">
           <div class="title">評(píng)論</div>
           <div class="comment">
           <strong class="username">王花花</strong>
           <span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>
           </div>
           <divclass="comment">
           <strong class="username">李拴蛋</strong>
           <span class="content">我們都不愿意承認(rèn)他老了</span>
           </div>
           <div class="comment">
           <strong class="username">劉備備</strong>
           <span class="content">想吃橘子...</span>
           </div>
          </section>
          一頭霧水沒(méi)關(guān)系，后面我們會(huì)細(xì)說(shuō)每一個(gè)部分。總之這段內(nèi)容給人感覺(jué)反而更繁瑣。但繁瑣是代價(jià)，重要的是現(xiàn)在這段信息有結(jié)構(gòu)了。這就意味著計(jì)算機(jī)可以通過(guò)結(jié)構(gòu)的規(guī)律將其顯示得更便于閱讀（甚至是交互）。
          以下是不加任何裝飾性?xún)?nèi)容直接讓瀏覽器呈現(xiàn)的結(jié)果：
          效果

          這是純HTML在沒(méi)有引入任何裝飾時(shí)的顯示效果。很明顯，即便是這樣也比純文字狀態(tài)易讀了許多。但注意，HTML本身沒(méi)有樣式，字體大小和粗細(xì)有變化的原因是瀏覽器的默認(rèn)樣式起了作用，與HTML沒(méi)有關(guān)系。而重點(diǎn)就在這里，這意味著我們可以基于這個(gè)結(jié)構(gòu)設(shè)計(jì)自己的頁(yè)面效果，見(jiàn)下方的示例。
          代碼
          <style>
           body { font-family: 'Microsoft YaHei', sans-serif; }
           #comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }
           #comment-list .comment { margin-top: 10px; margin-bottom: 10px; }
           #comment-list .title {
           color: #777; font-size: 1.1rem; padding-bottom: 5px;
           border-bottom: 1px solid #ccc;
           }
          </style>
          <artcle>
           <h1>背影</h1>
           <p>
          我說(shuō)道：“爸爸，你走吧。”他望車(chē)外看了看，說(shuō)：“我買(mǎi)幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
           </p>
          </artcle>
          <section id="comment-list">
           <div class="title">評(píng)論</div>
           <div class="comment">
           <strong class="username">王花花</strong>
           <span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>
           </div>
           <div class="comment">
           <strong class="username">李拴蛋</strong>
           <span class="content">我們都不愿意承認(rèn)他老了</span>
           </div>
           <div class="comment">
           <strong class="username">劉備備</strong>
           <span class="content">想吃橘子...</span>
           </div>
          </section>
          效果
          這里只是舉了一個(gè)小示例。你可以輕而易舉地讓頁(yè)面的風(fēng)格千變?nèi)f化，進(jìn)而讓用戶(hù)體驗(yàn)有所差異（或差距）。“千變?nèi)f化”因CSS靈活、強(qiáng)大，“輕而易舉”因HTML簡(jiǎn)潔、有序。結(jié)構(gòu)的力量！
          CSS是皮膚
          一個(gè)充滿(mǎn)活力的生態(tài)是不滿(mǎn)足于現(xiàn)狀的。人們?cè)谶m應(yīng)了便利地瀏覽核心信息之后，就會(huì)想方設(shè)法改進(jìn)瀏覽的體驗(yàn)。比如，讓自己的博客以多欄顯示，以便在視覺(jué)上區(qū)分不同板塊；修改字體顏色，以便強(qiáng)調(diào)一些重要信息等。
          起初的做法是——準(zhǔn)備幾種特殊的標(biāo)簽，專(zhuān)門(mén)用于樣式的指定。涉及布局的地方，如果沒(méi)有特殊標(biāo)簽就直接用表格布局。以下沒(méi)有任何樣式的狀態(tài)（以下代碼均不需要看懂）：
          代碼
          <h1>標(biāo)題</h1>
          <p>
          從前有座山，山里有個(gè)廟，廟里...
          </p>
          效果

          此時(shí)的頁(yè)面結(jié)構(gòu)下。
          如果想讓標(biāo)題居中，則需要給其添加元素<center>，見(jiàn)下方的示例。
          代碼
          <center>
          <h1>標(biāo)題</h1>
          </center>
          <p>
          從前有座山，山里有個(gè)廟，廟里...
          </p>
          效果
          此時(shí)的頁(yè)面結(jié)構(gòu)如下。
          居中標(biāo)題的目的確實(shí)達(dá)到了，但是有一個(gè)很大的問(wèn)題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對(duì)于簡(jiǎn)單的頁(yè)面確實(shí)可行，但如果是復(fù)雜的頁(yè)面，這種做法的工作量就是噩夢(mèng)，因?yàn)槊總€(gè)地方都得修改，無(wú)論是對(duì)齊方式、顏色、背景色，還是大的布局都必須通過(guò)修改結(jié)構(gòu)才能完成。這種做法的最大問(wèn)題是可維護(hù)性太差，很多時(shí)候?yàn)榱艘环N樣式要修改很多不必要的結(jié)構(gòu)，枯燥、重復(fù)、削足適履的工作太多，基本上寫(xiě)一次就再也不想改了。
          這個(gè)問(wèn)題亟待解決，而且解決方案還要兼容現(xiàn)有規(guī)則。現(xiàn)有規(guī)則是什么？HTML的語(yǔ)法及結(jié)構(gòu)。不過(guò)既然HTML已經(jīng)有結(jié)構(gòu)了，為什么不好好利用呢？
          以前面示例中的文章頁(yè)面為例，如果我們想更改標(biāo)題，是否可以先統(tǒng)一選中所有標(biāo)題，然后說(shuō)明想要什么樣式規(guī)則呢？就像下面這樣：
          所有h1 元素聽(tīng)著
           對(duì)齊方式 居中。
           字體顏色 黑色。
          如果想將所有段落字體放大，則像下面這樣：
          所有p 元素聽(tīng)著
           字體大小 150%。
          這種方式的確很高效！同時(shí)這個(gè)規(guī)則與HTML語(yǔ)法無(wú)關(guān)，相當(dāng)于另一種語(yǔ)言。這樣結(jié)構(gòu)和樣式就不會(huì)互相影響，結(jié)構(gòu)是結(jié)構(gòu)，樣式是樣式，兩者隔離開(kāi)了。如果想修改樣式，則完全不需要?jiǎng)贖TML大駕，只需要修改樣式文件即可，更便于管理和維護(hù)。這就是CSS，只不過(guò)其語(yǔ)法更簡(jiǎn)潔。
          下面以修改標(biāo)題對(duì)齊方式為例：
          h1 { /* 所有h1 元素聽(tīng)著 */
           text-align: center; /* 對(duì)齊方式 居中 */
          }
          通過(guò)批量選擇和處理，極大地提高了開(kāi)發(fā)效率，降低了維護(hù)成本，四兩撥千斤。
          （完）

          圖書(shū)推薦

          《HTML 5與CSS 3核心技法（全彩）》
          表嚴(yán)肅 著
          本書(shū)能夠為自學(xué)Web開(kāi)發(fā)初學(xué)者建立一套HTML與CSS的核心知識(shí)框架，同時(shí)借助豐富的示例讓初學(xué)者有一個(gè)愉悅、輕松的學(xué)習(xí)過(guò)程。
          想從事前端開(kāi)發(fā)的，可將本書(shū)作為學(xué)習(xí)的起點(diǎn)。正從事前端開(kāi)發(fā)的，可將本書(shū)作為速查的手冊(cè)。
          喜歡互聯(lián)網(wǎng)的一點(diǎn)是在互聯(lián)網(wǎng)放置靜態(tài)頁(yè)面是如此簡(jiǎn)單。今天有人問(wèn)我該怎么做，所以我想我會(huì)快速地寫(xiě)下來(lái)！
          -- Julia Evans（作者）
          我喜歡互聯(lián)網(wǎng)的一點(diǎn)是在互聯(lián)網(wǎng)放置靜態(tài)頁(yè)面是如此簡(jiǎn)單。今天有人問(wèn)我該怎么做，所以我想我會(huì)快速地寫(xiě)下來(lái)！
          只是一個(gè) HTML 頁(yè)面
          我的所有網(wǎng)站都只是靜態(tài) HTML 和 CSS。我的網(wǎng)頁(yè)設(shè)計(jì)技巧相對(duì)不高（ https://wizardzines.com 是我自己開(kāi)發(fā)的最復(fù)雜的網(wǎng)站），因此保持我所有的網(wǎng)站相對(duì)簡(jiǎn)單意味著我可以做一些改變/修復(fù)，而不會(huì)花費(fèi)大量時(shí)間。
          因此，我們將在此文章中采用盡可能簡(jiǎn)單的方式 —— 只需一個(gè) HTML 頁(yè)面。
          HTML 頁(yè)面
          我們要放在互聯(lián)網(wǎng)上的網(wǎng)站只是一個(gè)名為 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它，它是一個(gè) Github 倉(cāng)庫(kù)，其中只包含一個(gè)文件。
          HTML 文件中包含一些 CSS，使其看起來(lái)不那么無(wú)聊，部分復(fù)制自 https://example.com 。
          如何將 HTML 頁(yè)面放在互聯(lián)網(wǎng)上
          有以下幾步：
          1. 注冊(cè) Neocities 帳戶(hù)
          2. 將 index.html 復(fù)制到你自己 neocities 站點(diǎn)的 index.html 中
          3. 完成
          上面的 index.html 頁(yè)面位于 julia-example-website.neocities.com 中，如果你查看源代碼，你將看到它與 github 倉(cāng)庫(kù)中的 HTML 相同。
          我認(rèn)為這可能是將 HTML 頁(yè)面放在互聯(lián)網(wǎng)上的最簡(jiǎn)單的方法（這是一次回歸 Geocities，它是我在 2003 年制作我的第一個(gè)網(wǎng)站的方式）:)。我也喜歡 Neocities （像 glitch ，我也喜歡）它能實(shí)驗(yàn)、學(xué)習(xí)，并有樂(lè)趣。
          其他選擇
          這絕不是唯一簡(jiǎn)單的方式，在你推送 Git 倉(cāng)庫(kù)時(shí)，Github pages 和 Gitlab pages 以及 Netlify 都將會(huì)自動(dòng)發(fā)布站點(diǎn)，并且它們都非常易于使用（只需將它們連接到你的 GitHub 倉(cāng)庫(kù)即可）。我個(gè)人使用 Git 倉(cāng)庫(kù)的方式，因?yàn)?Git 不會(huì)讓我感到緊張，我想知道我實(shí)際推送的頁(yè)面發(fā)生了什么更改。但我想你如果第一次只想將 HTML/CSS 制作的站點(diǎn)放到互聯(lián)網(wǎng)上，那么 Neocities 就是一個(gè)非常好的方法。
          如果你不只是玩，而是要將網(wǎng)站用于真實(shí)用途，那么你或許會(huì)需要買(mǎi)一個(gè)域名，以便你將來(lái)可以更改托管服務(wù)提供商，但這有點(diǎn)不那么簡(jiǎn)單。
          這是學(xué)習(xí) HTML 的一個(gè)很好的起點(diǎn)
          如果你熟悉在 Git 中編輯文件，同時(shí)想練習(xí) HTML/CSS 的話(huà)，我認(rèn)為將它放在網(wǎng)站中是一個(gè)有趣的方式！我真的很喜歡它的簡(jiǎn)單性 —— 實(shí)際上這只有一個(gè)文件，所以沒(méi)有其他花哨的東西需要去理解。
          還有很多方法可以復(fù)雜化/擴(kuò)展它，比如這個(gè)博客實(shí)際上是用 Hugo 生成的，它生成了一堆 HTML 文件并放在網(wǎng)絡(luò)中，但從基礎(chǔ)開(kāi)始總是不錯(cuò)的。
          via: https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/
          作者： Julia Evans 選題： lujun9972 譯者： geekpi 校對(duì)： wxy
          本文由 LCTT 原創(chuàng)編譯， Linux中國(guó) 榮譽(yù)推出
          點(diǎn)擊“了解更多”可訪問(wèn)文內(nèi)鏈接
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产午夜精品一区理论片|
久久亚洲日韩精品一区二区三区|
97久久精品午夜一区二区|
国产主播一区二区|
日韩熟女精品一区二区三区|
亚洲av色香蕉一区二区三区|
国产AV一区二区三区传媒|
中文字幕在线无码一区|
国产一区二区三区久久精品|
久久一区二区三区免费|
一区二区三区无码视频免费福利|
国产精品无码一区二区三区电影|
制服美女视频一区|
三上悠亚亚洲一区高清|
国产精品va无码一区二区|
天天看高清无码一区二区三区|
天堂成人一区二区三区|
91麻豆精品国产自产在线观看一区|
国精无码欧精品亚洲一区|
波多野结衣中文一区二区免费|
好爽毛片一区二区三区四无码三飞|
国产精品一区二区三区久久
|
久久中文字幕无码一区二区|
色欲精品国产一区二区三区AV|
精品国产亚洲一区二区三区|
精品国产福利第一区二区三区|
中文字幕亚洲一区|
精品香蕉一区二区三区|
国产大秀视频在线一区二区|
四虎精品亚洲一区二区三区|
青娱乐国产官网极品一区|
国产精品区一区二区三在线播放|
免费精品一区二区三区第35|
亚洲.国产.欧美一区二区三区|
国产一区二区好的精华液|
另类ts人妖一区二区三区|
国产一区二区三区免费看|
亚洲福利一区二区三区|
无码丰满熟妇一区二区|
风流老熟女一区二区三区|
三上悠亚精品一区二区久久|