html+css寫出響應式側邊導航欄

果圖

html部分：先寫用div畫好六個導航的卡片，再利用css添加響應效果

<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部分：通過hover選擇器和transition屬性實現導航響應式操作，即可實現如圖效果

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;
}
//添加導航的響應式效果
.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; }

然后就能實現我們這個實用又美觀的側邊導航欄啦

果我在用HTML+CSS編程，那么，我能算是名開發人員嗎？

作者 | Amadou Ibrahim

譯者 | 彎月，責編 | 郭芮

以下為譯文：

有好多次，別人說我算不上程序員，因為我在用HTML + CSS編程。我非常傷心，因為別人都不認為我是開發人員。我們討論了好幾個小時，網上也有很多關于這個話題的討論。但仍然還有人否認這一點，那么就讓我們在本文中好好探討一番。

在深入探討之前，讓我們先來了解一下HTML + CSS的基礎知識。

根據維基百科：

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

這意味著你需要使用HTML來構造顯示在網頁上的文檔。下面是一個基本的HTML頁面的例子：

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

除了HTML之外，你還可以利用CSS來美化頁面。這就是為什么我們會結合二者使用。

根據維基百科：

層疊樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。

下面是一個CSS文件的示例：

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

編程語言的結構

首先，我不止一次聽說有人認為HTML + CSS沒有編程結構。那么編程結構是什么？經過一番搜索后，我發現，現代編程語言的編程結構幾乎都如出一轍。控制結構和數據結構。別著急，且聽我慢慢道來。

控制結構

控制結構指的是，分析變量并根據給定的參數選擇程序執行順序的一塊程序。

控制結構包括順序控制、條件控制和循環控制。下面我來舉例說明。我使用Ruby語言來書寫示例。別擔心，Ruby很接近英語，非常易于理解。

順序控制：逐條執行的指令。在下面的示例中，我們將執行一系列指令。

# 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，則執行此處的代碼。程序根據條件的結果，決定要執行的代碼塊。

# 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

上述指定的代碼塊將循環執行多次，直到條件成立為止。示例中的條件是“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有這樣的控制結構嗎？你怎么看？

數據結構

什么是數據結構？維基百科上說：

數據結構（英語：data structure）是計算機中存儲、組織數據的方式。

簡單來說，數據結構表示組織數據、定義數據類型以及操作數據的方法。大多數編程語言都有不同類型的數據，包括字符串、整數、布爾值、數組、對象...

那么，HTML + CSS也有這種數據結構嗎？此外，還有人說HTML + CSS不具備圖靈完備性——那么，圖靈完備性又是什么？

我的第一反應也是發懵。但經過幾個小時的查閱后，我有了大致的了解。

簡而言之，在計算理論里，如果一系列操作數據的規則（如指令集、編程語言、細胞自動機）可以用來模擬單帶圖靈機，那么它是圖靈完備的。

圖靈機是英國數學家艾倫·圖靈于1936年提出的一種將人的計算行為進行抽象的數學邏輯機，其更抽象的意義為一種計算模型，可以看作等價于任何有限邏輯數學過程的終極強大邏輯機器。

圖靈機是一個規則、狀態和轉換的系統，并不是指真正的機器。

如此說來，HTML + CSS確實不具備圖靈完備性。因為HTML + CSS無法更改系統狀態。也無法做出決策或根據輸入更改狀態……

那么，我還能說HTML + CSS是編程語言嗎？

CSS的控制結構

是的，你沒看錯，CSS有自己的控制結構方式。下面是一些例子。

順序控制

與其他編程語言一樣，我們可以在CSS中逐行執行指令。

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
}

在上述代碼中，第一條指令被覆蓋，所以最后的結果是：

條件控制

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

在上述代碼中，如果設備屏幕的最大寬度為567px，則應用樣式1；如果最大寬度為900px，則應用樣式2。因此，這就是一個條件控制。

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

對于上述navbar的樣式代碼，如果用戶的設備支持，則顯示屬性將設置為“flex”。你甚至可以使用關鍵字“not”書寫false語句：

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

循環控制

你是認真的嗎？是認真的。CSS也有類似循環的指令。盡管看上去與其他編程語言的循環有所不同。CSS的循環指令沒有“for”循環或“while”循環。讓我們看一下這段代碼：

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;
}

第一段代碼告訴瀏覽器循環遍歷“li”元素內所有的“a”元素，然后應用給定的樣式。第二段代碼告訴瀏覽器再循環一遍。如果“a”元素的類為“active”，則應用給定的樣式。因此，我結合使用了循環和條件控制。

現在你是否同意HTML + CSS具有編程語言結構？你同意？那太好了！我們之間達成了共識，你可以走了。

哦？你還在繼續閱讀？你還有疑問？那么就讓我來一一解答吧。

如果有人說CSS具備圖靈完備性，你會說什么？你無言以對，是嗎？事實上，有一位名叫Eli Fox-Epstein的名人證明了這一點。他進行了一項實驗，并證明HTML + CSS具備圖靈完備性，而這個故事發生在2011年。有關的詳細信息，請點擊這里（https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete）。

所以，你現在可以接受HTML + CSS是一種編程語言了嗎？

HTML + CSS就是當代網頁的“雙俠”（請參照電影《雙俠》）。

對于全世界所有的網站而言，無論其服務器端的語言是什么，前端都使用了HTML + CSS。

當目前為止，互聯網上的網站數目高達17億，供44億用戶使用。而且這個數字還在不斷增長。

這些網站又分為靜態網站和動態網站。靜態網站僅使用HTML + CSS構建。而動態網站還用到了其他語言。

其他語言是什么意思？

為了讓HTML + CSS大放異彩，你還需要其他的編程語言來潤色。常見的編程語言包括PHP、Python、Ruby、Javascript等等。Facebook、Twitter、Google和Medium都是動態網站。他們的網站因結合了多種語言而得以蓬勃發展。

感謝您的閱讀。如果你有不同的觀點，請在下方留言。

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

本文為 CSDN 翻譯，轉載請注明來源出處。

【End】

頁布局對改善網站的外觀非常重要。

請慎重設計您的網頁布局。

在線實例

使用 <div> 元素的網頁布局

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

使用 <table> 元素的網頁布局

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

網站布局

大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）。

大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分組 HTML 元素的塊級元素。

下面的例子使用五個 div 元素來創建多列布局：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網頁標題</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;">內容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>

上面的 HTML 代碼會產生如下結果：

HTML 布局 - 使用表格

使用 HTML <table> 標簽是創建布局的一種簡單的方式。

大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！

下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網頁標題</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;">內容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>

上面的 HTML 代碼會產生以下結果：

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。

Tip: 由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。

HTML 布局標簽

標簽	描述
<div>	定義文檔區塊，塊級(block-level)
<span>	定義 span，用來組合文檔中的行內元素。

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

在線咨詢

上一篇：HTML基礎的 <img> 標簽
下一篇：Html5-CSS之元素的五大居中方式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html+css寫出響應式側邊導航欄

您的項目需求