CSS

時間 2019-11-12

標籤 css 欄目 CSS 简体版

原文原文鏈接

1、CSS

CSS（cascading style sheet，層疊樣式表）定義如何顯示HTML元素。css

當瀏覽器讀到一個樣式表，它會按照這個樣式表來對文檔進行格式化（渲染）。html

一、CSS語法

每一個CSS樣式由兩個部分組成：選擇器 + 聲明（屬性、屬性值）每一個聲明以後加；分號結束！瀏覽器

二、CSS註釋

/* 註釋內容 */

2、CSS的引入方式

一、行內樣式

<!--行內式  是在標記的style 屬性中設定CSS樣式。儘可能不要頻繁使用-->


<p style="color: pink">這個一個p標籤 內聯樣式是字體顏色粉色</p>

二、內部樣式

<!--嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。-->
<head>
    <meta charset="UTF-8">
    <style>
        h1 {color: pink}
    </style>
    <title>test練習</title>
</head>
<body>
<h1 id="p1">海燕</h1>
</body>
</html>

三、外部樣式

<!--外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="01樣式.css">  link 即爲引入外部樣式
    <title>test練習</title>
</head>

3、CSS選擇器

一、基本選擇器

一、元素（標籤）選擇器：適用於批量的（統一，默認）的樣式
p {color: sandybrown} 二、ID 選擇器：給特定標籤設置特定樣式
#p1 {background-color: burlywood} 
（井號後跟 需渲染內容的 ID 號） 三、類 選擇器：給某一些標籤設置相同的樣式
.c1 {color: antiquewhite;font-size: 18px}
.p1 { font-size: 29px}
（在HTML標籤中有一個class屬性，c1 和 p1 對應名稱的class） 四、通用選擇器
* {font-size: 14px}
/*適用全部元素*/

ps：ide

樣式類名不要用數字開頭（有的瀏覽器不認）。佈局

標籤中的class屬性若是有多個，要用空格分隔。字體

二、組合選擇器

一、後代選擇器
 （p內部的a標籤設置字體顏色 <p>空格<a>：p標籤內部嵌套的全部a標籤（包括兒子，孫子等等））
p a {
     color: red;
 }

二、兒子選擇器
 （選擇全部父級是<div>元素的<p>元素:div標籤內子標籤是p標籤的生效（只找兒子輩））
div>p {
    font-family: "Arial Black","arial-black",cursive;
 }

三、毗鄰選擇器
（選擇全部緊挨着<div>以後的<p>標籤：找的是<p>標籤（條件：同級的上面有個<div>））
div+p {
    margin: 5px;
}

四、弟弟選擇器
（#p1(id=p1的)後面全部的兄弟p標籤）
#p1~p {
    color: gold
}

三、屬性選擇器

一、用於選取帶有指定屬性的元素。
p[title] {
  color: red;
} 二、用於選取帶有指定屬性和值的元素。
p[title="123"] {
  color: green;
}

 對應下面2個HTML生效
<p title="xxx">咕咕咕</p>
<p title="123">略略略</p>

