從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門

阿新 • • 發佈：2019-01-15

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、CSS可見性

overflow: hidden;   /*溢位隱藏 */   
visibility: hidden;  /* 隱藏元素    隱藏之後還保留原來的位置。*/
display: none;      /*  隱藏元素    隱藏之後不保留原來的位置。*/
display: block;    /* 元素可見 */

display:none 和display:block 常配合js使用（如：滑鼠經過時出現，滑鼠離開時消失）。

二、css之內容移除（logo優化）

1、方法一

text-indent: -5000em;

text-indent 屬性規定文字塊中首行文字的縮排。注意：負值是允許的。如果值是負數，將向左縮排。

之所以要寫著兩個字是為了 SEO，因為背景圖片 SEO 看不懂.

2、方法二

將元素高度設定為0, 使用內邊距將盒子撐開，給盒子使用overflow:hidden; 將文字隱藏。

.box{
  width:300px;
  height:0;
  padding-top:100px;
  overflow:hidden;
  background:red;
}

三、CSS精靈圖

上圖所示為網頁的請求原理圖，當用戶訪問一個網站時，需要向伺服器傳送請求，網頁上的每張影象都要經過一次請求才能展現給使用者。

然而，一個網頁中往往會應用很多小的背景影象作為修飾，當網頁中的影象過多時，伺服器就會頻繁地接受和傳送請求，這將大大降低頁面的載入速度。為了有效地減少伺服器接受和傳送請求的次數，提高頁面的載入速度，出現了CSS精靈技術（也稱CSS Sprites）。

簡單地說，CSS精靈是一種處理網頁背景影象的方式。它將一個頁面涉及到的所有零星背景影象都集中到一張大圖中去，然後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務傳送一次請求，網頁中的背景影象即可全部展示出來。

通常情況下，這個由很多小的背景影象合成的大圖被稱為精靈圖，如下圖所示為淘寶網站中的一個精靈圖。

工作原理：
CSS 精靈其實是將網頁中的一些背景影象整合到一張大圖中（精靈圖）。然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }

        ul, li{
            list-style: none;
        }

        .box{
            height: 48px;
            background: #222;
            margin-top: 50px;
        }

        .con{
            width: 1182px;
            height: 48px;
            margin: 0 auto;
            position: relative;
        }

        .con ul li{
            float: left;
            
        }

        .con ul li a{
            text-decoration: none;
            color: #fff;
            display: inline-block;
            height: 48px;
            font: 16px/48px microsoft yahei;
            padding: 0 18px;
        }

        .con ul li a:hover{
            background: #2774A2;
        }

        .con .hot{
            position: absolute;
            width: 31px;
            height: 21px;
            background: url("spirit.png") -58px 0;
            left:221px;
            bottom:35px;
        }

        .con .new{
            position: absolute;
            width: 31px;
            height: 21px;
            background: url("spirit.png") -135px 0;
            left:90px;
            bottom:35px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">IOS</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">C/C++</a></li>
                <li><a href="#">UI設計</a></li>
                <li><a href="#">前端與移動開發</a></li>
                <li><a href="#">問答專區</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">網路營銷</a></li>
                <li><a href="#">活動專區</a></li>
            </ul>
            <div class="hot"></div>
            <div class="new"></div>
        </div>
    </div>
</body>
</html>

PS：之所以選擇con作為父盒子而不是box作為父盒子，是因為box的寬度不定，不同的顯示器寬度不同，那麼new和hot的定位就有問題。

四、屬性選擇器

input[type="text"][class] {
  width: 20px;
  height: 20px;
}

選擇有type屬性為text，並且有class屬性的標籤。

input[type="text"][class="id"] {
  width: 20px;
  height: 20px;
}

選擇有type屬性為text，並且有class屬性，並且class屬性為 id 的標籤。

五、CSS滑動門

特點：邊上是這種圓弧型的或者其他形狀的，可以變換長度的樣式。

PS：浮動之後寬度不是父盒子的寬度，而是內容撐開的寬度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            float: left;
        }
        ul li a{
            display: inline-block;
            height: 35px;
            background: url("bg_r1_c1.png") no-repeat;
            padding-left: 7px;
        }

        ul li a span{
            display: inline-block;
            height: 35px;
            background: url("bg_r1_c2.png") right;
            padding-right: 25px;
            color: #fff;
            line-height: 35px;
        }

        ul li a:hover{
            background: url("bbg_r1_c1.png");
        }

        ul li a:hover span{
            background: url("bbg_r1_c2.png") right;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#"><span>網易雲音樂</span></a></li>
        <li><a href="#"><span>微信</span></a></li>
        <li><a href="#"><span>螞蟻花唄</span></a></li>
    </ul>
</body>
</html>

微信案例：

現象：滑鼠經過時，背景凸起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li,a,span{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .nav{
            height: 74px;
            background: url("weixin_bg.jpg");
        }

        .nav-con{
            width: 600px;
            margin: 0 auto;
        }

        li{
            float: left;
            height: 74px;
            line-height: 74px;
            margin-right: 60px;
        }

        li a{
            display: inline-block;
            text-decoration: none;
            color: #fff;
            height: 33px;
            line-height: 33px;
            background: url("bg.png") no-repeat 0 -144px;
            padding-left: 13px;
        }

        a span{
            display: inline-block;
            height: 33px;
            background: url("bg.png") no-repeat right -144px;
            padding-right: 13px;
        }

        a:hover{
            background: url("bg.png") no-repeat 0 -192px;
        }

        a:hover span{
            background: url("bg.png") no-repeat right -192px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-con">
            <ul>
                <li><a href="#"><span>首頁</span></a></li>
                <li><a href="#"><span>下載文章</span></a></li>
                <li><a href="#"><span>微信公眾公眾公眾助手</span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門

一、CSS可見性

二、css之內容移除（logo優化）

1、方法一

2、方法二

三、CSS精靈圖

四、屬性選擇器

五、CSS滑動門

從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門

從零開始學 Web 之 CSS（一）選擇器

從零開始學 Web 之 CSS（三）連結偽類、背景、行高、盒子模型、浮動

從零開始學 Web 之 CSS（四）CSS初始化、定位、overflow、標籤規範

從零開始學 Web 之 CSS（二）文字、標籤、特性

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

從零開始學 Web 之 CSS3（五）transform

從零開始學 Web 之 Ajax（五）同步非同步請求，資料格式

從零開始學 Web 之 DOM（五）元素的建立

從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件

從零開始學 Web 之 JavaScript（五）面向物件

從零開始學 Web 之 ES6（五）ES6基礎語法三

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

從零開始學 Web 之 DOM（四）節點

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門

一、CSS可見性

二、css之內容移除（logo優化）

1、方法一

2、方法二

三、CSS精靈圖

四、屬性選擇器

五、CSS滑動門

相關推薦