整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          html+css寫(xiě)出響應(yīng)式側(cè)邊導(dǎo)航欄

          果圖

          html部分:先寫(xiě)用div畫(huà)好六個(gè)導(dǎo)航的卡片,再利用css添加響應(yīng)效果

          <div class='card-holder'>
              <div class='card-wrapper'>
                  <a href='#'>
                      <div class='card bg-01'>
                          <span class='card-content'>item #1</span>
                      </div>
                  </a>
              </div>
              <div class='card-wrapper'>
                  <a href='#'>
                      <div class='card bg-02'>
                          <span class='card-content'>long menu item #2</span>
                      </div>
                  </a>
              </div>
              <div class='card-wrapper'>
                  <a href='#'>
                      <div class='card bg-03'>
                          <span class='card-content'>menu item #3</span>
                      </div>
                  </a>
              </div>
              <div class='card-wrapper'>
                  <a href='#'>
                      <div class='card bg-04'>
                          <span class='card-content'>item #4</span>
                      </div>
                  </a>
              </div>
              <div class='card-wrapper'>
                  <a href='#'>
                      <div class='card bg-05'>
                          <span class='card-content'>menu item #5</span>
                      </div>
                  </a>
              </div>
              <div class='card-wrapper'>
                  <a href='#'>
                      <div class='card bg-06'>
                          <span class='card-content'>long menu item #1</span>
                      </div>
                  </a>
              </div>
          </div>

          css部分:通過(guò)hover選擇器和transition屬性實(shí)現(xiàn)導(dǎo)航響應(yīng)式操作,即可實(shí)現(xiàn)如圖效果

          a:link,
          a:hover,
          a:visited,
          a:active {
            color: #fff;
            text-decoration: none;
          }
          body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #fff;
          }
          .card-holder {  
            position: fixed;
            width: 0px;
            overflow: visible;
          }
          .card-wrapper {
            display: inline-block;
            float: right;
            clear: both;
          }
          .card {
            position: relative;
            left: 32px;
            padding: 16px 32px 16px 64px;
            margin: 8px;  
            background: #fff;
            transition: all 0.3s ease-in-out 0.1s;
          }
          //添加導(dǎo)航的響應(yīng)式效果
          .card:hover {
            position: relative;
            left: 100%;
            margin-left: -32px;
            transition: all 0.3s ease-in-out;
          }
          .card-content {
            display: inline-block;
            color: #fff;
            font-family: 'Droid Sans', sans-serif;
            font-size: 16px;
            font-weight: bold;
            white-space: nowrap;
          }
          .bg-01 { background: #539770; }
          .bg-02 { background: #4B7D74; }
          .bg-03 { background: #8DC2BC; }
          .bg-04 { background: #EDD6B4; }
          .bg-05 { background: #BE7467; }
          .bg-06 { background: #E2AE63; }

          然后就能實(shí)現(xiàn)我們這個(gè)實(shí)用又美觀的側(cè)邊導(dǎo)航欄啦

          果我在用HTML+CSS編程,那么,我能算是名開(kāi)發(fā)人員嗎?

          作者 | Amadou Ibrahim

          譯者 | 彎月,責(zé)編 | 郭芮

          以下為譯文:

          有好多次,別人說(shuō)我算不上程序員,因?yàn)槲以谟肏TML + CSS編程。我非常傷心,因?yàn)閯e人都不認(rèn)為我是開(kāi)發(fā)人員。我們討論了好幾個(gè)小時(shí),網(wǎng)上也有很多關(guān)于這個(gè)話題的討論。但仍然還有人否認(rèn)這一點(diǎn),那么就讓我們?cè)诒疚闹泻煤锰接懸环?/p>

          在深入探討之前,讓我們先來(lái)了解一下HTML + CSS的基礎(chǔ)知識(shí)。

          根據(jù)維基百科:

          超文本標(biāo)記語(yǔ)言(英語(yǔ):HyperText Markup Language,簡(jiǎn)稱:HTML)是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。

          這意味著你需要使用HTML來(lái)構(gòu)造顯示在網(wǎng)頁(yè)上的文檔。下面是一個(gè)基本的HTML頁(yè)面的例子:

          <!DOCTYPE html>
          <html>
          <head>
          <!-- Metadata goes here -->
          </head>
          <body>
          <!-- Page content goes here -->
          </body>
          </html>

          除了HTML之外,你還可以利用CSS來(lái)美化頁(yè)面。這就是為什么我們會(huì)結(jié)合二者使用。

          根據(jù)維基百科:

          層疊樣式表(英語(yǔ):Cascading Style Sheets,縮寫(xiě):CSS;又稱串樣式列表、級(jí)聯(lián)樣式表、串接樣式表、階層式樣式表)是一種用來(lái)為結(jié)構(gòu)化文檔(如HTML文檔或XML應(yīng)用)添加樣式(字體、間距和顏色等)的計(jì)算機(jī)語(yǔ)言。

          下面是一個(gè)CSS文件的示例:

          *{ 
          box-sizing: border-box; max-width: 100%;
          }
          body{
          font-size: 1.25rem; padding-bottom: 70px;
          background: #fff;
          }

          編程語(yǔ)言的結(jié)構(gòu)

          首先,我不止一次聽(tīng)說(shuō)有人認(rèn)為HTML + CSS沒(méi)有編程結(jié)構(gòu)。那么編程結(jié)構(gòu)是什么?經(jīng)過(guò)一番搜索后,我發(fā)現(xiàn),現(xiàn)代編程語(yǔ)言的編程結(jié)構(gòu)幾乎都如出一轍。控制結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)。別著急,且聽(tīng)我慢慢道來(lái)。

          控制結(jié)構(gòu)

          控制結(jié)構(gòu)指的是,分析變量并根據(jù)給定的參數(shù)選擇程序執(zhí)行順序的一塊程序。

          控制結(jié)構(gòu)包括順序控制、條件控制和循環(huán)控制。下面我來(lái)舉例說(shuō)明。我使用Ruby語(yǔ)言來(lái)書(shū)寫(xiě)示例。別擔(dān)心,Ruby很接近英語(yǔ),非常易于理解。

          順序控制:逐條執(zhí)行的指令。在下面的示例中,我們將執(zhí)行一系列指令。

          # Sequences control-structures
          ## Set a new varibale age to 0.
          age = 0
          ## Then another varibale required_age to 15.
          required_age = 15
          ## Print this message "What is your age?" to the user
          puts "What is your age?"
          ## Get the user input and store it in age. Type 14
          age = gets.chomp.to_i
          ## Print this message "You are 14 year's old" to the user
          puts "You are #{age} year's old"

          條件控制:如果條件為true,則執(zhí)行此處的代碼。程序根據(jù)條件的結(jié)果,決定要執(zhí)行的代碼塊。

          # Condition Control Structure
          ## Set a new varibale age to 15.
          age = 15
          ## Then another varibale required_age to 16.
          required_age = 16
          ## check if the user age is less than 16
          if age < 16
          ## If the condition is checked, print the message "Sorry, you can't pass the driver license!" to the user
          puts "Sorry, you can't pass the driver license!"
          else
          ## If the condition is not checked, print this message "Great! You can pass your driver license" to the user
          puts "Great! You can pass your driver license"
          end

          上述指定的代碼塊將循環(huán)執(zhí)行多次,直到條件成立為止。示例中的條件是“counter”等于5。因此,這則消息輸出了5次。

          # Loop Control Structure
          ## Set a variable "counter" to zero
          counter = 1
          ## Iterate through the loop as long as "counter" is less than 5
          while counter <=5 do
          ## Print "Get your driver license with LicenseGuru"
          puts "Get your driver license with LicenseGuru"
          ## Add 1 to the current value of counter
          counter+=1
          end

          那么,HTML+ CSS有這樣的控制結(jié)構(gòu)嗎?你怎么看?

          數(shù)據(jù)結(jié)構(gòu)

          什么是數(shù)據(jù)結(jié)構(gòu)?維基百科上說(shuō):

          數(shù)據(jù)結(jié)構(gòu)(英語(yǔ):data structure)是計(jì)算機(jī)中存儲(chǔ)、組織數(shù)據(jù)的方式。

          簡(jiǎn)單來(lái)說(shuō),數(shù)據(jù)結(jié)構(gòu)表示組織數(shù)據(jù)、定義數(shù)據(jù)類型以及操作數(shù)據(jù)的方法。大多數(shù)編程語(yǔ)言都有不同類型的數(shù)據(jù),包括字符串、整數(shù)、布爾值、數(shù)組、對(duì)象...

          那么,HTML + CSS也有這種數(shù)據(jù)結(jié)構(gòu)嗎?此外,還有人說(shuō)HTML + CSS不具備圖靈完備性——那么,圖靈完備性又是什么?

          我的第一反應(yīng)也是發(fā)懵。但經(jīng)過(guò)幾個(gè)小時(shí)的查閱后,我有了大致的了解。

          簡(jiǎn)而言之,在計(jì)算理論里,如果一系列操作數(shù)據(jù)的規(guī)則(如指令集、編程語(yǔ)言、細(xì)胞自動(dòng)機(jī))可以用來(lái)模擬單帶圖靈機(jī),那么它是圖靈完備的。

          圖靈機(jī)是英國(guó)數(shù)學(xué)家艾倫·圖靈于1936年提出的一種將人的計(jì)算行為進(jìn)行抽象的數(shù)學(xué)邏輯機(jī),其更抽象的意義為一種計(jì)算模型,可以看作等價(jià)于任何有限邏輯數(shù)學(xué)過(guò)程的終極強(qiáng)大邏輯機(jī)器。

          圖靈機(jī)是一個(gè)規(guī)則、狀態(tài)和轉(zhuǎn)換的系統(tǒng),并不是指真正的機(jī)器。

          如此說(shuō)來(lái),HTML + CSS確實(shí)不具備圖靈完備性。因?yàn)镠TML + CSS無(wú)法更改系統(tǒng)狀態(tài)。也無(wú)法做出決策或根據(jù)輸入更改狀態(tài)……

          那么,我還能說(shuō)HTML + CSS是編程語(yǔ)言嗎?

          CSS的控制結(jié)構(gòu)

          是的,你沒(méi)看錯(cuò),CSS有自己的控制結(jié)構(gòu)方式。下面是一些例子。

          順序控制

          與其他編程語(yǔ)言一樣,我們可以在CSS中逐行執(zhí)行指令。

          body{
          // Set the background to white color
          background:#fff;
          // Set the font size to 20px
          font-size: 20px;
          // Set the background to yellow
          background:yellow;
          // Set the font size to 14px
          font-size:14px
          }

          在上述代碼中,第一條指令被覆蓋, 所以最后的結(jié)果是:

          條件控制

          @media screen and (max-width: 567px) {
          // Style 1
          }
          @media screen and (max-width: 900px) {
          // style 2
          }

          在上述代碼中,如果設(shè)備屏幕的最大寬度為567px,則應(yīng)用樣式1;如果最大寬度為900px,則應(yīng)用樣式2。因此,這就是一個(gè)條件控制。

          @supports (display: flex) {
          navbar{
          display:flex;
          }
          }

          對(duì)于上述navbar的樣式代碼,如果用戶的設(shè)備支持,則顯示屬性將設(shè)置為“flex”。你甚至可以使用關(guān)鍵字“not”書(shū)寫(xiě)false語(yǔ)句:

          @supports not (display: flex) {
          div { float: left; } /* alternative styles */
          }

          循環(huán)控制

          你是認(rèn)真的嗎?是認(rèn)真的。CSS也有類似循環(huán)的指令。盡管看上去與其他編程語(yǔ)言的循環(huán)有所不同。CSS的循環(huán)指令沒(méi)有“for”循環(huán)或“while”循環(huán)。讓我們看一下這段代碼:

          li a{
          font-weight:700;
          display: block;
          padding: 15px;
          margin-bottom:10px;
          background:#333;
          color:white;
          text-align: center;
          text-decoration: none;
          }
          li a.active{
          background:red;
          color:white;
          }

          第一段代碼告訴瀏覽器循環(huán)遍歷“l(fā)i”元素內(nèi)所有的“a”元素,然后應(yīng)用給定的樣式。第二段代碼告訴瀏覽器再循環(huán)一遍。如果“a”元素的類為“active”,則應(yīng)用給定的樣式。因此,我結(jié)合使用了循環(huán)和條件控制。

          現(xiàn)在你是否同意HTML + CSS具有編程語(yǔ)言結(jié)構(gòu)?你同意?那太好了!我們之間達(dá)成了共識(shí),你可以走了。

          哦?你還在繼續(xù)閱讀?你還有疑問(wèn)?那么就讓我來(lái)一一解答吧。

          如果有人說(shuō)CSS具備圖靈完備性,你會(huì)說(shuō)什么?你無(wú)言以對(duì),是嗎?事實(shí)上,有一位名叫Eli Fox-Epstein的名人證明了這一點(diǎn)。他進(jìn)行了一項(xiàng)實(shí)驗(yàn),并證明HTML + CSS具備圖靈完備性,而這個(gè)故事發(fā)生在2011年。有關(guān)的詳細(xì)信息,請(qǐng)點(diǎn)擊這里(https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete)。

          所以,你現(xiàn)在可以接受HTML + CSS是一種編程語(yǔ)言了嗎?

          HTML + CSS就是當(dāng)代網(wǎng)頁(yè)的“雙俠”(請(qǐng)參照電影《雙俠》)。

          對(duì)于全世界所有的網(wǎng)站而言,無(wú)論其服務(wù)器端的語(yǔ)言是什么,前端都使用了HTML + CSS。

          當(dāng)目前為止,互聯(lián)網(wǎng)上的網(wǎng)站數(shù)目高達(dá)17億,供44億用戶使用。而且這個(gè)數(shù)字還在不斷增長(zhǎng)。

          這些網(wǎng)站又分為靜態(tài)網(wǎng)站和動(dòng)態(tài)網(wǎng)站。靜態(tài)網(wǎng)站僅使用HTML + CSS構(gòu)建。而動(dòng)態(tài)網(wǎng)站還用到了其他語(yǔ)言。

          其他語(yǔ)言是什么意思?

          為了讓HTML + CSS大放異彩,你還需要其他的編程語(yǔ)言來(lái)潤(rùn)色。常見(jiàn)的編程語(yǔ)言包括PHP、Python、Ruby、Javascript等等。Facebook、Twitter、Google和Medium都是動(dòng)態(tài)網(wǎng)站。他們的網(wǎng)站因結(jié)合了多種語(yǔ)言而得以蓬勃發(fā)展。

          感謝您的閱讀。如果你有不同的觀點(diǎn),請(qǐng)?jiān)谙路搅粞浴?/p>

          原文:https://medium.com/swlh/the-most-used-and-unrecognized-programming-languages-b0882e8c8c6f?

          本文為 CSDN 翻譯,轉(zhuǎn)載請(qǐng)注明來(lái)源出處。

          【End】

          頁(yè)布局對(duì)改善網(wǎng)站的外觀非常重要。

          請(qǐng)慎重設(shè)計(jì)您的網(wǎng)頁(yè)布局。

          在線實(shí)例

          使用 <div> 元素的網(wǎng)頁(yè)布局

          如何使用 <div> 元素添加布局。

          使用 <table> 元素的網(wǎng)頁(yè)布局

          如何使用 <table> 元素添加布局。

          網(wǎng)站布局

          大多數(shù)網(wǎng)站會(huì)把內(nèi)容安排到多個(gè)列中(就像雜志或報(bào)紙那樣)。

          大多數(shù)網(wǎng)站可以使用 <div> 或者 <table> 元素來(lái)創(chuàng)建多列。CSS 用于對(duì)元素進(jìn)行定位,或者為頁(yè)面創(chuàng)建背景以及色彩豐富的外觀。

          雖然我們可以使用HTML table標(biāo)簽來(lái)設(shè)計(jì)出漂亮的布局,但是table標(biāo)簽是不建議作為布局工具使用的 - 表格不是布局工具。

          HTML 布局 - 使用<div> 元素

          div 元素是用于分組 HTML 元素的塊級(jí)元素。

          下面的例子使用五個(gè) div 元素來(lái)創(chuàng)建多列布局:

          實(shí)例

          <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網(wǎng)頁(yè)標(biāo)題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內(nèi)容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權(quán) ? runoob.com</div></div></body></html>

          上面的 HTML 代碼會(huì)產(chǎn)生如下結(jié)果:

          HTML 布局 - 使用表格

          使用 HTML <table> 標(biāo)簽是創(chuàng)建布局的一種簡(jiǎn)單的方式。

          大多數(shù)站點(diǎn)可以使用 <div> 或者 <table> 元素來(lái)創(chuàng)建多列。CSS 用于對(duì)元素進(jìn)行定位,或者為頁(yè)面創(chuàng)建背景以及色彩豐富的外觀。

          即使可以使用 HTML 表格來(lái)創(chuàng)建漂亮的布局,但設(shè)計(jì)表格的目的是呈現(xiàn)表格化數(shù)據(jù) - 表格不是布局工具!

          下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來(lái)橫跨兩列:

          實(shí)例

          <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網(wǎng)頁(yè)標(biāo)題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內(nèi)容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權(quán) ? runoob.com</td></tr></table></body></html>

          上面的 HTML 代碼會(huì)產(chǎn)生以下結(jié)果:

          HTML 布局 - 有用的提示

          Tip: 使用 CSS 最大的好處是,如果把 CSS 代碼存放到外部樣式表中,那么站點(diǎn)會(huì)更易于維護(hù)。通過(guò)編輯單一的文件,就可以改變所有頁(yè)面的布局。如需學(xué)習(xí)更多有關(guān) CSS 的知識(shí),請(qǐng)?jiān)L問(wèn)我們的CSS 教程。

          Tip: 由于創(chuàng)建高級(jí)的布局非常耗時(shí),使用模板是一個(gè)快速的選項(xiàng)。通過(guò)搜索引擎可以找到很多免費(fèi)的網(wǎng)站模板(您可以使用這些預(yù)先構(gòu)建好的網(wǎng)站布局,并優(yōu)化它們)。

          HTML 布局標(biāo)簽

          標(biāo)簽描述
          <div>定義文檔區(qū)塊,塊級(jí)(block-level)
          <span>定義 span,用來(lái)組合文檔中的行內(nèi)元素。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 无码精品黑人一区二区三区| 波多野结衣精品一区二区三区| 欧美激情一区二区三区成人| 免费精品一区二区三区在线观看| AV怡红院一区二区三区| 无码中文字幕一区二区三区| 夜夜添无码试看一区二区三区| 丰满岳乱妇一区二区三区| 国产精品乱码一区二区三| 亚洲福利电影一区二区?| 日韩电影一区二区| 亚洲av一综合av一区| 中文字幕aⅴ人妻一区二区| 中文字幕日本一区| 国产亚洲一区二区在线观看| 国产午夜精品一区二区三区小说| 精品视频一区二区观看| 国产伦精品一区三区视频| 日韩高清一区二区三区不卡| 色天使亚洲综合一区二区| 日本韩国一区二区三区| 鲁大师成人一区二区三区| 一区二区三区四区在线视频| 亚洲一区无码精品色| 97久久精品午夜一区二区| 精品国产福利第一区二区三区| 亚洲AV无码一区二区二三区入口| 无码一区二区三区免费| 国产精品亚洲午夜一区二区三区| 日韩av片无码一区二区不卡电影| 色综合视频一区二区三区44| 免费高清在线影片一区| 国产免费伦精品一区二区三区| 中文无码精品一区二区三区| 久久99国产精品一区二区| 亚洲一区在线观看视频| 国产精品免费综合一区视频| 无码人妻一区二区三区精品视频 | 国产欧美一区二区精品仙草咪| 欧美日韩精品一区二区在线观看 | 亚洲AV无码片一区二区三区 |