/*找到全部title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到全部title屬性以hello結尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到全部title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：*/
[title~="hello"] {
  color: green;

不怎麼經常使用的屬性選擇器

四、分組和嵌套

/*一、分組（當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，
       能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式）*/
div, （必定要加逗號（否則就變成後代了））
p{
    color: sandybrown;
}

/*二、嵌套（多種選擇器能夠混合起來使用（空格,>,+,~），好比：.c1類內部全部p標籤設置字體顏色爲紅色。）*/
.c1 p {
    color: red;
 }

五、僞類選擇器

/* 未訪問的連接 */
a:link {
  color: #FF0000
}

/* 已訪問的連接 */
a:visited {
  color: #00FF00
} 

/* 鼠標移動到連接上 */
a:hover {
  color: #FF00FF
} 

/* 選定的連接 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

六、僞元素選擇器

一、first-letter: 經常使用的給首字母設置特殊樣式：

p:first-letter{
    font-size: 48px;
    color: red;
} 二、before：在每一個p元素以前插入內容

 p:before{
    content: "*";
    color: red;
 } 三、 after：在每一個p元素以後插入內容
 
 p:after{
   content: "[?]";
    color: blue;
 }

before和after多用於清除浮動網站

4、選擇器的優先級

一、CSS繼承

　　繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個body定義了的字體顏色值也會應用到段落的文本中。ui

body {
    color: red;
}
此時頁面上全部標籤都會繼承body的字體顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。
咱們只要給對應的標籤設置字體顏色就可覆蓋掉它繼承的樣式。

此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。url

具體的選擇器權重計算方式以下圖：spa

除此以外還能夠經過添加 !important方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!important會使樣式文件混亂不易維護。

萬不得已可使用!important

二、樣式文件優先級（重要）

　　1. 越靠近標籤的優先級越高（就近原則）

　　2. 權重的計算

　　　　1. 內聯樣式 1000

　　　　2. ID選擇器 100

　　　　3. 類選擇器 10

　　　　4.元素選擇器 1

5、CSS字體和文字屬性相關

一、通用的屬性：寬和高（width(寬度) 和 height(高度)）

width 屬性能夠爲元素設置寬度。

height 屬性能夠爲元素設置高度。

塊級標籤才能設置寬度，內聯標籤的寬度由內容決定。

二、文字字體

font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

* {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

三、字體大小和粗細

@字體大小設置

p {
  font-size: 14px;    若是設置成 inherit 表示繼承父元素的字體大小值。
}

@字體粗細設置

p {
    font-weight: normal;  默認值，標準粗細
    font-weight:  bold;   粗體
    font-weight:  bolder; 更粗
    font-weight:  lighter;更細
    font-weight:  100-900;設置具體粗細，400等同於normal，700等同於bold
    font-weight:  inherit;繼承父元素字體的粗細值
}

四、文本顏色

.c1 {
    color: aqua;
}

顏色屬性被用來設置文字的顏色。

顏色是經過CSS最常常的指定：

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red

還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。

五、文字對齊

text-align 屬性規定元素中的文本的水平對齊方式。

p {text-align: center;}

六、文字裝飾

text-decoration 屬性用來給文字添加特殊效果。

經常使用的爲去掉a標籤默認的下劃線：

a { text-decoration: none; }

經常使用的爲去掉ul標籤前面的圓點：

ul { list-style-type: none; }

首行縮進：

p { text-indent: 28px; }
首行縮進28像素

6、CSS背景和邊框屬性

一、背景屬性

1.背景顏色
background-color: red;
 背景圖片
background-image: url("頭像.jpg") ;

2. 背景重複
 repeat(默認):背景圖片平鋪排滿整個網頁
 repeat-x：  背景圖片只在水平方向上平鋪
 repeat-y：  背景圖片只在垂直方向上平鋪
 no-repeat： 背景圖片不平鋪

background-repeat: no-repeat; 

3.背景位置
background-position: right top;
background-position: 200px 200px;

可簡寫爲：

background:  url("頭像.jpg") no-repeat center top ;

使用背景圖片的一個常見案例就是不少網站會把不少小圖標放在一張圖片上，而後根據位置去顯示圖片。減小頻繁的圖片請求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("頭像.jpg") no-repeat center center;
            background-attachment: fixed;
        }
        .c1 {
            height: 500px;
            background-color: tomato;
        }
        .c2 {
            height: 500px;
            background-color: steelblue;
        }

    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="box"></div>
    <div class="c2"></div>
</body>
</html>

鼠標滾動，背景不變

二、邊框屬性

一、邊框屬性有（border - width、border-style、bordercolor）

一般簡寫成：

.c2 {
    border: aqua solid 3px;
}

二、邊框的樣式：

三、單獨爲某一個邊框設置樣式：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

四、圓角邊框效果

將border-radius設置爲長或高的一半便可獲得一個圓形

border-radius: 50%;

三、display 屬性

用於塊級元素和行內元素轉換（控制元素顯示效果）

display:"none"與visibility:hidden的區別：不經常使用！

visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失

7、CSS盒子模型

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像。

一、margin 外邊距

.c1 {
  margin-top:5px;   頂部
  margin-right:10px;右邊
  margin-bottom:15px;底部
  margin-left:20px; 左邊
}

可簡寫爲：

.c1 {
  margin: 5px 10px 15px 20px;
}
順序：上>右>下>左

最常居中使用！！！

.c1 { margin: 0 auto;}

二、padding 內填充

.c1 {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}
簡寫和順序 與 margin 一致！！！

補充padding的經常使用簡寫方式：

提供一個，用於四邊；
提供兩個，第一個用於上－下，第二個用於左－右；
若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；
提供四個參數值，將按上－右－下－左的順序做用於四邊；

8、浮動與清除浮動、處理溢出

一、浮動（float）

在 CSS 中，任何元素均可以浮動。

浮動元素會生成一個塊級框，而不論它自己是何種元素。

關於浮動的兩個特色：

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>佈局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .c1 {
            height: 1000px;
            width: 20%;
            background-color: red;
            float: left;
        }

        .c2 {
            height: 1000px;
            width: 80%;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

浮動頁面佈局示例

left：向左浮動

right：向右浮動

none：默認值，不浮動

二、清除浮動（clear）

clear屬性規定元素的哪一側不容許其餘浮動元素

ps：clear屬性只會對自身起做用，而不會影響其餘元素。

浮動有一個反作用：父標籤塌陷

清除主要有三種方式：

固定高度
僞元素清除法
overflow:hidden

/*僞元素清除浮動（最經常使用）*/
#clearfix:after {
    content: "";
    clear: left;
    display: block;
    }

三、溢出（overflow）

overflow（水平和垂直均設置）
overflow-x（設置水平方向）
overflow-y（設置垂直方向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頭像示例</title>
    <style>
        .header-img {
            border: 1px solid pink;
            border-radius: 50%;
            height: 128px;
            width: 128px;
            overflow: hidden;
            margin: 0 auto;
        }
        img {
            max-width: 100%;
        }
    </style>
<body>
<div class="header-img">
    <!--頭像img需在div以內-->
    <img src=" http://tx.haiqq.com/uploads/allimg/150325/1222515561-5.jpg" alt="">
</div>
</body>
</html>

頭像示例

9、定位（position）

static -----> 默認
relative -----> 相對定位（相對於原來的位置）
absolute-----> 絕對定位（相對於最近的一個被定位過的的祖宗標籤）
fixed -----> 固定在某個位置（返回頂部按鈕）

left right top bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位練習</title>
    <style>
        * { margin: 0;padding: 0 }
        .c1,
        .c2,
        .c3,
        .c4{
            height: 150px;
            width: 150px;
        }
        .c1 {
            background-color: red;
        }
        .c2 {
            background-color: #ff6700;
            position: relative;
            left: 150px; ;
        }
        .c3 {
            background-color: lightgreen;
        }
        .c4 {
            background-color: coral;
            position: absolute;
            left: 300px;
            top: 150px;
        }
        #d1 {
            background-color: pink;
            bottom: 20px;right: 20px;
            position: fixed;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">c2</div>
<div class="c3">c3</div>
<div class="c4">c4</div>
<div id="d1">返回頂部</div>
</body>
</html>

定位示例

ps：脫離文檔流的3種方式：

　　一、 float 浮動

　　二、absolute 絕對定位

　　三、fixed　　固定

10、元素透明度與層疊順序

一、opacity (元素透明度)

取 0---1 之間的值；

和rgba（）的區別：
　　1：opacity 改變元素以及子元素的透明度

　　2：rgba（）只改變背景顏色的透明度

二、z-index（層疊順序設置）

一、數值越大，越靠近你

二、只能做用於定位過的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

模態框示例

三、頂部導航欄練習

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>導航欄示例</title>
  <style>
    /*清除瀏覽器默認外邊距和內填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標籤默認的下劃線*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表默認的圓點樣式*/
      margin: 0; /*刪除列表默認的外邊距*/
      padding: 0; /*刪除列表默認的內填充*/
      display: inline-block;
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓連接顯示爲塊級標籤*/
      padding: 0 15px; /*設置左右各15像素的填充*/
      color: #b0b0b0; /*設置字體顏色*/
      line-height: 40px; /*設置行高*/
    }
    /*鼠標移上去顏色變白*/
    li > a:hover {
      color: #fff;
      display: block;
      background-color: #ff6700;
    }
    #u-right {
        float: right;
    }
    li > a:active {
        color: deeppink;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="nav">
    <ul class="clearfix">
    <li><a href="http://www.baidu.com">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">紫米</a></li>
    <li><a href="">雲服務</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">有品</a></li>
    </ul>
    <ul id="u-right" class="clearfix">
        <li><a href="">登陸</a></li>
        <li><a href="">註冊</a></li>
        <li><a href="">消息通知</a></li>
    </ul>
</div>

<!-- 頂部導航欄 結束 -->
</body>
</html>

View Code

11、練習

一、博客首頁模板

<!--外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test練習</title>
    <style>
        /*通用的樣式*/
        * {
            font-family: 微軟雅黑,"Arial Unicode MS";
            font-size:14px ;
            margin: 0;padding: 0;
        }
        /*去a標籤下劃線*/
        a {
            text-decoration: none;
        }
        /*左邊欄開始*/
        .left {
            width: 20%;
            background-color: aquamarine;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
        }
        /*頭像*/
        .head-img {
            width: 128px;
            height: 128px;
            border:  2px solid white;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 15px;
        }
        .head-img>img{
            max-width: 100%;
        }
        .bg-name {
            color: black;
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            margin-top: 15px;
        }
        .bg-info {
            color: brown;
            text-align: center;
            border: 2px solid white;
            margin: 15px;
        }
        .bg-link,
        .bg-tag{
            text-align: center;
            margin-top: 15px;
        }

        .bg-tag a:before{
            content: "#";
        }
        /*右邊欄開始*/
        .right {
            width: 80%;
            background-color: burlywood;
            height: 100%;
            float: right;
        }
        .wenzhang-list {
            margin-left: 30px;
            margin-top:30px ;
            margin-right: 10%;
        }
        .wenzhang {
            background-color: white;
            margin-bottom: 20px;
            /*margin-right:15px ;*/
        }
        .wenzhang-name {
            display: inline-block;
        }
        .wenzhang-date {
            float: right;
        }
        .wenzhang-info {
            padding: 15px;
            text-align: justify;
            text-indent: 28px ;
        }
        .wenzhang-title {
            border-left: 3px solid red;
            padding: 15px;
        }
        .wenzhang-tag {
            padding: 15px 0;
            margin: 15px;
            border-top: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
<!--左邊欄 開始-->
<div class="left">
    <!--頭像開始-->
    <div class="head-img">
        <img src="頭像.jpg" alt="">
    </div>
    <!--頭像結束-->
    <div class="bg-name">XX的狗窩</div>
    <div class="bg-info">XX很懶，什麼都沒留下！</div>
    <!--連接區-->
    <div class="bg-link">
        <ul>
            <li><a href="">關於XX</a></li>
            <li><a href="">關於other</a></li>
            <li><a href="">關於woman</a></li>
        </ul>
    </div>
    <!--連接區結束-->
    <!--文章 分類-->
    <div class="bg-tag">
        <ul>
            <li><a href="">HTML</a></li>
            <li><a href="">CSS</a></li>
            <li><a href="">JavaScript</a></li>
        </ul>
    </div>
</div>
<!--左邊欄 結束-->

<!--右邊欄 開始-->
<div class="right">
    <div class="wenzhang-list">
        <div class="wenzhang">
            <div class="wenzhang-title">
                <h1 class="wenzhang-name">海燕</h1>
                <span class="wenzhang-date">2018-11-06</span>
            </div>
            <div class="wenzhang-info">
                在蒼茫的大海上，狂風捲積着烏雲，在烏雲和大海之間，海燕像黑色的閃電，在高傲的飛翔！<br>

                一下子翅膀碰着波浪，一下子箭通常地直衝向烏雲，它叫喊着，──就在這鳥兒勇敢的叫喊聲裏，烏雲聽出了歡樂。<br>

                在這叫喊聲裏──充滿着對暴風雨的渴望！在這叫喊聲裏，烏雲聽出了憤怒的力量、熱情的火焰和勝利的信心。<br>

                海鷗在暴風雨來臨以前呻吟着，──呻吟着，它們在大海上飛竄，想把本身對暴風雨的恐懼，掩藏到大海深處。<br>

                海鴨也在呻吟着，──它們這些海鴨啊，享受不了生活的戰鬥的歡樂：轟隆隆的雷聲就把它們嚇壞了。<br>

                蠢笨的企鵝，膽怯地把肥胖的身體躲藏到懸崖底下……只有那高傲的海燕，勇敢地，自由自在地，在泛起白沫的大海上飛翔！<br>

                烏雲愈來愈暗，愈來愈低，向海面直壓下來，而波浪一邊歌唱，一邊衝向高空，去迎接那雷聲。<br>

                雷聲轟響。波浪在憤怒的飛沫中呼叫，跟狂風爭鳴。看吧，狂風牢牢抱起一層層巨浪，惡狠狠地把它們甩到懸崖上，把這些大塊的翡翠摔成塵霧和碎末。<br>

                海燕叫喊着，飛翔着，像黑色的閃電，箭通常地穿過烏雲，翅膀掠起波浪的飛沫。<br>

                看吧，它飛舞着，像個精靈，──高傲的、黑色的暴風雨的精靈，——它在大笑，它又在號叫……它笑那些烏雲，它由於歡樂而號叫！<br>

                這個敏感的精靈，——它從雷聲的震怒裏，早就聽出了睏乏，它深信，烏雲遮不住太陽，──是的，遮不住的！<br>

                狂風吼叫……雷聲轟響……<br>

                一堆堆烏雲，像青色的火焰，在無底的大海上燃燒。大海抓住閃電的箭光，把它們熄滅在本身的深淵裏。這些閃電的影子，活像一條條火蛇，在大海里蜿蜒遊動，一晃就消失了。<br>

                ——暴風雨！暴風雨就要來啦！<br>

                這是勇敢的海燕，在怒吼的大海上，在閃電中間，高傲地飛翔；這是勝利的預言家在叫喊：<br>

                ——讓暴風雨來得更猛烈些吧！
            </div>
            <div class="wenzhang-tag">#HTML #CSS</div>
        </div>
        <div class="wenzhang">
            <div class="wenzhang-title">
                <h1 class="wenzhang-name">背影</h1>
                <span class="wenzhang-date">2018-11-06</span>
            </div>
            <div class="wenzhang-info">
                我與父親不相見已二年餘了，我最不能忘記的是他的背影 。<br>
                那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子。我從北京到徐州打算跟着父親奔喪回家。到徐州見着父親，看見滿院狼藉的東西，又想起祖母，不由簌簌地流下眼淚。父親說：「事已如此，沒必要難過，好在天無絕人之路！」 <br>
                回家變賣典質，父親還了虧空；又借錢辦了喪事。這些日子，家中光景非常慘淡，一半由於喪事，一半由於父親賦閒。喪事完畢，父親要到南京謀事，我也要回北京唸書，咱們便同行。<br>
                到南京時，有朋友約去遊逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親由於事忙，本已說定不送我，叫旅館裏一個熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細。但他終於不放心，怕茶房不妥帖；頗躊躇了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有什麼要緊的了。他躊躇了一會，終於決定仍是本身送我去。我再三勸他沒必要去；他只說：「沒關係，他們去很差！」 <br>
                咱們過了江，進了車站。我買票，他忙着照看行李。行李太多了，得向腳伕行些小費纔可過去。他便又忙着和他們講價錢。我那時真是聰明過度，總覺他說話不大漂亮，非本身插嘴不可，但他終於講定了價錢；就送我上車。他給我揀定了靠車門的一張椅子；我將他給我作的紫毛大衣鋪好座位。他囑我路上當心，夜裏要警醒些，不要受涼。又囑託茶房好好照應我。<br>
                我內心暗笑他的迂；他們只認得錢，託他們只是白託！ 並且我這樣大年紀的人，難道還不能料理本身麼？唉，我如今想一想，那時真是太聰明瞭！ 我說道：「爸爸，你走吧。」他往車外看了看說：「我買幾個橘子去。你就在此地，不要走動。」我看那邊月臺的柵欄外有幾個賣東西的等着顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去天然要費事些。我原本要去的，他不願，只好讓他去。我看見他戴着黑布小帽，穿着黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。但是他穿過鐵道，要爬上那邊月臺，就不容易了。 他用兩手攀着上面，兩腳再向上縮； 他肥胖的身子向左微傾，顯出努力的樣子，這時我看見他的背影，個人淚很快地流下來了。 我趕忙拭乾了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了硃紅的桔子往回走了。過鐵道時，他先將桔子散放在地上，本身慢慢爬下，再抱起桔子走。到這邊時，我趕忙去攙他。他和我走到車上，將桔子一古腦兒放在個人皮大衣上。因而撲撲衣上的泥土，內心很輕鬆似的。過一下子說：「我走了，到那邊來信！」我望着他走出去。他走了幾步，回過頭看見我，說：「進去吧，裏邊沒人。 」等他的背影混入來來每每的人裏，再找不着了，我便進來坐下，個人眼淚又來了。<br>
                近幾年來，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨立支持，作了許多大事。哪知老境卻如此頹唐！他觸目傷懷，天然情不能自已。情鬱於中，天然要發之於外；家庭瑣屑便每每觸他之怒。他待我漸漸不一樣往日。但最近兩年不見，他終於忘卻個人很差，只是惦記着我，惦記着個人兒子。我北來後，他寫了一信給我，信中說道：「我身體平安，唯膀子疼痛厲害，舉箸提筆，諸多不便，大約大去之期不遠矣。 <br>
                」我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知什麼時候再能與他相見！
            </div>
            <div class="wenzhang-tag">#HTML #CSS</div>
        </div>
    </div>
</div>
<!--右邊欄 結束-->
</body>
</html>

博客首頁代碼示例

二、商城首頁模板

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>練習後臺管路頁面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        .pg-head {
            height: 48px;
            position: fixed;
            width: 100%;
            top: 0;
            background-color: black;
        }
        .pg-left {
            position: fixed;
            top: 48px;
            bottom: 0;
            left: 0;
            width: 15%;
            background-color: #046a80;
        }
        .pg-content {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 85%;
            top: 48px;
            background-color: papayawhip;
            overflow: auto;
        }
        .pg-head .logo {
            color: white;
            font-size: 24px;
            text-align: center;
            line-height: 48px;
            float: left;
            width: 16%;
        }
        .pg-head .menu {
            margin: 0 auto;
            padding-left: 20px;
            float: left;
        }
        .pg-head a {
            color: wheat;
            display: inline-block;
            padding: 14px 17px;
        }
        .pg-head a:hover,
        .pg-left>.menu a:hover{
            background-color: #ff6700;
            color: black;
        }
        .login {
            float: right;
            padding-right: 20px;
        }
        /*左邊菜單開始*/
        .pg-left a{
            text-align: center;
            color: wheat;
            display: block;
            line-height: 55px;
        }
        .flash-item img{
            margin-left: 20px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="pg-head">
    <div class="logo">
        <div>mogu</div>
    </div>
    <div class="menu">
        <a href="">首頁</a>
        <a href="">管理</a>
        <a href="">客服</a>
        <a href="">技術</a>
        <a href="">社區</a>
        <a href="">喵喵</a>
    </div>
    <div class="login">
        <a href="">登陸</a>
        <a href="">註冊</a>
        <a href="">購物車</a>
    </div>
</div>
<div class="pg-left">
    <div class="menu">
        <a href="" style="margin-top: 25px;">手機 電話卡</a>
        <a href="">電視 盒子</a>
        <a href="">筆記本 平板</a>
        <a href="">家電 插線板</a>
        <a href="">出行 穿戴</a>
        <a href="">智能 路由器</a>
        <a href="">電源 配件</a>
        <a href="">健康 兒童</a>
    </div>
</div>
<div class="pg-content">
    <div class="flash-sale">
            <h1>限時閃購</h1>
            <div class="flash-list clearfix">
                <div class="flash-right fr">
                    <a class="flash-item first" href="">
                        <img src="./img/flash0.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash1.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash2.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash1.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash2.png" alt="">
                    </a>
                    <a class="flash-item first" href="">
                        <img src="./img/flash0.png" alt="">
                    </a>
                </div>
            </div>
        </div>
</div>
</body>
</html>

商城首頁模板示例

1. CSS——CSS樣式
2. 【CSS】理解CSS
3. CSS Tools: Reset CSS
4. CSS——CSS基礎
5. CSS之CSS hack
6. CSS：關於CSS Hack
7. CSS animation & CSS animation 101
8. CSS+DIV-CSS與Javascript
9. css樣式 --- CSS hack
10. CSS 框架 Blueprint CSS
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。